I made angularjs spring rest file upload by the following code it works well and save file ,now I want to add some input text like description to html form with file upload and save them What is the code I should add to formData() in angular controller to make this?
angularjs controller
var myDropzone = new Dropzone("div#file",
{ url: "#"
});
myDropzone.on("addedfile", function(file) {
$scope.file=file;
});
$scope.uploadFile=function(){
var formData=new FormData();
formData.append("file",$scope.file);
console.log(formData)
$http.post('/pagingpoc/app/newDocument', formData, {
transformRequest: function(data, headersGetterFunction) {
return data;
},
headers: { 'Content-Type': undefined }
}).success(function(data, status) {
console.log("Success ... " + status);
}).error(function(data, status) {
console.log("Error ... " + status);
});
$('#saveAttachmentModal').modal('hide');
};
html form
<form ng-submit="uploadFile()" enctype="multipart/form-data">
<div class="form-group">
<label>Description</label>
<textarea rows="5" cols="5" ng-model="description"></textarea><br>
</div>
<div id="file" class="dropzone"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
Rest Controller
public void UploadFile(MultipartHttpServletRequest request,
HttpServletResponse response) throws IOException {
Attachment attachment=new Attachment();
Iterator<String> itr=request.getFileNames();
MultipartFile file=request.getFile(itr.next());
String fileName=file.getOriginalFilename();
attachment.setName(fileName);
attachmentRepository.save(attachment);
File dir = new File("/home/ali/");
if (dir.isDirectory())
{
File serverFile = new File(dir,fileName);
BufferedOutputStream stream = new BufferedOutputStream(
new FileOutputStream(serverFile));
stream.write(file.getBytes());
stream.close();
}else {
System.out.println("Error Found");
}
}
controller:
var myDropzone = new Dropzone("div#file", { url: "#"});
myDropzone.on("addedfile", function(file) {
$scope.file=file;
});
$scope.text = '';
$scope.uploadFile = function(){
var formData=new FormData();
formData.append("file",$scope.file);
formData.append("text",$scope.text); //here
$http.post('/pagingpoc/app/newDocument', formData, {
transformRequest: function(data, headersGetterFunction) {
return data;
},
headers: { 'Content-Type': undefined }
}).success(function(data, status) {
console.log("Success ... " + status);
}).error(function(data, status) {
console.log("Error ... " + status);
});
$('#saveAttachmentModal').modal('hide');
};
hmlt:
Description
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.