Programmable Media

Dart image and video upload

Last updated: Jul-19-2024

Cloudinary provides an API for uploading images, videos, and any other kind of file to the cloud. Files uploaded to Cloudinary are stored safely in the cloud with secure backups and revision history. Cloudinary's APIs allow secure uploading from your servers, directly from your visitors' browsers or mobile applications, or fetched via remote public URLs.

Cloudinary's Dart SDK wraps Cloudinary's upload API and simplifies the integration. Dart methods are available for easily performing Dart image and video uploads to the cloud.

This page covers common usage patterns for Dart image and video upload with Cloudinary.

For details on all available upload functionality, see the Upload guide, and the upload method of the Upload API Reference.

Cloudinary's Upload widget provides an alternative to using a Cloudinary SDK to add upload functionality to your application, eliminating the need to develop in-house interactive upload capabilities. The upload widget is an interactive, feature rich, simple-to-integrate user interface that enables you to add Cloudinary upload support to your website. The widget can be easily embedded in your web application with just a few lines of JavaScript code. See the Upload widget documentation for detailed information.

Upload widget main screen

Server-side upload

You can upload images, videos, or any other raw file to Cloudinary from your Dart code. Uploading is done over HTTPS using a secure protocol based on your product environment's api_key and api_secret parameters.

Dart image upload

The following method uploads an image to the cloud:

For example, uploading a local image file named 'my_image.jpg':

The file to upload can be specified as a local path, a remote HTTP or HTTPS URL, a whitelisted storage bucket (S3 or Google Storage) URL, a data stream, a base64 data URI, or an FTP URL. For details and code examples of uploading using each of these data source types, see Required upload parameters.

For details on all available upload functionality, see the Upload guide, and the upload method of the Upload API Reference.

Dart video upload

You upload videos in the same way as images. However, with videos, you must specify the resource_type as 'video' within the upload method. The SDK also supports automatically uploading large files to Cloudinary in chunks if the file to upload is larger than a defined chunkSize parameter, by default 20000000 Bytes (= 20 MB).

The following example uploads dog.mp4 to Cloudinary in chunks of 20 MB, and stores it with the public ID dog_closeup. It also performs two eager transformations that resize the video to a square and a small rectangle.

You can change the default size of the chunks for uploading videos. The following example changes the chunk size to 6 MB:

Upload response

By default, uploading is performed synchronously. Once finished, the uploaded image or video is immediately available for transformation and delivery. An upload call returns a response with content similar to the following:

The response includes HTTP and HTTPS URLs for accessing the uploaded media asset as well as additional information regarding the uploaded asset: public ID, resource type, width and height, file format, file size in bytes, a signature for verifying the response and more.

File sources

Cloudinary's Dart library supports uploading files from various sources.

  • You can upload an asset by specifying a local path of an asset. For example:

  • If your assets are already publicly available online, you can specify their remote HTTP URLs instead of uploading the actual data. In this case, Cloudinary will fetch the asset from its remote URL for you. This option allows for a much faster migration of your existing assets. Here's an example:

  • If you have existing assets in an Amazon S3 bucket, you can point Cloudinary to their S3 URLs. Note - this option requires a quick manual setup. Contact us and we'll guide you on how to allow Cloudinary access to your relevant S3 buckets.

For more information on file sources for upload, see File sources.

Direct uploading from the browser

The upload samples shown above allow your server-side Dart code to upload media assets to Cloudinary. In this flow, if you have a web form that allows your users to upload images or videos, the media file's data is first sent to your server and then uploaded to Cloudinary.

A more efficient and powerful option is to allow your users to upload images and videos in your client-side code directly from the browser to Cloudinary instead of going through your servers. This method allows for faster uploading and a better user experience. It also reduces load from your servers and reduces the complexity of your Dart applications.

You can upload files directly from the browser using signed or unsigned calls to the upload endpoint, as shown in the Upload multiple files using a form examples.

For signed uploads from your client-side code, a secure signature must be generated in your server-side Dart code. You can use the api_sign_request method to generate SHA signatures:

For the full list of parameters available for signed uploads, see the upload method in the Upload API Reference.

For security reasons, only this limited set of parameters can be used in an unsigned upload request.

Related topics
  • For more information on uploading media assets, see the Upload guide.
  • For details on all available upload parameters, see the upload method of the Upload API Reference.
  • Additional selected upload methods are supported by the Dart SDK, such as explicit and rename.

✔️ Feedback sent!

Rate this page: