i want upload files using angular js , spring boot.
here's java controller
//upload files @requestmapping(value="/upload",headers=("content-type=multipart/*"), method=requestmethod.post) public @responsebody string handlefileupload(@requestparam("name") string name,@requestparam("file") multipartfile file){ if (!file.isempty()) { try { byte[] bytes = file.getbytes(); bufferedoutputstream stream = new bufferedoutputstream(new fileoutputstream(new file(name))); stream.write(bytes); stream.close(); return "you uploaded " + name + "!"; } catch (exception e) { return "you failed upload " + name + " => " + e.getmessage(); } } else { return "you failed upload " + name + " because file empty."; } } here's form
<section id="contact-info"> <section id="contact-page"> <div class="container"> <div class="center"> <p class="lead">import reports</p> </div> <div class="row contact-wrap"> <div class="status alert alert-success" style="display: none"></div> <form id="main-contact-form" class="contact-form" name="contact-form" method="post" enctype="multipart/form-data" > <div class="col-sm-5 col-sm-offset-1"> <div class="form-group"> <label>name *</label> <input type="text" name="name" class="form-control" required="required" ng-model="rap.name"> </div> <div class="form-group"> <label>file</label> <input type="file" name="file" class="form-control" ng-model="rap.file"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-lg" ng-click="upload()">import file</button> </div> </form> </div><!--/.row--> </div><!--/.container--> </section><!--/#contact-page--> here's js controller
//upload files $scope.upload=function(rap){ $http.post('http://localhost:8080/upload?name='+$scope.rap.name+"file="+$scope.rap.file ,{ headers: { 'content-type': undefined }, transformrequest: angular.identity }) .success(function(){ console.log('post succeded !'); }) .error(function(){ console.log('post failed .'); }); } when fill form , click on importfile , have error mentioned below .any ideas?
$http.post('http://localhost:8080/uploadname='+$scope.rap.name+"file="+$scope.rap.file ,{ headers: { 'content-type': undefined }, transformrequest: angular.identity }) you signature method little bit wrong - second object data, please see https://docs.angularjs.org/api/ng/service/$http#post
"file="+$scope.rap.file are trying post file contents via url multipart object? files posted in http body.
also, ngmodel doesn't support binding value of input[file], not browsers support fileapi in javascript - please see example https://github.com/angular/angular.js/issues/1375
so, if need support "legacy" browsers, please use third party ng's polyfill libraries written purpose(like @uzi kilon suggested).
if fine modern browsers, can add custom input[file] onchange handler bind file model , post correctly server endpoint.(see angularjs: how implement simple file upload multipart form?)
Comments
Post a Comment