Preload images from more then one file input

Question

I find an methode to preload an image before uploading, but i have more then one file input. And i want for each input file to preload the image. In generell not a big problem but the amount how many file inputs are used on the website is not stable. An user can addan upload image block so he can add 2 or 3 and i want for each he ads the possibility to preload the image. But my experience dont reach this level what it needs. So my question is it possible to realilze it? My code for preload the image for one specific file input is this:

    function readURL(input) {
          if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                              $('#blah')
                                        .attr('src', e.target.result)
                                        .height(50);
                    };
                    reader.readAsDataURL(input.files[0]);
          }
}

If an user adds one image block this is how it looks like:

<div id="divImage-1" class="form-group form-file-upload">
<label id="labelImage-1" for="labelImage2-1">New Picture</label>
<div></div>
<label id="labelImage2-1" for="inputImage-1" class="form-file-upload1">Upload Image</label>
<input id="inputImage-1" type="file" onchange="readURL(this);">
<img id="blah" height="50" alt="Image preview">
</div>

If the user create an second one all IDs ae count to 2 (divImage-2).

aby.js · Accepted Answer · 2020-03-31T17:07:37.617

Lets assume you this in your HTML

<button class="btn btn-primary" id="addBtn">Add Image Block</button>

<div class="container"></div>

Then, as first step you need to create two global variables:

let imageBlockCout = 0 for counting number of image blocks.
let addedPicSet = nnew Set() a set of pic names which are being used by other blocks.

Then for every click on add button we will add a new block of image with code lets say:

    $(
      $.parseHTML(
        `<div class="row">
                <input type="file" multiple id="photos-${imageBlockCount}">
                <div id="gallery-${imageBlockCount}" class="row"></div>
             </div>`
      )
    ).appendTo(".container");

Now, for every file input added you need to attach an on-change listener:

   let currentBlockCount = imageBlockCount;
    $("#photos-" + imageBlockCount).on("change", function () {
      let input = this;

      if (!input.files) {
        return;
      }

      //for every image that has been read by FileReader we show it
      //in its own card inside its button gallery
      let onFileLoaded = function (event) {
        $(
          $.parseHTML(
            `<div class="col-sm-3">
                <div class="card">
                  <img 
                    class="card-img-top" 
                    src="${event.target.result}">
                </div>
              </div`
          )
        ).appendTo("#gallery-" + currentBlockCount);
      };

      //input.files is an array like object, so we convert it to array
      Array.from(input.files)
        .filter(
          //first we filter images which are already in use
          (file) => !addedPicSet.has(file.name)
        )
        .forEach((file) => {
          let reader = new FileReader();
          //we attach an onLoad listener for each reader
          reader.onload = onFileLoaded;

          //then we tell the reader object which file to read
          reader.readAsDataURL(file);

          //add the image name in the set of used image names
          addedPicSet.add(file.name);
        });
    });

I have also made a pen for your help: https://codepen.io/abdullah-shabaz/pen/qBdvZMQ

Yes that what you ve done is nice and i ve found it before posting this. But the problem is that i can upload 2 images for one input but i have 2 inputs with each one image what should prerender. Thats my problem to reallize — Laze Ho, Mar 31 '20 at 14:55
So, you are saying there can be multiple input buttons which can add pictures? am I right? and do you need to check if any of them are uploading the same picture again and skip that picture? — aby.js, Mar 31 '20 at 15:21
Yes i the user click "+image" and block which contains the image block which is shown above will be created. so if the user create 2 block so they are 2 inputs with type file. And the script should preload for every amount of input the image. So if the user click/add 5 images block, there are 5 inputs and all of them should preload the images what the user try to upload — Laze Ho, Mar 31 '20 at 15:50
okay thank you very much if it help you you can see above how the class or ids are called the number 1 is going to count up for every input block the user add — Laze Ho, Mar 31 '20 at 15:55
Yes i edit it so its suit perfect to my code and with your code i could easy replace my old and your code was so clean i had no problems to edit it. Know it works perfect. Thats what i need, and i cant reallize so thank you very much. — Laze Ho, Mar 31 '20 at 18:11

Preload images from more then one file input

1 Answers1