How to get the filename of the uploaded file in ng-file-upload

angularjs file-upload ng-file-upload
Abhi picture Abhi · Sep 26, 2016 · Viewed 21.2k times · Source

I am using angularjs and the ng-file-upload to upload a file to a server. I want to get the file name so that I can save it with the same name in the server.

After uploading I see the file name near the "choose file" button, but I want to set the file name to a scope variable so that I can pass the file name to server along with the file.

The upload code:

 Upload.upload({
    url: $scope.ipForHttp+"addVehicles?ClassificationID=" + $scope.C.ClassificationID + "&ClassName=" +
         $scope.C.ClassName + "&ClassRate=" + $scope.C.ClassRate + "&ClassImage="+$scope.file+"&ClientID=1", 

   data:{file:$scope.file} 

 })

The html:

    <input  type="file" ngf-select ng-model="file" name="file" 
 ngf-pattern="'image/*'"accept="image/*" ngf-max-size="20MB"  />

Answer

Sajeetharan picture Sajeetharan · Sep 26, 2016

You can access like this, 

   $scope.filename = $scope.file.name;

Related questions

File Upload with Angular Material

I'm writing an web app with AngularJS and angular-material. The problem is that there's no built-in component for file input in angular-material. (I feel that file uploading doesn't fit the material design, but I need it in my app) Do …

Read More
Send multipart/form-data files with angular using $http

I know there are a lot of questions about this, but I can't get this to work: I want to upload a file from input to a server in multipart/form-data I've tried two approaches. First: headers: { 'Content-Type': undefined }, Which …

Read More
Preview Image before uploading Angularjs

Hi I was wondering if there was a way to preview images before I upload them using angularjs? I am using the this library. https://github.com/danialfarid/angular-file-upload Thanks. Here is my code: template.html <div ng-controller="picUploadCtr"&…

Read More