Uploading Images and Videos

You can use the upload widget, or as a shortcut the upload button, to enable the users to upload images and/or videos.

Click the button below to try uploading something:

Upload

<script lang="ts">
  import {
    type CloudinaryUploadWidgetInfo,
    CldUploadButton,
    CldVideoPlayer,
    CldImage,
  } from 'svelte-cloudinary';

  let info = $state<CloudinaryUploadWidgetInfo | null>(null);
</script>

{#if info?.resource_type === 'video'}
  <CldVideoPlayer
    width={info.width}
    height={info.height}
    src={info.public_id} />
{:else if info}
  <CldImage
    width={info.width}
    height={info.height}
    src={info.public_id}
    alt="Uploaded Asset" />
{:else}
  <p>Click the button below to try uploading something:</p>
{/if}

<CldUploadButton
  onUpload={(result, widget) => {
    if (typeof result.info === 'object') {
      info = result.info;
      widget.close();
    }
  }} />