java - uploading files using spring boot and angularjs not working -
i want upload files using spring boot annd angular js.
here's form:
<!doctype html> <html> <head> <meta charset="iso-8859-1"> <title>insert title here</title> </head> <body ng-app="mycat" ng-controller="catcontroller > <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>dateofuploade</label> --> <!-- <input type="date" class="form-control" ng-model="rap.dateofupload" > --> <!-- </div> --> <!-- <div class="form-group"> --> <!-- <label for="t">type of file</label> --> <!-- <select --> <!-- class="form-control" id="t" ng-model="rap.type"> --> <!-- <option>.word</option> --> <!-- <option>.xsl</option> --> <!-- <option>.pdf</option> --> <!-- </select> --> <!-- </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> <!-- <div class="form-group"> --> <!-- <button type="submit" class="btn btn-primary btn-lg" ng-click="savereports()">savereports</button> --> <!-- </div> --> </div> <!-- <table class="table"> --> <!-- <tr> --> <!-- <th>nameofuploader</th> --> <!-- <th>dateofupload</th> --> <!-- <th>typeoffile</th> --> <!-- <th>file</th> --> <!-- </tr> --> <!-- <tr ng-repeat="rap in reports"> --> <!-- <td>{ {rap.nameofuploader}}</td> --> <!-- <td>{ {rap.dateofupload}}</td> --> <!-- <td>{ {rap.typeoffile}}</td> --> <!-- <td>{ {rap.file}}</td> --> <!-- </tr> --> <!-- </table> --> </form> <script type="text/javascript" src="angular/angular.min.js"></script> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/jquery.js"></script> </body> </html>
here's controller java
//upload files @requestmapping(value="/upload", 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."; } }
and here's js controller
//upload files $scope.upload=function(rap){ $http.post("http://localhost:8080/upload?$name="+rap.name+"$file="+rap.file) .success(function(){ console.log('post succeded !'); }) .error(function(){ console.log('post failed .'); }); }
when run application in chrome use development tools , when click on importreports have typeerror: cannot read property 'name' of undefined. ideas?
Comments
Post a Comment