How to convert multiple selected image filenames to a comma separated string in JavasScript?

Question

I have an HTML form where a user can enter basic data about themselves. The last field is of input type="file". The user can select multiple images from their local disk drive.

I want to store the images in one string with the selected images separated by commas.

Here is my code which is not working:

var input = document.mainForm.imageInput;

input.onchange = function() {
  var file = input.files[0],
    reader = new FileReader();

  reader.onloadend = function() {
    var filesSize = 0

    for (i = 0; i < input.files.length; i++) {
      filesSize += input.files[i].size
    }

    if ((filesSize / 1024 / 1024) > 100) {
      console.log("bigger");
    } else {
      console.log("smaller");

      * // I need to do a for loop here to save all images in one string in 
      document.mainForm.hiddenImageNameBase64.value *

        var b64Transformation = reader.result.replace(/^data:.+;base64,/, '');
      console.log(b64Transformation);
      document.mainForm.hiddenImageNameBase64.value = b64Transformation;

      var allImagesInOneString = ""

      for (i = 0; i < input.files.length; i++) {
        allImagesInOneString += input.files[i].value.replace(/.*[\/\\]/, '');
      }

      document.mainForm.imageName.value = allImagesInOneString;
      input.classList.remove("is-ok");
      input.classList.add("is-notok");
    }
  };

  reader.readAsDataURL(file);
};

<div class="container">
  <form class="x" name="mainForm" id="mainForm" method="post" action="https://testpagex.com">
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="imageInput" class="font-weight-bold">Add images ( maximum size 100mb )</label>
        <input type="file" class="form-control-file" id="imageInput" name="imageInput" multiple />
      </div>
    </div>
    <input type="hidden" name="hiddenImageName">
    <input type="hidden" name="hiddenImageNameBase64">
    <div class="y">
      <button type="submit" class="btn btn-primary px-5 font-weight-bold">Save</button>
    </div>
  </form>
</div>

Answer 1

This seems like an X-Y Problem, but I'm going to work this anyway, since I think I have solutions to help you in multiple ways.

First, to answer the question you have for putting multiple images in a single comma delimited string, I'd think that creating a string array would be the easiest way to go. You just create your base64 strings individually and add them to the array. Then you can Join the array elements together with a comma and get the single string you're looking for.

I'm not sure why you want to do this, since it seems unnecessary.

My second option is to leave it as a string array. I'm assuming you are sending this data to a backend server-side script/app/service/whatever to save. That server side code will be able to handle the string array just fine. Then you can save it to the DB or a file(s).

My third option springboards off the second. Instead of saving the data to a single column/row in the DB or as a single file on your server, save the images individually. Each image goes into it's own file or row in your DB. This probably means creating a new table in your DB just for images and linking them to whatever table and row you are saving the rest of your data. This may also be necessary if you are saving filenames of the files you are creating in the DB.

I understand that you may not have the access or privileges to add tables to your DB, but it's at least something to consider if you do have that ability. Keeping the images separate can help you avoid the complication of trying to determine if a string is a single or multiple images. Fortunately, Base64 characters don't include the comma.

Also, I'm not sure why you are bothering to do this at all. Uploading multiple files to the server should be something your server side language can handle. Browsers can do this without you having to do it manually, like you are. Then again, you may be stuck doing it your way due to not having access to edit the code of an API you are using.