Upload folder javascript

Question

I am looking online how to upload a folder of images and display them using JavaScript, and I am seeing this code repeatedly:

var inps = document.querySelectorAll('input');
[].forEach.call(inps, function(inp) {
  inp.onchange = function(e) {
    console.log(this.files);
  };
});

Firstly, it doesn't work on my Google Chrome (it is not logging anything), and more importantly, what is this method of doing

[].forEach.call

What does this mean? (to use [] before forEach)?

`[].forEach.call` or `Array.prototype.forEach.call` invokes the array prototype forEach method for a given context, in this case `inps`. `document.querySelectorAll` returns an object that can be treated as an array but it is not actually an array (it returns `NodeList`). In such cases, you can use the prototype method and call them on an object of your choosing. — Abrar Hossain, Nov 14 '20 at 11:05
Does this answer your question? [What does \[\].forEach.call() do in JavaScript?](https://stackoverflow.com/questions/16053357/what-does-foreach-call-do-in-javascript) — MuXeD, Nov 14 '20 at 11:19
This code must be accompanied by HTML that contains at least one `` element and it's triggered when you manually select a file in the browser. — Álvaro González, Nov 14 '20 at 19:10

Shturmavik · Answer 1 · 2020-11-15T18:39:23.210

BLOB - Binary Large Object

If you want preview loaded images, you should create blob. URL will correct after save image in file base or database.

my GIT hub with example for only one picture

[].forEach.call it's just rule and you got answer upper.

developer.mozilla.org -> [].forEach.call

let inps = document.querySelectorAll('input');
[].forEach.call(inps, function(inp) {
  inp.onchange = function(e) {
    console.log(URL.createObjectURL(this.files[0])) //create BLOB for preview if need
    for (file of this.files) {
      setFiles(file); //parsing all uploaded files
      createLIST(file, this.files.length);
    }
  };
});

//save all file to database by your URL -> URL_FOR_PROCESSING_POST
function setFiles(file) {
  console.log(file);
  let request = new XMLHttpRequest();
  let formData = new FormData();
  formData.append(file.name, file);
  request.open('POST', 'URL_FOR_GET_POST');
  request.send(formData);
}

arResult = [];
function createLIST(file, count) {
  let html = '<ul>';
  for (let item in file) {
    html += `<li><div>${item}</div> <div>${file[item]}</div></li>`;
  }
  html += '</ul>';
  arResult.push(html);
  if (arResult.length === count) {
    document.querySelector('#output-data').innerHTML = arResult.join('');
  }
}

.output-data {
  counter-reset: section;
}
.output-data ul {
  border-bottom: 1px solid grey;
  padding-bottom: 1rem;
}
.output-data ul:before {
  counter-increment: section;
  content: "File " counter(section) ": ";
  font-weight: bold;
  font-size: 20px;
  color: green;
  margin-bottom: 1rem;
  display: block;
}
.output-data li {
  display: flex;
  padding-bottom: 0.25rem;
}
.output-data li div:first-child {
  font-weight: bold;
  flex: 0 1 200px;
}
.output-data li div:last-child {
  text-align: left;
}

<input type="file" name="file" webkitdirectory directory>

<div id="output-data" class="output-data"></div>

Thanks. Unfortunately the console.log is not logging anything so I don't think its working. Its not iterating through the [].foreach.call although i copy and pasted your code. any ideas what could be happening? (ive noticed that the nodelist is empty when i console.log(inps) — bigfeetman, Nov 14 '20 at 17:50
I corrected my answer and added link to my codepen.io -> https://codepen.io/Shturmavik/pen/ExyrRry — Shturmavik, Nov 14 '20 at 18:24

Upload folder javascript

1 Answers1