Upload Multiple Unique File On Cloudinary and Send Unique Images URL To Backend

Hi there, This year, I decided to write two technical articles monthly.
Let's get straight to business

Firstly, you will have to create a new react app using create-react-app CLI. If you already have a new react app then you are in luck you can skip this step. I have named mine Cloudinary but you can name yours in a more creative way.

Next, we will need an HTML Form and a couple of elements, and also a submit element to trigger the upload process.

We will be sticking to the internal state hence useState in this case.
Also, we will be using the Axios library to make HTTP requests to external resources.
Axios Installation

Now, we will create our parent component which is App.js, and clear out all generated code to have a clean and nice component

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

Next, I will import the internal state from the package manager and get it ready for use. Add the next code block into your app component just before the return statement.

  const [image1, setimage1] = useState()
  const [image2, setimage2] = useState()
  const [image3, setimage3] = useState()
  const [image4, setimage4] = useState()

Next, I will create multiple input fields of type file in our HTML form and set the state of each one. Add the next block of code in your div tag.

      <form onSubmit={handleSubmit}>
        <input type='file' accept='image/*' onChange={e=>{
           setimage1(e.target.files[0])
        }}/>
        <input type='file' accept='image/*' onChange={e=>{
           setimage2(e.target.files[0])
        }}/>
        <input type='file' accept='image/*' onChange={e=>{
          setimage3(e.target.files[0])
       }}/>
        <input type='file' accept='image/*' onChange={e=>{
          setimage4(e.target.files[0])
       }}/>
       <input type='submit'/>
      </form>

Up next, create an account on Cloudinary (If you don't have one before) but note that Cloudinary will ask to assign you a generic name which is the 'cloud name' you can always change it to what you can easily remember and obtain your API KEY & Image upload URL from Your newly created Cloudinary Dashboard.

Also, we will need to enable unSigned Upload in our account and Copy the preset name respectively from Settings>Upload and Save.

I believe we are making progress so far, next we will need to create the handle submit function which contains the formData object to capture required parameters for unauthenticated requests such as file, Upload_Preset, and api_key and also the individual fetch request. You can check out more on Unauthenticated Request

const handleSubmit = e=>{
  const url =
  'https://api.cloudinary.com/v1_1/<Cloud Name>/image/upload';
const formData = new FormData();
formData.append('file', image1);
formData.append('upload_preset', '<Your Preset Name>');
formData.append('api_key', '<Your API Key>');

fetch(url, { method: 'POST',body: formData,})
  .then((res1) => {
    arrayName.push(res1.url);
    const formData1 = new FormData();
    formData.append('file', image2);
    formData.append('upload_preset', '<Your Preset Name>');
    formData.append('api_key', '<Your API Key>');
    return fetch(url, {
      method: 'POST',
      body: formData1,
    });
  })
  .then((res2) => {
    arrayName.push(res2.url);
    const formData2 = new FormData();
    formData.append('file', imag3);
    formData.append('upload_preset', '<Your Preset Name>');
    formData.append('api_key', '<Your API Key>');
    return fetch(url, {
      method: 'POST',
      body: formData2,
    });
  })
  .then((res3) => {
    arrayName.push(res3.url);
    const formData3 = new FormData();
    formData.append('file', image4);
    formData.append('upload_preset', '<Your Preset Name>');
    formData.append('api_key', '<Your API Key>');
    return fetch(url, {
      method: 'POST',
      body: formData3,
    });
  })
  .then((res4) => { 
    arrayName.push(res4.url);
                const newBackendUrl =  '<Backend UrL>'
                return fetch(newBackendUrl, {
                  image1:arrayName[0],
                  image2: arrayName[1],
                  image3: arrayName[2],
                  image4: arrayName[3]
                })
                .then((res) => {
                  console.log('👉 Returned data will show here ', res.data);
        })
                .catch((error) => 
                console.log('👉 Returned Error', error.stack)
        );
  })


}

This is my first article and I hope you find this article helpful. I’ll appreciate your comments and if you have any questions, don’t hesitate to hit me up on Twitter Abubakar Omolaja. Thanks.