I'm currently working on implementing a multiple file upload feature using JavaScript.
Within my HTML, I have the following input:
<input type="file" (change)="fileChange($event,showFileNames)" multiple />
When the onChange event is triggered, the following code is executed:
this.files = [].slice.call(event.target.files);
input.value = this.files;
The this.files array now contains the files to be uploaded.
Upon clicking "SUBMIT", I attempt to execute the following code snippet. This code was sourced from a previous thread's answer, but I haven't had success with it yet.
upload() {
for (var i = 0; i < this.files.length; i++) { //for multiple files
var that = this;
(function (file) {
var name = file.name;
var reader = new FileReader();
let parts = file.name.split(".");
that.filename = parts[0];
if (typeof (parts[1]) != "undefined")
that.ext = "." + parts[1];
else
that.ext = "";
reader.onload = function (e) {
var x = this.result;
let fileJSON = { "Filename": that.filename, "Extension": that.ext, "DateCreated": new Date(), "Data": btoa(this.result), "Sguid": that.tripsToEditx.sguid };
console.log(fileJSON);
}
reader.readAsArrayBuffer(file);
})(this.files[i]);
}
}
The variables name, ext, and tripsToEditx are global variables that couldn't be accessed using .this, so I used
var that = this;
Despite my efforts, I am still encountering the issue of the last selected file being printed three times. Any suggestions on how to resolve this?