how do i send file and data using alloy ui ajax call in liferay

Question

I have following code snippet for ALLOY UI Script :

AUI().use('aui-base','aui-io-request', function(A){          
         A.io.request('<%=submitJobApplicationByAjax%>',{
             dataType: 'json',
             method: 'POST',
             data:{                  
                "appliedPosition": A.one("#<portlet:namespace/>appliedPosition").val(),
                "fullName" : A.one("#<portlet:namespace/>fullName").val(),


             },
             on: {
             success: function() {

                 }
             }
         });
    });

And following form :

<input class="span12"  type="text" name="<portlet:namespace/>fullName" id="<portlet:namespace/>fullName"                            value="${fullName}" required="required" pattern=".*\S+.*" />
<input class="span12 file_up_btn" type="file"                               name="<portlet:namespace/>uploadResume" required="required"                             id="<portlet:namespace/>uploadRes" onclick="<portlet:namespace/>clearErrorMsg()" />

How do I send file and data together with alloy ui ajax call in liferay.

Answer 1

You can use FormData for sending the files via AJAX,

var file_data = $("#fileName").prop("files")[0];
// Creating object of FormData class
var formData = new FormData();
// Appending parameter named file with properties of file_field to form_data
formData.append("fileName", file_data);
formData.append("appliedPosition", "someValue");
formData.append("fullName", "someValue");
A.io.request('<%=submitJobApplicationByAjax%>',{
         dataType: 'json',
         method: 'POST',
         data: formData,
         .........
         .........

However, This solution will not work for IE9.

NOTE: You can also check the AUI Liferay.Upload if you are intrested to use AUI.