Upload Multiple Files To Cloudinary With React & Axios

FileUpload.js

handleDrop = files => {
  // Push all the axios request promise into a single array
  const uploaders = files.map(file => {
    // Initial FormData
    const formData = new FormData();
    formData.append("file", file);
    formData.append("tags", `codeinfuse, medium, gist`);
    formData.append("upload_preset", "pvhilzh7"); // Replace the preset name with your own
    formData.append("api_key", "1234567"); // Replace API key with your own Cloudinary key
    formData.append("timestamp", (Date.now() / 1000) | 0);
    
    // Make an AJAX upload request using Axios (replace Cloudinary URL below with your own)
    return axios.post("https://api.cloudinary.com/v1_1/codeinfuse/image/upload", formData, {
      headers: { "X-Requested-With": "XMLHttpRequest" },
    }).then(response => {
      const data = response.data;
      const fileURL = data.secure_url // You should store this URL for future references in your app
      console.log(data);
    })
  });

  // Once all the files are uploaded 
  axios.all(uploaders).then(() => {
    // ... perform after upload is successful operation
  });
}

Read the full blog post to get an overview https://bilalbudhani.com/upload-multiple-files-to-cloudinary-using-react-dropzone-axios/

Thank you 👍

Good stuff! How would you add eager image resizing and cropping?

damn right its good stuff

formData.append("timestamp", (Date.now() / 1000) | 0);

Should probably be:

formData.append("timestamp", (Date.now() / 1000) || 0);

@ScottAgirs did you find a solution?

it's for rounding down lol