javascript send post parameters with file

Question

Trying to upload a file with some parameters, I've changed the Ext upload plugin to upload some files with post parameters.
The ext uploader code (ux.upload.uploader.FormDataUploader) :

uploadItem : function(item) {
     file = item.getFileApiObject();

    item.setUploading();

     formData = new FormData();

    // mycode goes here to append some parameters
    formData.append(file.name, file);

     xhr = this.initConnection();

    xhr.setRequestHeader(this.filenameHeader, file.name);
    xhr.setRequestHeader(this.sizeHeader, file.size);
    xhr.setRequestHeader(this.typeHeader, file.type);

    var loadendhandler = Ext.Function.bind(this.onLoadEnd, this, [
            item
        ], true);

    var progresshandler = Ext.Function.bind(this.onUploadProgress, this, [
            item
        ], true);

    xhr.addEventListener('loadend', loadendhandler, true);
    xhr.upload.addEventListener("progress", progresshandler, true);

    xhr.send(formData);
},
initConnection : function() {
    var xhr = new XMLHttpRequest(),
        method = this.method,
        url = this.url;

    xhr.open(method, url, true);

    this.abortXhr = function() {
        this.suspendEvents();
        xhr.abort();
        this.resumeEvents();
    };

    return xhr;
},

I tried these two lines of my code:

formData.append("ali","ghasemi");
formData.append("alisd","ghassdf");

But the parameters were added into the request payload in the following manner:

------WebKitFormBoundarylAKSY21NN15kqWct
Content-Disposition: form-data; name="ali"

ghasemi
------WebKitFormBoundarylAKSY21NN15kqWct
Content-Disposition: form-data; name="alisd"

ghassdf
------WebKitFormBoundarylAKSY21NN15kqWct
Content-Disposition: form-data; name="icon-info.gif"; filename="icon-info.gif"
Content-Type: image/gif

GIF89a

How can I get the post parameters at server side or how set these parameters correctly at the client side?
I am coding in java spring. HttpServletRequest does not know these params.

public JSONObject upload(HttpServletRequest request, HttpServletResponse response, @RequestBody String body) throws IOException {
    String ali = request.getParameter("ali"); // returns null
}

Any answer in Ext or pure javascript or Java spring controller will be appreciated.
Here's a related question: formdata-appendkey-value-is-not-working

I found my answer in [this stackoverflow question][1]. [1]: http://stackoverflow.com/questions/3337056/convenient-way-to-parse-incoming-multipart-form-data-parameters-in-a-servlet — Dariush Jafari, Jan 25 '15 at 17:45

score 0 · Answer 1 · answered Jan 25 '15 at 17:16

0

The request payload which you paste is the right format of FormData, we also say multipart/form-data.

In php: Your can use $_POST to get these parameters, such as ali, alisd. And use $_FILES to get upload files.

answered Jan 25 '15 at 17:16

puritys

447
3
6

I am coding in java spring. `HttpServletRequest` does not know these params. – Dariush Jafari Jan 25 '15 at 17:23

score 0 · Accepted Answer · edited May 23 '17 at 11:43

I found the answer here.
multipart/form-data encoded requests are indeed not by default supported by the Servlet API prior to version 3.0. The Servlet API parses the parameters by default using application/x-www-form-urlencoded encoding. When using a different encoding, the request.getParameter() calls will all return null. When you're already on Servlet 3.0 (Glassfish 3, Tomcat 7, etc), then you can use HttpServletRequest#getParts() instead. Also see this blog for extended examples.

Prior to Servlet 3.0, a de facto standard to parse multipart/form-data requests would be using Apache Commons FileUpload. Just carefully read its User Guide and Frequently Asked Questions sections to learn how to use it. I've posted an answer with a code example before here (it also contains an example targeting Servlet 3.0).

java code:

        Map properties = new HashMap();
        List<FileItem> items;

        items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
        for (FileItem item : items) {
            if (item.isFormField()) {
                String fieldName = item.getFieldName();
                String fieldValue = item.getString();
                properties.put(fieldName, fieldValue);
            } else {

                String tempString = "d:/io";
                //String fileName = FilenameUtils.getName(item.getName());
                //fileNameWithOutExt = FilenameUtils.removeExtension(fileName);
                file = new File(tempString + '/' + item.getName());

                item.write(file);
            }
        }

javascript send post parameters with file

2 Answers2