1

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");
      }

 }
1
  • headers: {enctype:'multipart/form-data'} inside your post Commented Feb 12, 2015 at 15:43

1 Answer 1

1

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
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.