<CldUploadWidget />

The CldUploadWidget creates a new instance of the Cloudinary upload widget giving you an easy way to add upload capabilities to your Svelte app.

The widget will not render any UI by default, instead needing to have the open function called. The simplest way to do this is to nest a button inside a slot and use the open slot prop. There are two options when using the CldUploadWidget: signed and unsigned. These options allow you to control the amount of security and restrictions you place on uploads.

Unsigned

Providing that unsigned uploads are allowed for your uploadPreset you can simply do:

<script>
  import { CldUploadWidget } from 'svelte-cloudinary';
</script>

<CldUploadWidget uploadPreset="<your upload preset>" let:open let:isLoading>
  <button on:click={() => open()} disabled={isLoading}>
    Open the widget
  </button>
</CldUploadWidget>

Signed

Signing upload requests require a signature endpoint which uses your Cloudinary secret key to sign the upload request. The following example uses SvelteKit but you can use any server framework to write this:

You’ll need to make sure you’ve configured a Cloudinary API key both on client and server. Read more about configuring Svelte Cloudinary here.

<script>
  import { CldUploadWidget } from 'svelte-cloudinary';
  import {
    PUBLIC_CLOUDINARY_CLOUD_NAME,
    PUBLIC_CLOUDINARY_API_KEY,
  } from '$env/static/public';
</script>

<CldUploadWidget
  uploadPreset="<your upload preset>"
  signatureEndpoint="/api/sign-cloudinary-params"
  config={{
    cloud: {
      cloudName: PUBLIC_CLOUDINARY_CLOUD_NAME,
      apiKey: PUBLIC_CLOUDINARY_API_KEY,
    },
  }}
  let:open
  let:isLoading
>
  <button on:click={() => open()} disabled={isLoading}>
    Open the widget
  </button>
</CldUploadWidget>

src/routes/api/sign-cloudinary-params/+server.ts

import { CLOUDINARY_API_SECRET } from '$env/static/private';
import { v2 as cloudinary } from 'cloudinary';
import { error, json } from '@sveltejs/kit';

export const POST = async ({ request }) => {
  const body = await request.json();
  const { paramsToSign } = body;

  try {
    const signature = cloudinary.utils.api_sign_request(
      paramsToSign,
      CLOUDINARY_API_SECRET,
    );

    return json({ signature });
  } catch (e) {
    return error(500, `${error}`);
  }
};