Angular - upload file on file selection (built-in implementation)
I want to create an "attach" button like in gmail that when clicked will open a viewport and an http request will be sent to the server at the user's choice.
Today I am using the following code in the client:
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="data" />
<input type="submit">do it</input>
</form>
This is not good for several reasons:
- I don't want the submit button to send files to the server, I want it to fire when a file is selected by the user.
- The default behavior is to send the user to another page
I'm looking for an implementation (native angular code, not an external library) of an HTTP request with the same data ( enctype="multipart/form-data"
and file details), but without using a form.
source to share
I don't know what it was about native
, but I use this in my projects:
$scope.form = null;
$scope.uploaded = [];
$scope.upload = function(){
var data = new FormData(document.forms.namedItem('form')); // form name
$http.post('/upload', data, { // change with your endpoint
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(res){
$scope.uploaded.push(res);
$scope.form = null;
});
};
$scope.$watch('form', function(){
$scope.upload();
});
HTML *:
<div ng-repeat="n in uploaded">
{{n.filename}}
</div>
<form name="form">
<input type="file" name="data" ng-model="form" />
</form>
* Hide your input file name with css to create Gmail like upload. Make sure your server returned the filename or whatever you need here, I assumed your server returned the filename with the key "filename", look at $ scope.uploaded above.
Don't forget to check your server side what the input file
will be sent from multipart/form-data
and use data
as a name. This will be every time the user adds an image / file, be careful when handling this kind of thing on your server side. I usually prefer to use the button submit
as usual.
source to share
Here is the code I used in my project, maybe it will help you.
HTML:
<form role="form" name="myForm" ng-submit="submitCuisine()" novalidate>
<div class="form-group">
<label for="description">Image</label>
<input type="file" file-input="files" name="file"/>
</div>
<button class="btn btn-primary" type="submit"> Submit</button>
</form>
JS:
$scope.submitCuisine=function(){
var fd=new FormData();
angular.forEach($scope.files,function(file){
fd.append('file',file);
})
$http.post('admin/managecuisineAdd',fd,{
transformRequest:angular.identity,
headers:{'Content-type':undefined}
}).success(function(data){
$scope.message="Successfully"
});
}
Directive
myApp.directive("fileInput",['$parse',function($parse){
return{
restrict:'A',
link:function(scope,ele,attrs){
ele.bind('change',function(){
$parse(attrs.fileInput).
assign(scope,ele[0].files)
scope.$apply()
});
}
}
}]);
source to share