0

I have a file upload control added in AngularJs form. I am trying to fetch the data from the file uploaded. I have tried the below code, but the target.result is always empty.

//index.cshtml

<input type="file" class="form-control" id="imageUploadfile" name="Imagefile" accept="image/*" />
<input type="button" name="imageUploadButton" ng-click="uploadFiles()" value="Upload" />

//controller.js

$scope.uploadFiles = function () {

        var newdata = "";

        var filesSelected = document.getElementById("imageUploadfile").files;
        if (filesSelected.length > 0) {
            var fileToLoad = filesSelected[0];
            var fileReader = new FileReader();
            fileReader.onload = function (fileLoadedEvent) {
                var newdata = fileLoadedEvent.target.result;
            };
            fileReader.readAsDataURL(fileToLoad);
        }
        alert(newdata);
}

How to fix this? I am trying in IE 11, chrome. Note: I do not want to use any plugins, formdata,iframe.

Mistalis
  • 17,793
  • 13
  • 73
  • 97
venkat14
  • 583
  • 3
  • 12
  • 34
  • Actually if you put the `alert(newdata)` inside the fileReader.onload handler, you should get the expected result. – Anthony C Jan 16 '17 at 15:44
  • [This answer](http://stackoverflow.com/questions/5570871/html5-filereader-alternative) may help you. – Mistalis Jan 16 '17 at 15:45

0 Answers0