Web App AJAX with File Upload

[Lynda-S]

I have a Web App input form and the form has the ability for a file to be uploaded. I am using AJAX to submit the form. The form and attached file submits fine. The problem is I need to be able to return the data of the web app, specifically the file name. I know when a file is uploaded random numbers are added to ensure each file is unique. I need this data returned so I can then take the file name and do something with it.

Here is my code:

$(function() {

    $('.upload').click(function(){

        var formData = new FormData($('form')[0]);

        $.ajax({

            url: '/CustomContentProcess.aspx?CCID=35265&OID={module_oid}&OTYPE={module_otype}',

            type: 'POST',

            xhr: function() {

                myXhr = $.ajaxSettings.xhr();

                if(myXhr.upload){

                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);

                }

                return myXhr;

            },

            success: function(results){

                console.log(results);

            },

            data: formData,

            cache: false,

            contentType: false,

            processData: false

        });

    });

    function progressHandlingFunction(e){

    if(e.lengthComputable){

            var progressBar = document.getElementById("progress");

            progressBar.max = e.total;

               progressBar.value = e.loaded;

        }

    }

});

Currently, upon success, the data that is displayed is the the HTML code of the web page that has the form.

How do I modify my code to return the submitted web app data, namely the file name as it is upload?

[Robert_K__Bell · Accepted solution]

I thought there was a way to render the new items' detail page in the POST response (relating to the PageID parameter on the submit action?), but I couldn't find it.

If the app items don't Require Approval, you can use the {module_webapps} tag in the content of the response to list the latest few items from the app and identify the one just submitted by a unique attribute or token.

A slightly different approach: after submit, run a search on the unique token. I prefer to do it this way because we can get back a proper JSON response containing exactly one item, and we need not rely on the presence (and correct collection naming) of the {module_webapps} tag in the response.

[Lynda-S]

I was incorrect in my original question. It is actually returning the Custom Content Confirmation Layout page. I used your idea of inserting the latest {module_webapps} and pulling the most recent item. In a quick test it works great.

I will look into doing the unique token idea as that does sound better.

Thank you for the help and ideas!