How to upload file asynchronously in grails 3

Question

I am new to grails framework and I am stuck with the following problem:

1. I want to upload project with file and some details like title,description and I have very big stl 3d file. While file upload takes time i want user to go on next page and fill the project rest details like , title description etc.

I am not able to figure out that how i will do this ..I had look in grails aynch programming but i could not figure out how to implement that.

I will really appreciate if someone guides on this

Answer 1

I worked on a form a while back that includes file uploads, which I wanted to be done asynchronously. It took lots of Googling, and unfortunately I do not remember any of the references I used, but here is what I ended up doing.

I included an onchange attribute on the file input that, when a file was selected, would call a javascript function to validate and upload the file asynchronously.

The file input:

<input type="file" name="uploadMedical" id="uploadMedical" onchange="validateAndUpload(this, $(this));" accept=".pdf,.jpg,.jpeg" multiple>

The JavaScript (I did my best to strip out code that is not relevant to your question while still leaving enough to help solve your problem):

function validateAndUpload(input, documentInput){
    var uploadForm = $("#uploadForm");

    // Stop the browser from submitting the form.
    uploadForm.submit(function(event) {
        event.preventDefault();
    });

    // Get the selected files from the input.
    var files = input.files;

    // Create a new FormData object.
    var formData = new FormData();

    // Loop through each of the selected files.
    for (var ii = 0; ii < files.length; ii++) {
        var file = files[ii];

        // Add the file to the request.
        formData.append('supportingDocumentation', file, file.name);
    }

    //Include ID of record to associate this upload with
    formData.append('id', getAppealId());

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        dataType : "html",
        url: url_str,
        data: formData,
        processData: false,
        contentType: false,
         beforeSend:function(){
            //indicate that the file is uploading
        },
        success:function(htmlData){
            //display the new list of files on the page
        },
        error:function(ee){
            //indicate that the upload failed
        },
        complete:function(){
            //reset the file input so more files can be uploaded
        }
    })
}