How to get file name and other requested parameter

Question

I am using ajax to submit my jsp page data without refreshing the page in liferay custom portlet.

I am facing two problems with that:

1. When I am calling Ajax function to resource server method its getting all ajax data in that method but when everything is done then on success of that I can't get any data in return. So how can I get some data in return after the Ajax function is successfully executed.

2. I have used simple HTML file upload control in my form and when I am using simple submit method then am calling upload request to get all attribute of file and also uploading the file with the upload request, but in case of Ajax I have to do everything with resource action in my resource server method in action class and I am getting all null values with upload request so how can I solve this problem?

I am providing my one sample Ajax call and my resource server method

This is my simple ajax call in jsp page

<script type="text/javascript">
    function addToDo(addToDo) {
        var todo = document.getElementById('toDo').value;

        alert("");

        var adv_name = document.getElementById('advertise_name').value;
        var keywords = document.getElementById('keywords').value;
        var adv_url = document.getElementById('adv_url').value;
        var fileUpload = document.getElementById('fileUpload').value;

        var mediatype= $('#mediatype option:selected').val();

        $.ajax({
            url :addToDo,            
            data: {
                "todo":todo,
                "adv_name":adv_name,
                "mediatype":mediatype,
                "keywords":keywords,
                "adv_url":adv_url,
                "fileUpload":fileUpload,
                "CMD":"addToDo"
            },
            type: "GET",
            timeout: 20000,
            dataType: "text",
            success: function(data) {
                alert(data);
                //when i alert this data..its always null
            }
        });
    }
</script>

following is my upload control:

<label>Browse</label>
<input name="fileUpload" id="fileUpload" type="file" />
<span id="restError2" style="color: #C62626;" class="help-block"></span>

on one button I am calling above ajax method and which redirects to the resorce server method as follows:

@Override
public void serveResource(ResourceRequest request, ResourceResponse response){
    if(request.getParameter("CMD").equals("addToDo")) {
        System.out.println("came here for add");

        // here am converting this resource request to uploadportletrequest because i have enctype="multipart/form-data"
        UploadPortletRequest uploadReq = PortalUtil.getUploadPortletRequest(request);

        sourceFileName = uploadReq.getFileName("fileUpload");// uploaded
        // filename                 

        advertise_name = uploadReq.getParameter("advertise_name"); //this value getting null
        adv_link = uploadReq.getParameter("adv_url"); //this value getting null
        keyword = uploadReq.getParameter("keywords"); //this value getting null
        String resourceID = request.getResourceID();

        System.out.println(resourceID);
    }
}

Answer 1

For the first question see this SO answer.

For the second question, I would say you are missing prefix for your parameters.

so try changing your ajax call to (i'm changing only fields that you mention in your serveResource method getting null)

        $.ajax({
        url :addToDo,            
        data: {
            "todo":todo,
            "<portlet:namespace />adv_name":adv_name,
            "mediatype":mediatype,
            "<portlet:namespace />keywords":keywords,
            "<portlet:namespace />adv_url":adv_url,
            "fileUpload":fileUpload,
            "CMD":"addToDo"
        },
        type: "GET",
        timeout: 20000,
        dataType: "text",
        success: function(data) {
            alert(data);
            //when i alert this data..its always null
        }
    });

and be sure to have

<%@ taglib prefix="portlet" uri="http://java.sun.com/portlet" %>

in top of your jsp.

Also note that in your serveResource method you are having

advertise_name = uploadReq.getParameter("advertise_name");

but sending "adv_url":adv_url,, notice the names.

Another thing to note is that you are using GET instead of POST.

Yet another thing to have in mind is that uploading files using ajax in not supported in all browsers. For list of supported browsers see this.