# next-tinacms-owncloud

> Manage **Cloudinary media assets** in TinaCMS.

Latest version **4.3.4** (published 2023-02-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install next-tinacms-owncloud
pnpm add next-tinacms-owncloud
yarn add next-tinacms-owncloud
bun add next-tinacms-owncloud
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.3.4 |
| Published | 2023-02-26 |
| First published | 2023-02-06 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 22.7 KB |
| Known vulnerabilities | 0 (+12 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | erikd256 |

## Links

- npm: https://www.npmjs.com/package/next-tinacms-owncloud
- Repository: https://github.com/erikd256/tinacms-owncloud-mediastore
- Homepage: https://github.com/erikd256/tinacms-owncloud-mediastore#readme
- Issues: https://github.com/erikd256/tinacms-owncloud-mediastore/issues
- npm.io page: https://npm.io/package/next-tinacms-owncloud

## Dependencies (11)

- [qs](https://npm.io/package/qs.md) ^6.11.0
- [utf8](https://npm.io/package/utf8.md) ^3.0.0
- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [axios](https://npm.io/package/axios.md) ^1.3.2
- [multer](https://npm.io/package/multer.md) ^1.4.5-lts.1
- [webdav](https://npm.io/package/webdav.md) ^4.11.2
- [xml-js](https://npm.io/package/xml-js.md) ^1.6.11
- [promise](https://npm.io/package/promise.md) ^8.3.0
- [cross-fetch](https://npm.io/package/cross-fetch.md) ^3.1.5
- [owncloud-sdk](https://npm.io/package/owncloud-sdk.md) ^3.1.0-alpha.1
- [nextcloud-node-client](https://npm.io/package/nextcloud-node-client.md) ^1.8.1

## Recent versions

- 4.3.4 (latest) — 2023-02-26
- 4.3.3 — 2023-02-26
- 4.3.2 — 2023-02-09
- 4.3.1 — 2023-02-09
- 4.3.0 — 2023-02-09
- 4.2.9 — 2023-02-09
- 4.2.8 — 2023-02-09
- 4.2.5 — 2023-02-07
- 4.2.4 — 2023-02-07
- 4.2.3 — 2023-02-07
- 4.2.1 — 2023-02-07
- 4.2.0 — 2023-02-07
- 4.1.9 — 2023-02-07
- 4.1.8 — 2023-02-07
- 4.1.7 — 2023-02-07
- … 6 more at https://npm.io/package/next-tinacms-owncloud/versions

## README

# _next-tinacms-cloudinary_

Manage **Cloudinary media assets** in TinaCMS.

## Installation

### With Yarn
```bash
yarn add next-tinacms-cloudinary
```

### With NPM
```bash
npm install next-tinacms-cloudinary
```

## Connect with Cloudinary

You need some credentials provided by Cloudinary to set this up properly. If you do not already have an account, you can (register here)[https://cloudinary.com/users/register/free].

**next-tinacms-cloudinary** uses environment variables within the context of a Next.js site to properly access your Cloudinary account.

Add the following variables to an `.env` file.

```
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<Your Cloudinary Cloud Name>
NEXT_PUBLIC_CLOUDINARY_API_KEY=<Your Cloudinary API key>
CLOUDINARY_API_SECRET=<Your Cloudinary API secret>
```

## Register the Media Store

Now, you can register the Cloudinary Media store with the instance of Tina in your app by passing the `TinaCloudCloudinaryMediaStore` to the `TinaCMS` instance via its `mediaStore` prop.

This is also where we can update our `mediaOptions` on the cms object.

```tsx
// Typically in the _app.js file of a Next.js project

import dynamic from "next/dynamic";
import { TinaEditProvider } from "tinacms/dist/edit-state";
import { Layout } from "../components/layout";
import { TinaCloudCloudinaryMediaStore } from "next-tinacms-cloudinary";
const TinaCMS = dynamic(() => import("tinacms"), { ssr: false });

const App = ({ Component, pageProps }) => {
  return (
    <>
      <TinaEditProvider
        editMode={
          <TinaCMS
            branch="main"
            clientId={NEXT_PUBLIC_TINA_CLIENT_ID}
            isLocalClient={Boolean(Number(NEXT_PUBLIC_USE_LOCAL_CLIENT))}
            mediaStore={async () => {
              const pack = await import("next-tinacms-cloudinary");
              return pack.TinaCloudCloudinaryMediaStore;
            }}
            {...pageProps}
          >
            {(livePageProps) => (
              <Layout
                rawData={livePageProps}
                data={livePageProps.data?.getGlobalDocument?.data}
              >
                <Component {...livePageProps} />
              </Layout>
            )}
          </TinaCMS>
        }
      >
        <Layout
          rawData={pageProps}
          data={pageProps.data?.getGlobalDocument?.data}
        >
          <Component {...pageProps} />
        </Layout>
      </TinaEditProvider>
    </>
  );
};

...
```

## Set up API routes

Set up a new API route in the `pages` directory of your Next.js app, e.g. `pages/api/cloudinary`.
Then add a new catch all API route for media.

Call `createMediaHandler` to set up routes and connect your instance of the Media Store to your Cloudinary account.

Import `isAuthorized` from [`@tinacms/auth`](https://github.com/tinacms/tinacms/tree/main/packages/%40tinacms/auth).

The `authorized` key will make it so only authorized users within Tina Cloud can upload and make media edits.


```
//[...media].tsx

import {
  mediaHandlerConfig,
  createMediaHandler,
} from "next-tinacms-cloudinary/dist/handlers";
import { isAuthorized } from "@tinacms/auth";

export const config = mediaHandlerConfig;

export default createMediaHandler({
  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
  authorized: async (req, _res) => {
    if (process.env.NEXT_PUBLIC_USE_LOCAL_CLIENT === "1") {
      return true;
    }
    try {
      const user = await isAuthorized(req);
      return user && user.verified;
    } catch (e) {
      console.error(e);
      return false;
    }
  },
});

```

## Update Schema

Now that the media store is registered and the API route for media set up, let's add an image to your schema.

In your `.tina/schema.ts` add a new field for the image, e.g:

```
 {
  name: 'hero',
  type: 'image',
  label: 'Hero Image',
 }
 ```

 Now, when editing your site, the image field will allow you to connect to your Cloudinary account via the Media Store to manage your media assets.

---
_Source: https://npm.io/package/next-tinacms-owncloud · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._