Is it possible to access files in the uploader using JS when max_entries is greater than 1?

Questions / Help
,
1

If max_entries is set to 1 the below works

const file = event.target.files[0];

If max_entries is set to a value greater than 1 no matter what I try I can’t access the files in the uploader.

Does anyone know if its even possible or am I just wasting my time trying?
All I get is empty lists being returned.

2

I’m not sure the “correct” way to access them, but it looks like there are some files on this private undocumented field of the input element.

this.el.addEventListener("change", event => {
  const files = event.target.phxPrivate.files
  console.log(files)
  // [File, File, File]
})
3 Likes
3

You sir, are a legend. Never would have gotten that on my own.

May I ask how you figured it out? Or is it just something you knew as common knowledge?

The below works for getting the dimensions of the uploaded images, so assume I can do other stuff as well. Thank you very much for the help

myButton.addEventListener('change', (event) => {
      const files = event.target.phxPrivate.files;
    
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
    
        reader.onload = function (e) {
          const img = new Image();
    
          img.onload = function () {
            console.log('Image Width:', img.width);
            console.log('Image Height:', img.height);
            console.log('--------------------------');
          };
    
          img.src = e.target.result;
        };
    
        reader.readAsDataURL(file);
      }
    });