Flutter image and video upload

When using the Flutter SDK, you can use one of several options to upload files directly to Cloudinary without the need for server-side operations or authentication signatures.

On this page:

• Upload options
  • Upload endpoint
  • Tutorial contents
  • Upload widget
• Code examples

Rate this page:

Upload options

Upload endpoint

The upload endpoint is https://api.cloudinary.com/v1_1/<CLOUD_NAME>/upload. To use the endpoint in your application, write a function that calls the Cloudinary upload endpoint and pass:

• An unsigned upload preset with the upload method options you want to apply for all files
• The file(s) to upload
• Other unsigned upload parameters to apply to the selected files (e.g. tags, if needed).

For example:

// Add this dependency to your pubspec.yaml file:
// dependencies:
//   http: ^0.13.5

import 'package:http/http.dart' as http;
import 'dart:convert';

void main() async{
  CloudinaryContext.cloudinary = Cloudinary.fromCloudName(cloudName: '<cloud_name>');
  var data=await upload();
}

upload() async{
  var resp = await http.post(Uri.parse('https://api.cloudinary.com/v1_1/<cloud_name>/upload?file=https://cloudinary-devs.github.io/cld-docs-assets/assets/images/<file_name>&upload_preset=<upload_preset>&api_key=<api_key>&public_id=<public_id>'));
  var data = json.decode(resp.body);
  return data;
}

Upload endpoint video tutorial

Watch this video tutorial to see how to upload images from your Flutter app to Cloudinary using the Upload API:

Tutorial contents

Upload widget

The Upload widget is a ready-made, responsive user interface that enables your users to upload files from a variety of sources directly to Cloudinary. You can customize and embed this UI in a WebView Flutter widget with just a few lines of code.

Check out the following Upload Widget code explorer that you can fork to try out some sample configuration changes:

This code is also available in GitHub.

Code examples

• Code sample: Implement the upload widget.
• CodeSandbox: Upload multiple files using a form in pure JavaScript using the Cloudinary upload endpoint.