Send Multiple images with one JSON request

Question

I was working on building rest API, Where I want to upload multiple images with one post request.

So here. I am trying to make an array of base64 string of selected images. That array is JSON.stringify(images_to_upload) to convert to string. and send that string as JSON post. and on server side use json_decode() to decode the string array and save the images.

Is my approach correct? i am not able to execute JSON.stringify(images_to_upload) as this returns nothing.

is there any better way to handle this?

JAVASCRIPT

  $("#UploadImage").click(function(){
    var filesSelected = document.getElementById("filesToUpload").files;
    var images_to_upload = new Array();
    //Loop through each image
    for(var i=0;i<filesSelected.length;i++)
    {
      var fileToLoad = filesSelected[i];
      var fileReader = new FileReader();
      fileReader.onload = function(fileLoadedEvent){
        var img_string = fileLoadedEvent.target.result;
        //push base64 string in arrray
        images_to_upload.push(img_string);
      };
      fileReader.readAsDataURL(fileToLoad);
     }

    console.log(JSON.stringify(images_to_upload));  //this doesnt work
    data = {
      "images_data":JSON.stringify(images_to_upload) ,
      };
    url = "http://app.com/api/customer/uploadmultipleimg";
    $.ajax({
      type: "POST",
      url: url,
      data:data,
      success: function(result){
        console.log(result);
      },
      failure: function(errMsg) {
         console.log(errMsg);
      }
      });
  });

HTML

<input type="file" name="filesToUpload" id="filesToUpload" multiple="" accept="image/x-png,image/jpeg">
<input type="submit" value="UploadImage" id="UploadImage" name="submit">

Possible duplicate of [Upload multiple image using AJAX, PHP and jQuery](https://stackoverflow.com/q/28856729/1255289) — miken32, Oct 06 '18 at 19:59
Your code seems to work for me. What are you seeing in the console when you make this call: `console.log(JSON.stringify(images_to_upload));`? — Pseudonymous, Oct 10 '18 at 10:12

Pseudonymous · Accepted Answer · 2018-10-10T11:47:04.913

I think you might be hitting a race condition. I've updated the code to only make the call to the API when the final image has been processed by the FileReader. This is reliably showing the array and its contents in the console in my test version.

$(document).ready(attach_upload_button_click_handler);

function attach_upload_button_click_handler() {
    $("#UploadImage").click(upload_images);
}

function upload_images() {
    var selected_files = document.getElementById("filesToUpload").files;
    var images_to_upload = new Array();

    for (let i = 0; i < selected_files.length; i++) {

        var fileReader = new FileReader();
        fileReader.onload = function (event) {
            images_to_upload.push(event.target.result);

            if (i == selected_files.length - 1) {
                post_data_to_api(images_to_upload);
            }
        };

        fileReader.readAsDataURL(selected_files[i]);
    }
}

function post_data_to_api(images_to_upload) {
    console.log(JSON.stringify(images_to_upload));

    // CALL API
}

@PramitSawant This is that code in JS Fiddle: https://jsfiddle.net/adamfeather/xpvt214o/887935. If you check the console you'll see all files in the array. — Pseudonymous, Oct 17 '18 at 09:23
thanks [cptcoathanger](https://stackoverflow.com/users/2571982/cptcoathanger) :) — Pramit Sawant, Oct 17 '18 at 15:30

Send Multiple images with one JSON request

1 Answers1