A task that mobile developers don\u2019t 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.<\/p>\n\n\n\n
You can use the base integrated\u00a0 However, this article aims to demonstrate the simplicity of uploading a file through Cloudinary\u2019s React Native SDK. With just a handful of lines, you can place your image, video, or file in Cloudinary\u2019s cloud storage. Let\u2019s dive right in and get started.<\/p>\n\n\n\n Your initial step is to create a Cloudinary account<\/a>. Once you\u2019re done with the simple signup, find your Cloud Name<\/strong> in Account Details<\/strong>.<\/p>\n\n\n\n Let\u2019s get to the coding. Import the Cloudinary SDK, which can easily be done by running the following line:<\/p>\n\n\n Or<\/p>\n\n\n These lines will import the SDK, and now we can use it to continue our upload process.<\/p>\n\n\n\n The next thing we need to do is initialize the Cloudinary object by inputting the following line:<\/p>\n\n\n Here, we’ll create a new instance of the Cloudinary object and initiate it using our cloud name.<\/p>\n\n\n\n For the most basic upload, we’ll need to call the\u00a0 We\u2019ll make an\u00a0 The full request would like this:<\/p>\n\n\n As you can see in the code above, I put my\u00a0upload preset\u00a0wrapped in the\u00a0 Let me give more details about the\u00a0upload preset.<\/em><\/p>\n\n\n\n The upload preset\u00a0is a parameter we need to set through Cloudinary\u2019s UI. You can do this by going to the Cloudinary\u00a0website<\/a>, signing in, and clicking the Settings <\/strong>icon at the top right.<\/p>\n\n\n\n Click the Upload<\/strong> 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.<\/p>\n\n\n\n Once we finish creating the\u00a0upload preset, we can use its name in our\u00a0 It\u2019s that simple to upload a file to your Cloudinary\u2019s cloud. When the upload process is done, you\u2019ll get back a response object that contains the result from your upload. After that we can try the various transformations that Cloudinary offers.<\/p>\n\n\n\n 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\u2019s\u00a0documentation<\/a>.<\/p>\n\n\n\n We can control our response using the\u00a0 Signed uploads require a signature that can be created using your Cloudinary API secret. However,\u00a0since we\u2019re 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.<\/p>\n\n\n\n Once you have the signature, you can give it to the upload by sending it through the\u00a0 If you’d like to rename an asset, you can always do that from Cloudinary\u2019s React Native SDK.<\/p>\n\n\n\n The API call is simple:<\/p>\n\n\n As with\u00a0 Using Cloudinary\u2019s SDK, uploading files to your cloud becomes incredibly simple. You have several upload options available:<\/p>\n\n\n\n If you\u2019re interested in delving deeper into Cloudinary\u2019s upload choices, you can find additional information\u00a0here<\/a>.<\/p>\n\n\n\n If you found this article helpful and want to discuss it in more detail, head over to\u00a0Cloudinary Community<\/a>\u00a0forum and its associated\u00a0Discord<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" A task that mobile developers don\u2019t 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\u00a0fetch\u00a0or […]<\/p>\n","protected":false},"author":87,"featured_media":31092,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[246,263],"class_list":["post-31854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-react","tag-sdk"],"acf":[],"yoast_head":"\nfetch<\/code>\u00a0or a third-party package like\u00a0axios<\/code>,\u00a0which are widely used.<\/p>\n\n\n\nSetup<\/h2>\n\n\n\n
npm install cloudinary-react-native<\/code><\/span><\/pre>\n\n\nyarn add cloudinary-react-native --save<\/code><\/span><\/pre>\n\n\nconst<\/span> cloudinary = new<\/span> Cloudinary({\n cloud<\/span>: {\n cloudName<\/span>: '<your_cloud_name>'<\/span>\n },\n url<\/span>: {\n secure<\/span>: true<\/span>\n }\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nUnsigned Upload<\/h2>\n\n\n\n
upload()<\/code>\u00a0function. First, this function gets our\u00a0cloudinary<\/code>\u00a0object, 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).<\/p>\n\n\n\nunsigned<\/code>\u00a0upload, which means we’ll need to send an upload preset. (I’ll delve into an explanation of upload presets in a bit.)<\/p>\n\n\n\nconst<\/span> options: UploadApiOptions = {\n upload_preset<\/span>: '<your_upload_preset>'<\/span>,\n unsigned<\/span>: true<\/span>,\n}\n\nawait<\/span> upload(cloudinary, {file<\/span>: filePath, options<\/span>: options, callback<\/span>: (error: any, response: any<\/span>) =><\/span> {\n \/\/.. handle response<\/span>\n}});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nUploadApiOptions<\/code>\u00a0object, which has many options for the upload that you can read about\u00a0here<\/a>.<\/p>\n\n\n\nUploadApiOptions<\/code>\u00a0object.<\/p>\n\n\n\ncallback<\/code>\u00a0parameter that we’ll send to the\u00a0upload<\/code>\u00a0function, which allows us to get back both\u00a0error<\/code>\u00a0and the actual\u00a0response<\/code>\u00a0which allows us to decide what to do when the upload is complete.<\/p>\n\n\n\nSigned Upload<\/h2>\n\n\n\n
UploadApiOptions<\/code>:<\/p>\n\n\n const<\/span> options: UploadApiOptions = {\n signature<\/span>: '<your_signature>'<\/span>,\n }\n\n await<\/span> upload(cloudinary, {file<\/span>: filePath, options<\/span>: options, callback<\/span>: (error: any, response: any<\/span>) =><\/span> {\n \/\/.. handle response<\/span>\n }});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nRename<\/h2>\n\n\n\n
await<\/span> rename(cloudinary, {from_public_id<\/span>: \"<old_public_id>\"<\/span>, to_public_id<\/span>: \"<new_public_id>\"<\/span>, callback<\/span>: (error: any, response: any<\/span>) =><\/span> {\n \/\/.. handle response<\/span>\n}})<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nupload<\/code>\u00a0before we need to first send it to the function our\u00a0cloudinary<\/code>\u00a0object.
After that, we have two mandatory parameters, which are\u00a0from_public_id<\/code>\u00a0(the old name of the asset) and\u00a0to_public_id<\/code>\u00a0(the new name we want to give that asset).<\/p>\n\n\n\nSummary<\/h2>\n\n\n\n
\n