React Native – Uploading Assets

A task that mobile developers don’t enjoy dealing with is uploading a file. It involves setting up a network connection, ensuring the API works correctly, breaking things into smaller parts, creating the request, understanding the response, and testing by using practice runs or checking how different parts work together.

You can use the base integrated fetch or a third-party package like axios, which are widely used.

However, this article aims to demonstrate the simplicity of uploading a file through Cloudinary’s React Native SDK. With just a handful of lines, you can place your image, video, or file in Cloudinary’s cloud storage. Let’s dive right in and get started.

Your initial step is to create a Cloudinary account. Once you’re done with the simple signup, find your Cloud Name in Account Details.

Let’s get to the coding. Import the Cloudinary SDK, which can easily be done by running the following line:

npm install cloudinary-react-native

Or

yarn add cloudinary-react-native --save

These lines will import the SDK, and now we can use it to continue our upload process.

The next thing we need to do is initialize the Cloudinary object by inputting the following line:

const cloudinary = new Cloudinary({
  cloud: {
    cloudName: '<your_cloud_name>'
  },
  url: {
    secure: true
  }
});Code language: JavaScript (javascript)

Here, we’ll create a new instance of the Cloudinary object and initiate it using our cloud name.

For the most basic upload, we’ll need to call the upload() function. First, this function gets our cloudinary object, and then we can add the payload we want to upload. It can be the path to the file, the file in Base64, or a URL to a remote file).

We’ll make an unsigned upload, which means we’ll need to send an upload preset. (I’ll delve into an explanation of upload presets in a bit.)

The full request would like this:

const options: UploadApiOptions = {
      upload_preset: '<your_upload_preset>',
      unsigned: true,
}

await upload(cloudinary, {file: filePath, options: options, callback: (error: any, response: any) => {
  //.. handle response
}});Code language: JavaScript (javascript)

As you can see in the code above, I put my upload preset wrapped in the UploadApiOptions object, which has many options for the upload that you can read about here.

Let me give more details about the upload preset.

The upload preset is a parameter we need to set through Cloudinary’s UI. You can do this by going to the Cloudinary website, signing in, and clicking the Settings icon at the top right.

Click the Upload option, scroll down, and add a new upload preset, There are many options to customize an upload preset, but we won’t dive into them in this article.

Once we finish creating the upload preset, we can use its name in our UploadApiOptions object.

It’s that simple to upload a file to your Cloudinary’s cloud. When the upload process is done, you’ll get back a response object that contains the result from your upload. After that we can try the various transformations that Cloudinary offers.

Transformations are manipulations we can perform on an asset (image, video, etc.). If you want to learn more than the examples shown in this article, I suggest visiting Cloudinary’s documentation.

We can control our response using the callback parameter that we’ll send to the upload function, which allows us to get back both error and the actual response which allows us to decide what to do when the upload is complete.

Signed uploads require a signature that can be created using your Cloudinary API secret. However, since we’re working on a client-side, you should never expose your API secret (or any sensitive information) within your application. Instead, you should generate an authentication signature on your server.

Once you have the signature, you can give it to the upload by sending it through the UploadApiOptions:

 const options: UploadApiOptions = {
    signature: '<your_signature>',
 }

 await upload(cloudinary, {file: filePath, options: options, callback: (error: any, response: any) => {
    //.. handle response
 }});Code language: JavaScript (javascript)

If you’d like to rename an asset, you can always do that from Cloudinary’s React Native SDK.

The API call is simple:

await rename(cloudinary,  {from_public_id: "<old_public_id>", to_public_id: "<new_public_id>", callback: (error: any, response: any) => {
    //.. handle response
}})Code language: JavaScript (javascript)

As with upload before we need to first send it to the function our cloudinary object.
After that, we have two mandatory parameters, which are from_public_id (the old name of the asset) and to_public_id (the new name we want to give that asset).

Using Cloudinary’s SDK, uploading files to your cloud becomes incredibly simple. You have several upload options available:

1. Unsigned uploads (using upload preset).
2. Signed uploads.
3. Rename (you can rename uploaded assets)

If you’re interested in delving deeper into Cloudinary’s upload choices, you can find additional information here.

If you found this article helpful and want to discuss it in more detail, head over to Cloudinary Community forum and its associated Discord.