Drag and Drop Images browse upload issue in Struts 2

Question

JSP Form :

    <s:form method="POST" enctype="multipart/form-data" action="uploaddocumentfile" id="uploaddocumentfile" namespace="/documents" >
        <s:file name="upload" id="holder"></s:file>
   /s:form>

jQuery:

function readfiles(files) {
    console.log(files);
    var a=files[0].name;  // name of file 
    $("#uploaddocumentfile").submit(); // problem :how to pass value in action class of type File upload  getter setter
}
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
     this.className = '';
    // console.log(e.dataTransfer.files[0].path);
     e.preventDefault();
     readfiles(e.dataTransfer.files);
    } 

Action class: public class UploadFilesAction extends ... {

private File upload;

public File getUpload() {
    return upload;
}
public void setUpload(File upload) {
    this.upload = upload;
}
}

problem : in browse file upload we can get form file value in action class automatically by File upload getter setter but drag drop how can we get file values

Answer 1

You can use dropzonejs plugin to achieve drag and drop files

JSP

<div id="template_dropzone"></div>

Script

var profilePic = null;
var dropZone = $('#template_dropzone').dropzone({
                 url: "#",
                 maxFiles: 1,
                 addRemoveLinks: true,
                 init: function() {
                    this.on("addedfile", function(file) {
                     // trigger when a file is added
                 });
                     this.on("complete", function(file) {
                       // trigger when the uploading of a file is completed
                        profilePic = file;
                  });
                     this.on("removedfile", function(file) {
                         var noOfFiles =  this.files.length; // can check No. of files
                  });
               });
    $('#uploadFile').on('click',function(event){
      var data = new FormData();
      data.append('upload',profilePic);
       $.ajax({
           url: 'uploadProfilePic',
           method: 'POST',
           data: data,
           cache: false,
           contentType: false,
           processData: false,
           success: function(result) {}
        });
    });

In Action class you can retrieve file name or content type by simply creating a String variable with getters and setters like below:-

    private File upload;
    private String uploadFileName;
    private String uploadContentType;

    public File getUpload() {
        return upload;
    }

    public void setUpload(File upload) {
        this.upload = upload;
    }

    public String getUploadFileName() {
        return uploadFileName;
    }

    public void setUploadFileName(String uploadFileName) {
        this.uploadFileName = uploadFileName;
    }

    public String getUploadFileContentType() {
        return uploadFileContentType;
    }

    public void setUploadFileContentType(String uploadFileContentType) {
        this.uploadFileContentType = uploadFileContentType;
    }