Uploading list of images from a folder AngularJs

Question

I want to upload list of images from a folder and stored them as bytestream in database. I want to give angularjs the folder containing the images instead of selecting multiple files . The part of the code responsible is given below.

  $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);

  }

But the problem is I am getting the following details in my log.(Screenshot attached below)

As you can see only the last object contains image data whereas none of the others have any image content.

Let me know why this problem is coming and how to solve the same.

See How to print all the txt files inside a folder using java script. Does DataUtils.toBase64 return results asynchronously? — guest271314
– guest271314, Commented Feb 1, 2017 at 6:47

MeTe-30 · Accepted Answer · 2017-02-01 08:15:02Z

1

It take a while to convert image to base64, so you have to upload your image after ques.questionImage is filled.

var uploadMultipleQuestions = function(files, i, output) {

    if (files.length == i) {
        for(var j=0;j<output.length;j++)
            console.log(output[j]);

        return Question.uploadMultipleQuestions(output);
    }


    DataUtils.toBase64(files[i], function(base64Data) {

        output.push({
            questionString: files[i].name,
            questionImageContentType: files[i].type,
            questionString: files[i].webkitRelativePath.split("/")[1],
            questionImage: base64Data
        });

        uploadMultipleQuestions(files, i+1, output);

    });
}

$scope.uploadMultipleQuestions =function(e){
    var theFiles = e.files;
    uploadMultipleQuestions(theFiles, 0, []);
}

edited Feb 1, 2017 at 8:15

answered Feb 1, 2017 at 6:49

MeTe-30

2,5422 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MeTe-30 Over a year ago

@TahseemAhmad , YW, if it works please hit the accept button.

Tahseem Ahmad Over a year ago

Now what is happening is that questionString and questionImageContentType is coming same for all the files.What should i do to get the individual file names?

Tahseem Ahmad Over a year ago

Thanks man ,.One more question ,What do i have to do to become a expert like you ? :P

MeTe-30 Over a year ago

@TahseemAhmad , :)) just working and reading bro. whenever you digging stackoverflow for your question try to read all answers, no matter it's related to your question or not. And check the source code of open source modules you are using. some of them are awesome!

Collectives™ on Stack Overflow

Uploading list of images from a folder AngularJs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related