{"id":27886,"date":"2022-06-02T12:01:31","date_gmt":"2022-06-02T12:01:31","guid":{"rendered":"http:\/\/upload-multiple-images-to-cloudinary-with-filepond"},"modified":"2025-02-23T15:15:21","modified_gmt":"2025-02-23T23:15:21","slug":"upload-multiple-images-to-cloudinary-with-filepond","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/upload-multiple-images-to-cloudinary-with-filepond\/","title":{"rendered":"Upload Multiple Images to Cloudinary with FilePond"},"content":{"rendered":"

When building sites, the file upload functionality tends to be more complex than anticipated. It\u2019s no longer enough to have an input form that sends documents to some server. These days one has to consider asynchronous file uploads, progress bars, etc. Additionally, it must be abstracted and covered with a visually appealing form that users will find intuitive. This is where FilePond<\/a> has found its relevance.<\/p>\n

Filepond provides a visually appealing file upload interface that allows you to drag and drop files. It also automatically handles the upload process and progress updates. Additionally, it provides a feature to revert<\/strong> uploads \u2014 all of which we will be exploring in this article.<\/p>\n

We will build a React<\/a> application that uses Filepond to upload multiple images to a Cloudinary<\/a> store and also (should the user decide to) delete the images.<\/p>\n

Here is a link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Setting up the Project<\/h2>\n

Create a new React application by running the following command:<\/p>\n

npx create-react-app cloudinary_filepond\n<\/code><\/span><\/pre>\n
Next, add FilePond to the React application by running the following command:<\/p>\n
npm install react-filepond filepond\n<\/code><\/span><\/pre>\n
We\u2019ll also be using two FilePond plugins – the Image exif-orientation<\/a>  plugin, which is used by the Image preview<\/a> plugin to ensure that the preview of the uploaded image is displayed correctly. Add both plugins using the following command:<\/p>\n
npm install filepond-plugin-image-preview filepond-plugin-image-exif-orientation\n<\/code><\/span><\/pre>\n
For this tutorial, we will be sending images to Cloudinary via unsigned POST requests, but you need to first sign up for a free Cloudinary account<\/a> if you don\u2019t have one already. Displayed on your account\u2019s Management Console (aka Dashboard) are important details: your cloud name, API key, etc. We will need our account cloud name and an unsigned upload preset. To create one, log into the Management Console<\/a> and select Settings<\/strong> > Upload<\/strong> and then scroll to the Upload presets<\/strong>\nsection. Create a new upload preset by clicking Add upload preset<\/strong> at the bottom of the upload preset list. In the displayed form,  make sure the Signing Mode<\/strong> is set to Unsigned<\/strong> as shown below.<\/p>\n
\"\"<\/p>\n
Next, in the Upload Control<\/strong> section, ensure that the Return delete token<\/strong> option is turned on. This will allow us to delete uploaded images within 10 minutes of uploading to Cloudinary.<\/p>\n
\"\"<\/p>\n
Click Save<\/strong> to complete the upload preset definition, then copy the upload preset name as displayed on the Upload Settings page.<\/p>\n
Next, we need to create some environment variables in our React application to hold our Cloudinary details. Create a new file at the root of your project called .env<\/code> and add the following to it:<\/p>\n
REACT_APP_CLOUD_NAME = INSERT YOUR CLOUD NAME HERE\nREACT_APP_UPLOAD_PRESET = INSERT YOUR UNSIGNED UPLOAD PRESET KEY HERE\n<\/code><\/span><\/pre>\n
This will be used as a default when the project is set up on another system. To update your local environment, create a copy of the .env file using the following command:<\/p>\n
cp<\/span> .env<\/span> .env<\/span>.local<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
By default, this local file is added to .gitignore and mitigates the security risk of inadvertently exposing secret credentials to the public. You can update the file with your Cloudinary cloud name and generated upload preset.<\/p>\n
In the src<\/code> directory of the project, create a new folder named cloudinary<\/code>. This folder will hold all the Cloudinary-related helper classes we will need in our components. In the cloudinary<\/code> folder, create a new file called cloudinaryConfig.js<\/code>. This file will give access to the environment variables and prevent repeated process.env.<\/code> calls throughout the project. In cloudinaryConfig.js<\/code>, add the following:<\/p>\n
export<\/span> const<\/span> cloudName = process.env.REACT_APP_CLOUD_NAME;\nexport<\/span> const<\/span> uploadPreset = process.env.REACT_APP_UPLOAD_PRESET;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Create Helper Class for API Requests<\/h2>\n
Let\u2019s write a helper function that we will use to upload images to Cloudinary and another to delete images from Cloudinary. In the cloudinary<\/code> folder, create a new file named cloudinaryHelper.js<\/code> and add the following code to it:<\/p>\n
import<\/span> { cloudName, uploadPreset } from<\/span> \".\/cloudinaryConfig\"<\/span>;\n\nconst<\/span> baseUrl = `https:\/\/api.cloudinary.com\/v1_1\/${cloudName}<\/span>`<\/span>;\n\nexport<\/span> const<\/span> makeUploadRequest = ({\n  file,\n  fieldName,\n  progressCallback,\n  successCallback,\n  errorCallback,\n}) => {\n\n  const<\/span> url = `${baseUrl}<\/span>\/image\/upload`<\/span>;\n\n  const<\/span> formData = new<\/span> FormData();\n  formData.append(fieldName, file);\n  formData.append(\"upload_preset\"<\/span>, uploadPreset);\n\n  const<\/span> request = new<\/span> XMLHttpRequest();\n  request.open(\"POST\"<\/span>, url);\n\n  request.upload.onprogress = (e<\/span>) =><\/span> {\n    progressCallback(e.lengthComputable, e.loaded, e.total);\n  };\n\n  request.onload = ()<\/span> =><\/span> {\n    if<\/span> (request.status >= 200<\/span> && request.status < 300<\/span>) {\n      const<\/span> { delete_token<\/span>: deleteToken } = JSON<\/span>.parse(request.response);\n\n      successCallback(deleteToken);\n    } else<\/span> {\n      errorCallback(request.responseText);\n    }\n  };\n\n  request.send(formData);\n  \n  return<\/span> ()<\/span> =><\/span> {\n    request.abort();\n  };\n};\n\nexport<\/span> const<\/span> makeDeleteRequest = ({\n  token,\n  successCallback,\n  errorCallback,\n}) => {\n\n  const<\/span> url = `${baseUrl}<\/span>\/delete_by_token`<\/span>;\n\n  const<\/span> request = new<\/span> XMLHttpRequest();\n  request.open(\"POST\"<\/span>, url);\n\n  request.setRequestHeader(\"Content-Type\"<\/span>, \"application\/json\"<\/span>);\n\n  request.onload = ()<\/span> =><\/span> {\n    if<\/span> (request.status >= 200<\/span> && request.status < 300<\/span>) {\n      successCallback();\n    } else<\/span> {\n      errorCallback(request.responseText);\n    }\n  };\n  request.send(JSON<\/span>.stringify({ token }));\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The makeUploadRequest<\/code> function returns a function that can be called if the user chooses to cancel the upload before it is completed.<\/p>\n
In a similar vein, the makeDeleteRequest<\/code> takes a token, a successCallback<\/code> function, and an errorCallback<\/code> function which are executed upon receipt of successful and error responses, respectively.<\/p>\n
Next, update your src\/App.js<\/code> file to match the following:<\/p>\n
import<\/span> React, { useState } from<\/span> \"react\"<\/span>;\n\nimport<\/span> { FilePond, registerPlugin } from<\/span> \"react-filepond\"<\/span>;\nimport<\/span> FilePondPluginImageExifOrientation from<\/span> \"filepond-plugin-image-exif-orientation\"<\/span>;\nimport<\/span> FilePondPluginImagePreview from<\/span> \"filepond-plugin-image-preview\"<\/span>;\n\nimport<\/span> \"filepond-plugin-image-preview\/dist\/filepond-plugin-image-preview.css\"<\/span>;\nimport<\/span> \"filepond\/dist\/filepond.min.css\"<\/span>;\n\nimport<\/span> {\n  makeDeleteRequest,\n  makeUploadRequest,\n} from<\/span> \".\/cloudinary\/cloudinaryHelper\"<\/span>;\n\nregisterPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);\n\nfunction<\/span> App<\/span>(<\/span>) <\/span>{\n  const<\/span> [files, setFiles] = useState([]);\n\n  const<\/span> revert = (token, successCallback, errorCallback<\/span>) =><\/span> {\n    makeDeleteRequest({\n      token,\n      successCallback,\n      errorCallback,\n    });\n  };\n\n  const<\/span> process = (\n  fieldName,\n    file,\n    metadata,\n    load,\n    error,\n    progress,\n    abort,\n    transfer,\n    options\n  ) => {\n    const<\/span> abortRequest = makeUploadRequest({\n      file,\n      fieldName,\n      successCallback<\/span>: load,\n      errorCallback<\/span>: error,\n      progressCallback<\/span>: progress,\n    });\n\n    return<\/span> {\n      abort<\/span>: ()<\/span> =><\/span> {\n        abortRequest();\n        abort();\n      },\n    };\n  };\n\n  return<\/span> (\n    <div<\/span> style<\/span>={{<\/span> width:<\/span> \"80<\/span>%\", margin:<\/span> \"auto<\/span>\", padding:<\/span> \"1<\/span>%\" }}><\/span>\n      <FilePond<\/span>\n        files<\/span>={files}<\/span>\n        acceptedFileTypes<\/span>=\"image\/*\"<\/span>\n        onupdatefiles<\/span>={setFiles}<\/span>\n        allowMultiple<\/span>={true}<\/span>\n        server<\/span>={{<\/span> process<\/span>, revert<\/span> }}\n        name<\/span>=\"file\"<\/span>\n        labelIdle<\/span>='Drag & Drop your files or <span class=\"filepond--label-action\">Browse<\/span>'<\/span>\n      \/><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The App<\/code> component has one state variable \u2014 files<\/code>, which is used to keep track of the images selected by the user. Next, we declared two functions: process<\/code> and revert<\/code>, which handle the upload and delete operations. These functions are passed as props to the Filepond<\/code> component.<\/p>\n
In the  process<\/code> function, Filepond makes nine parameters available – however, we only need six for our use case. The fieldName<\/code> and file<\/code> parameters are appended to the FormData<\/code> request, sent to Cloudinary. The load<\/code> function is called upon successful execution of the request, and it takes a string – in our case, the delete token for the uploaded image, which is used to identify each file uniquely. When the revert<\/code> function is called, Filepond knows exactly which image to delete. The progress<\/code> function is used to update the progress bar, while the error<\/code> function takes a string that displays as an error message. Just as we did for the makeUploadRequest<\/code> function, the process<\/code> function returns a function that is used to abort the upload process.<\/p>\n
With this in place, our application is ready to test. Start the application using the following command:<\/p>\n
npm start\n<\/code><\/span><\/pre>\n
Disabling React Strict Mode<\/h2>\n
When you run your application, you may see an error message in the browser console similar to the one shown below:<\/p>\n
Uncaught TypeError<\/span>: Cannot read properties of<\/span> null<\/span> (reading 'insertBefore'<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Disable React strict mode in the src\/Index.js<\/code> to get rid of the error. To do this, open the src\/Index.js<\/code> and update it to match the following:<\/p>\n
import<\/span> React from<\/span> 'react'<\/span>;\nimport<\/span> ReactDOM from<\/span> 'react-dom\/client'<\/span>;\nimport<\/span> '.\/index.css'<\/span>;\nimport<\/span> App from<\/span> '.\/App'<\/span>;\nimport<\/span> reportWebVitals from<\/span> '.\/reportWebVitals'<\/span>;\n\nconst<\/span> root = ReactDOM.createRoot(document<\/span>.getElementById('root'<\/span>));\nroot.render(<App<\/span> \/><\/span><\/span>);\n\nreportWebVitals();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
Conclusion<\/h2>\n
In this article, we looked at how we can combine Filepond and Cloudinary to simplify the process of uploading multiple files while providing an intuitive interface with the ability to revert uploads – even after completion. We achieved a balance between complex functionality and code maintainability by leveraging them.<\/p>\n
Resources you may find helpful:<\/strong><\/p>\n
Find the complete project here<\/a> on GitHub.<\/p>\n
Requests are sent to Cloudinary using XMLHttpRequest<\/a> Objects. In the makeUploadRequest<\/code> function, we provide a function named progressCallback<\/code>, which is used to update the progress indicator of the Filepond UI. Additionally, a function is provided, which is executed when a successful response is received \u2014 successCallback<\/code>. This function takes the delete token provided by Cloudinary in the response. The errorCallback<\/code> function is executed if an error response is returned.<\/p>\n