> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

> **NOTE**: If you want to use server-side operations, you can upload files to Cloudinary using the [Dart implementation](dart_image_and_video_upload) within your Flutter app.

## Upload options

### Upload endpoint

The [upload endpoint](image_upload_api_reference#upload) 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](upload_presets) with the [upload method options](image_upload_api_reference#upload) you want to apply for all files
* The file(s) to upload
* Other [unsigned upload parameters](image_upload_api_reference#unsigned_upload_parameters) to apply to the selected files (e.g. `tags`, if needed).

For example:

pubspec.yaml

```dart
dependencies:
  cloudinary_api: ^<latest_version>
  cloudinary_url_gen: ^<latest_version>
```

main.dart

```dart
import 'package:cloudinary_api/uploader/cloudinary_uploader.dart';
import 'package:cloudinary_url_gen/cloudinary.dart';
import 'package:cloudinary_api/src/request/model/uploader_params.dart';

void upload() async {
  File file = <your_file>;
    Cloudinary cloudinary = Cloudinary.fromCloudName(cloudName: "<your_cloud_name>");
    final response = await cloudinary.uploader().upload(
      file,
      params: UploadParams(uploadPreset: "<your_upload_preset>", type: "raw"),
    );
    print("Upload success: $response");
}
```

### Upload endpoint video tutorial

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

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

#### Tutorial contents This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | After [installing and configuring the Cloudinary Flutter SDK](flutter_configuration_tutorial), you can upload images from your Flutter application to Cloudinary. This process involves using the `upload` method of the [Upload API](image_upload_api_reference#upload), along with an upload preset that specifies the upload behavior. The images you upload will be displayed in the Media Library.
|

### Construct the POST request URL
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=19 :player=cld} | We're going to add functionality to an already existing app that allows you to select an image and display it on the screen. The functionality we're going to add in this tutorial is uploading the image to Cloudinary. (Later, we'll also deliver the image in the Flutter app from Cloudinary.) The initial step to uploading the image to Cloudinary involves constructing the URL for the POST request. Simply use the provided URL and replace `<cloudname>` with your product environment's cloud name, which we'll cover in an [upcoming step](#replace_cloud_name).
|

```flutter
final url = Uri.parse('https://api.cloudinary.com/v1_1/<cloudname>/upload');
```

### Use the Postman collection
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=46 :player=cld} | Check out our Postman collection for a working example of an unsigned upload via a POST request using the Upload API's [upload method](https://www.postman.com/cloudinaryteam/workspace/programmable-media/folder/16080251-01c1a754-63db-4c3f-9fc7-53cab03d906b?ctx=documentation). Keep in mind that you'll need an unsigned upload preset for this, which we'll create in an [upcoming step](#create_preset).
|

### Replace the cloud name in the POST request URL with your own
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=57 :player=cld} | To find your **Cloud name**, navigate to the Product Environment Credentials section in your [Dashboard](https://console.cloudinary.com/app/home/dashboard). Replace `ddjmx10sp` in the example Post request URL with your specific cloud name.
|

```flutter
final url = Uri.parse('https://api.cloudinary.com/v1_1/ddjmx10sp/upload');
```

### Create an unsigned preset
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=09 :player=cld} | Go to the Upload page of the Console Settings and scroll to the Upload presets section. Create a new upload preset by clicking **Add upload preset** at the bottom of the upload preset list. From the **Signing Mode** drop-down, select **Unsigned**. You can also optionally enter a folder where the images uploaded with this upload preset will be stored. After saving this upload preset, it will appear in the list of presets. Remember to note down the name of the upload preset you've just created, as you'll use it in your Flutter application as part of your request.
|

### Construct the image upload request
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=48 :player=cld} | Create the request for the upload method of the Upload API within your Flutter application. Make sure to replace `<preset_name>` with the name of the unsigned preset you created.
|

```flutter
final request = http.MultipartRequest('POST', url)
    ...fields['upload_preset'] = '<preset_name>'
    ...files.add(await http.MultipartFile.fromPath('file', _imageFile!.path));
```

### Retrieve and display the Cloudinary image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=03 :player=cld} | Use the provided code to obtain the delivery URL from the upload response and display the Cloudinary image within your Flutter app.
|

```flutter
final response = await request.send();
if (response.statusCode == 200) {
    final responseData = await response.stream.toBytes();
    final responseString = String.fromCharCodes(responseData);
    final jasonMap = jsonDecode(responseString);
    setState(() {
        final url = jsonMap['url'];
        _imageUrl = url;
    });
}
```

### Additional upload methods 
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=44 :player=cld} | In addition to the method demonstrated, there are alternative ways to upload images from your Flutter app to Cloudinary. One such method is the user-friendly [Upload widget](flutter_image_and_video_upload#upload_widget) which provides an intuitive interface for users to upload images. If you prefer a back-end approach, you can opt for a [server-side](dart_image_and_video_upload#server_side_upload) upload, which necessitates your `api_key` and `api_secret`. Always exercise caution and avoid exposing your credentials in a client-facing front-end application.
|

### Upload widget

The [Upload widget](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](https://stackblitz.com/edit/github-vt6fzc-wms1nc) that you can fork to try out some sample configuration changes:

> **NOTE**: Due to CORS issues with StackBlitz, you may have errors opening the widget with the preview. Try opening the preview in a new tab to resolve this or use the GitHub link below to run locally.

This code is also available in [GitHub](https://github.com/cloudinary-devs/cloudinary-upload-widget-js).

## Code examples

* **Code sample:** Implement the [upload widget](upload_widget#quick_example).
* **CodeSandbox:** [Upload multiple files using a form](client_side_uploading#code_explorer_upload_multiple_files_using_a_form_unsigned) in pure JavaScript using the Cloudinary upload endpoint.