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

# React Native image and video upload


Cloudinary provides support for uploading media directly from your mobile application to your Cloudinary product environment, without going through your servers first. This method allows for faster uploading and a better user experience. It also reduces load on your servers and reduces the complexity of your applications.

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

For details on all available upload functionality, see the [Upload](upload_images) guide, and the [upload](image_upload_api_reference#upload) method of the Upload API Reference.

For security reasons, mobile applications shouldn't contain your Cloudinary product environment credentials. You can use a [signed upload](#signed_upload), but that requires generating an authentication signature on your backend. In most cases, you will probably use [unsigned uploads](#unsigned_upload) that generally provide all the functionality you need for your mobile application, while restricting upload options that require more security.

## Upload method

The upload request is managed by the `upload` method, which accepts the file to upload, upload options and a callback.

```react
const cld = new Cloudinary({
    cloud: {
        cloudName: '<your_cloud_name>'
    },
    url: {
        secure: true
    }
});

await upload(cld, {file: '<path_to_file>' , options: <optional_parameters>, callback: (error: any, response: any) => {
        //.. handle response
}})
```

For example, to upload an image called `imageFile.jpg` using the default settings:

```react
const cld = new Cloudinary({
    cloud: { 
        cloudName: 'demo' 
    },
    url: { 
        secure: true
    }
});

const options = {
    upload_preset: 'sample_preset',
    unsigned: true,
}

await upload(cld, {file: 'imageFile.jpg' , options: options, callback: (error: any, response: any) => {
    //.. handle response
}})
```

The result of the upload API call is an object that provides information about the uploaded image, including the assigned public ID of the image and its URL.

## Unsigned upload

Unsigned upload is an option for performing upload without the need to generate a signature on your backend. Unsigned upload options are controlled by an [upload preset](upload_presets): to use this feature, you first need to enable **unsigned uploading** for your Cloudinary product environment from the [Upload Presets](https://console.cloudinary.com/app/settings/upload/presets) page of the Console Settings.

An upload preset is used to define which upload options will be applied to media assets that are uploaded unsigned with that preset specified. You can edit the preset at any point in time (or create additional upload presets). 

## Upload options

You can pass any extra upload parameters you'd want to pass, as part of the upload request. For example, to implement an unsigned upload of an image called `imageFile.jpg` using an upload preset called `sample_preset`, and add a tag with the value of `sample`:

```react
const cld = new Cloudinary({
    cloud: {
        cloudName: 'demo'
    },
    url: {
        secure: true
    }
});

const options = {
    upload_preset: 'sample_preset',
    tag: 'sample',
    unsigned: true
}

await upload(cld, {file: 'imageFile.jpg' , options: options, callback: (error: any, response: any) => {
    //.. handle response
}})
```
> **NOTE**:
>
> For security reasons, only [this restricted set](image_upload_api_reference#unsigned_upload_parameters) of parameters can be used in an **unsigned** upload request. All other parameters you want to apply must be defined in the upload preset. For more information, see [Unsigned upload parameters](image_upload_api_reference#unsigned_upload_parameters).
> If a supported parameter is included both in the unsigned upload call and in the unsigned upload preset, the upload preset value usually takes precedence, but there are some exceptions. For details, see [Upload preset precedence](upload_presets#upload_preset_precedence).
## Signed upload

> **INFO**: Signed uploads require a [signature](signatures) which needs to be created using your `api_secret`. You should never expose your secret in client side code and therefore you need to generate an authentication signature on your backend. React Native signed upload with backend support should be implemented in conjunction with one of Cloudinary's backend frameworks (Java, .NET, etc). The various backend frameworks implement helpers to be used in conjunction with React Native, as well as automatically generate the authentication signature for the upload.

To implement signed uploads using React Native to your Cloudinary product environment you must:

1. Provide a [signature generated on your backend](authentication_signatures).
2. Include the `apiKey` [configuration parameter](cloudinary_sdks#configuration_parameters) in your front end [React Native configuration](react_native_integration#setup).  
3. Add the signature and timestamp to the [upload options](#upload_options). 
4. Call the `upload` method to upload the file.

For example, to upload an image called `imageFile.jpg`, set the publicId to `newId`, and sign the upload request:

```react
const cld = new Cloudinary({
    cloud: {
        cloudName: 'demo'
    },
    url: {
        secure: true
    }
});

var mySig = MyFunction(params)  // your own function that returns a signature generated on your backend

const options = {
    upload_preset: 'sample_preset',
    public_id: 'newId',
    signature: "mySig"
}

await upload(cld, {file: 'imageFile.jpg' , options: options, callback: (error: any, response: any) => {
    //.. handle response
}})
```