Convert multiple images to base 64 using single function

Question

I'm working on a problem where I have to take three images as input from the user and have to send them to the backend by converting them into Base64. I know how to do it for a single input file but can't work my way around for multiple inputs.

I want to have a single function that can convert the images to Base64 & store the value of each image in a separate variable. Please help me out with this.

Following is the code I'm using for single input i.e. First Image.

HTML CODE

<div class="first_div">
     <label for="first_image">First Image</label>
     <input name="first_image" type="file" accept="image/*" id="first_image" class="img_file">
</div>

<div class="second_div">
     <label for="second_image">Second Image</label>
     <input name="second_image" type="file" accept="image/*" id="second_image" class="img_file">
</div>

<div class="third_div">
     <label for="third_image">Third Image</label>
     <input name="third_image" type="file" accept="image/*" id="third_image" class="img_file">
</div>

<button onclick="submitImages()">Submit</button>
                  

JAVASCRIPT CODE

let encoded_image;

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
     encoded_image = reader.result;
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}


const submitImages = () => {
   var files = document.getElementById('first_image').files[0];
   if (files.length > 0) {
    getBase64(files[0]);
   }

const formData = new URLSearchParams(new FormData());
formData.append("first_image", encoded_image);

fetch(API CALL HERE)

}

I want to create a function that takes input from all three fields, converts them to Base64 & stores in a variable. So that I can append it to form data.

Answer 1

Select all inputs, loop and get base64 of each file Try this

  const getBase64 = (file) =>
    new Promise((resolve, reject) => {
      console.log(file);
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (err) => reject(err);
    });

  const submitImages = async () => {
    const imageInputs = document.querySelectorAll("input");
    const images = await Promise.all(
      [...imageInputs].map((imageInput) =>
        imageInput?.files?.[0] ? getBase64(imageInput.files[0]) : null
      )
    );
    console.log(images);
  };