简体   繁体   中英

angularjs spring rest file upload form

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
Cancel Save

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM