0

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)enter image description here

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.

Tahseem Ahmad
  • 37
  • 7
  • See [How to print all the txt files inside a folder using java script](http://stackoverflow.com/questions/37634049/how-to-print-all-the-txt-files-inside-a-folder-using-java-script). Does `DataUtils.toBase64` return results asynchronously? – guest271314 Feb 01 '17 at 06:47

1 Answers1

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, []);
}
MeTe-30
  • 2,512
  • 2
  • 21
  • 30
  • 1
    @TahseemAhmad , YW, if it works please hit the accept button. – MeTe-30 Feb 01 '17 at 07:38
  • 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 Feb 01 '17 at 08:06
  • Thanks man ,.One more question ,What do i have to do to become a expert like you ? :P – Tahseem Ahmad Feb 01 '17 at 09:14
  • @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! – MeTe-30 Feb 01 '17 at 10:14