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.

'<%=submitJobApplicationByAjax%> is that a resource url?? – lucifer Jun 29 '15 at 13:05 — lucifer, Jun 29 '15 at 13:05

score 1 · Accepted Answer · answered Feb 16 '15 at 19:26

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.

score 0 · Answer 2 · answered Feb 20 '15 at 00:32

In your code you are using

A.one("#<portlet:namespace/>appliedPosition").val()

to get the appliedPosition value.

The correct code is to use

A.one("#<portlet:namespace/>appliedPosition").get("value")

when using alloyui.

Furthermore you can read the following.

You can use the following url to learn more about it.

http://yuilibrary.com/yui/docs/io/#uploading-files-in-an-html-form

We can put this code piece directly in our alloyui code.

AUI().ready('module-name1', 'modulename2', function(){

/*
 * This example demonstrates how to configure io to upload files
 * from an HTML form.  This example uses the global events:
 * "io:start" and "io:complete" to handle the transaction and
 * response.  Transaction events can be defined and fired, as well,
 * in the configuration object; but, they are not used in this
 * example.
 */
// Create a YUI instance using the io-upload-iframe sub-module.
YUI().use("io-upload-iframe", function(Y) {
    // Create a configuration object for the file upload transaction.
    // The form configuration should include two defined properties:
    // id: This can be the ID or an object reference to the HTML form
    //     containing the input type="file" elements.
    // upload: Set this property to "true" to indicate this is a file
    //         upload transaction.
    var cfg = {
        method: 'POST',
        form: {
            id: formObject,
            upload: true
        }
    };

    // Define a function to handle the start of a transaction
    function start(id, args) {
      var id = id; // Transaction ID.
      var args = args.foo; // 'bar'
    }

    // Define a function to handle the response data.
    function complete(id, o, args) {
      var id = id; // Transaction ID.
      var data = o.responseText; // Response data.
      var args = args[1]; // 'ipsum'.
    };

    // Subscribe to event "io:start", and pass an object
    // as an argument to the event handler "start".
    Y.on('io:start', start, Y, { 'foo':'bar' });

    // Subscribe to event "io:complete", and pass an array
    // as an argument to the event handler "complete".
    Y.on('io:complete', complete, Y, ['lorem', 'ipsum']);

    // Start the transaction.
    var request = Y.io(uri, cfg);
});

});

I believe we can use A.io.request too. Also you should set

enctype: "multipart/form-data"

in the configuration for the io request.

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

2 Answers2