0

I am working on an Angularjs application.

I am able to call the function when selecting a file, but it does not pass the selected file into the Angularjs function. I get an undefined value in the variable selectedFile.

I am using a trigger to open the file picker as follows:

$scope.clickUpload = function () {
    angular.element('#uploader').trigger('click');
}

The following is my HTML:

<button type="submit" ng-click="clickUpload()">
<span>Upload Image</span>
</button>
<input id="uploader" hidden type="file" ng-accept="'.jpg,.png,.gif,.jpeg,.webp'" ngf-select="uploadFile(selectedFile)" ng-model="selectedFile" name="file" />

Below is my Angularjs function to upload the file that has been selected:

$scope.uploadFile = function (selectedFile) {
    alert(selectedFile);
}

What is the mistake I have made? Thank you for reading my question.

Philip Raath
  • 460
  • 3
  • 18
SoundStage
  • 802
  • 2
  • 9
  • 27
  • Check here http://stackoverflow.com/questions/18571001/file-upload-using-angularjs and here http://stackoverflow.com/questions/12979712/file-uploader-integration-for-angularjs – Zdravko Tatarski May 27 '16 at 14:44

1 Answers1

-1

You can't use the ngModel directive in type="file" inputs. Do this instead:

$scope.clickUpload = function() {
    var fileInput = document.getElementById("uploader");
    fileInput.click();

    //do nothing if object doesn't contain a file
    if(fileInput.files.length === 0) return;

    var file = fileInput.files[0];
    alert(file.fileName);
}
Kyle
  • 5,407
  • 6
  • 32
  • 47