Programmable Media

Upload assets in Svelte (video tutorial)

Last updated: Oct-30-2024

Overview

Learn how to upload assets in Svelte using the Cloudinary Svelte community library.

Video tutorial


View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

Jump to this spot in the video  0:00 In this tutorial, you'll learn how to upload assets to Cloudinary using the Svelte community library, a crucial part of your workflow.

Upload files with Svelte and Cloudinary

Jump to this spot in the video  0:14 Cloudinary offers several upload methods, including server-side uploads through the Node.js SDK and client-side uploads. However, this tutorial focuses on using Cloudinary with Svelte. This integration not only simplifies the upload process but also provides features like image optimization, transformations, and an easy-to-use CldUploadWidget component for drag-and-drop uploads.

Set up the Cloudinary Upload widget

Jump to this spot in the video  0:42 To implement the Cloudinary Upload widget in Svelte, import the CldUploadWidget component and add it to your template. At a minimum, you need to pass an upload preset and a slot prop named open.
This widget does not render any elements by default but uses a slot so that you can add any button or component that will trigger the upload.
To do this, create a button in the slot, which will activate the open function when clicked, allowing users to open the upload widget and select an image.

Handling upload results with callbacks

Jump to this spot in the video  1:32 Once an image is uploaded, you may want to handle the response data in the application. To do this, use the onUpload callback function, which is triggered when the upload completes. Define two state variables, info and error, to manage the upload response.
In the onUpload callback, update info if the upload is successful, or set error if an error occurs. Then, close the widget using the widget’s reference and render the uploaded image using its secure URL. Display the secure URL as text, and include alt text for accessibility.

Signed uploads

Jump to this spot in the video  2:58 In addition to unsigned uploads, Cloudinary also supports signed uploads for more secure asset handling. To enable this, add the signatureEndpoint prop to the component. This prop specifies the URL of an API endpoint that handles the signature process before the asset is uploaded.
For this demonstration, the endpoint is set to /api/sign-cloudinary-params. Though the code for this endpoint is outside the scope of this video, you can find it in the linked GitHub repository.

Keep learning

Related topics

If you like this, you might also like...

Create Social Media Cards in Svelte
Dynamically create social media image cards using Svelte
Transform and Optimize Images in Svelte
Transform and optimize images delivered in a Svelte app
Delete Assets with Node.js
Delete assets using various methods from the Node.js SDK

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: