How to select a file using Angularjs?

Question

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.

Check here stackoverflow.com/questions/18571001/… and here stackoverflow.com/questions/12979712/… — Zdravko Tatarski
– Zdravko Tatarski, Commented May 27, 2016 at 14:44

Kyle · Accepted Answer · 2016-05-27 15:07:32Z

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

answered May 27, 2016 at 15:07

Kyle

5,6077 gold badges38 silver badges48 bronze badges

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

1 Comment

SoundStage Over a year ago

I am getting only undefined passed to the var fileInput

Collectives™ on Stack Overflow

How to select a file using Angularjs?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related