I am looking to streamline the process of uploading a list of images from a folder and storing them as bytestream in a database. Rather than selecting multiple files individually, I want to provide AngularJS with the entire folder containing the images. Below is the snippet of code responsible for this operation:
$scope.uploadMultipleQuestions = function(e) {
var questionList = []
var difficultyLevel = vm.question.difficultyLevel;
var theFiles = e.files;
for (var i = 0; i < theFiles.length; i++) {
var ques = {};
ques.questionString = theFiles[i].name;
DataUtils.toBase64(theFiles[i], function(base64Data) {
$scope.$apply(function() {
ques.questionImage = base64Data;
});
[![enter image description here][1]][1]
});
ques.questionImageContentType = theFiles[i].type;
ques.questionString = theFiles[i].webkitRelativePath.split("/")[1];
questionList.push(ques);
Question.uploadMultipleQuestions(questionList);
}
for (var i = 0; i < questionList.length; i++) {
console.log(questionList[i]);
}
//Question.uploadMultipleQuestions(questionList);
}
However, upon checking my log, I notice that only the last object contains image data, while the rest do not. This issue is depicted in the screenshot provided below: https://i.sstatic.net/RKGN2.jpg
It seems like there is an issue with how the image data is being handled. Any insights on why this problem is occurring and how it can be resolved would be greatly appreciated.