Posting FormData object with input types and file NullPointerException

Question

I am trying to do a jquery ajax post with an input type file and a normal input type with text and retrieving them from my servlet with request.getParameter("element_name") however although when using Chrome inspector I am seeing that the object of FormData I am sending contains my file and my text value, the servlet is reading the parameter as null for some reason.

This is the form I have: (ticket_id is returning successfully from another jsp)

<form id="upload-form" action="upload" enctype="multipart/form-data" method="post">
    <input id="attach-btn" type="file" name="uploadedFile" style="display:none"/>
    <input id="tick-id-upload" type="hidden" name="ID" value="<%=ticket_id%>" />            
    <input id="submit-form" type="button" style="display:none"/>
</form>

This is the jquery ajax post call:

// use to refresh section on submit of a form
$(document).on('click', '#submit-form', function()
{
    var form_data = null;

    if (drop === false)
    {
        // form data object with ticket id and file
        form_data = new FormData($('#upload-form')[0]);
    }
    else
    {
        // append dropped file and value of id seperately
        form_data = new FormData();
            form_data.append('ID', $('#tick-id-upload').val());
        form_data.append('uploadedFile', dropped_files);
    }

    $.ajax(
    {
       url: $('#upload-form').attr('action'),
       type: 'POST',
       async: true, 
       xhr: function() // custom XMLHttpRequest
       {
            myXhr = $.ajaxSettings.xhr();

            if (myXhr.upload)
            { // check if upload property exists
                myXhr.upload.addEventListener('progress', show_progress, false); // for handling the progress of the upload
            }
            return myXhr;
       },
       dataType: 'html', // the data type to be returned
       success: function(response, status, xhr)
       { 
            $('#progressbar').hide();

            if (xhr.getResponseHeader('duplicate') === 'true')
            {
                // file is duplicate.. display dialog box
            setTimeout(function()
            {
                   $('#trigger-dialog').trigger('click');
            }, 10);     
            }
            else
            {
                // replace attachments section by section in response
                    $('#attachments').html($(response).find('#attachments').html());  
                    execute_attach_datatable();
                    switch_to_view();

                    init_progress_bar();
                    override_section_height();
                }
            },   
            error: function(xhr, status, error) 
            {
                alert(xhr.responseText);
            },
            data: form_data , // what data to pass
            cache: false,
            contentType: false,  // type of data to be sent
            processData: false
        }); 
    });

And this is what I do in my doPost method in my servlet:

int ticket_id = Integer.parseInt(request.getParameter("ID"));

This line is returning a NullPointerException although the data is being sent as seen from the Network section in Chrome.

Please note that I have no problem uploading the file without sending the input type text. i.e. when I have the same form without the tick-id-upload element, and use the same jquery ajax call, the file is uploaded successfully.

Any ideas of what is happening? Many thanks!

Juned Ahsan Juned Ahsan · Accepted Answer · 2013-08-14T10:29:11

You cannot read the multipart/form request params directly by using request.getParameter(). Instead you need to read different parts of the mulitpart request using getPart method. Here is how you can iterate over your multipart request parts:

for (Part part : request.getParts()) {
}

Follow this blog for a detailed example: http://balusc.blogspot.in/2009/12/uploading-files-in-servlet-30.html

Posting FormData object with input types and file NullPointerException

1 Answers