how so I respond to user while POST is processing?

Question

I have a form that takes a json file and POSTs to a server side process. It's a lengthy process and I want to message it's progress back to the user in real time with multiple messages.

What are my options?

This process can take 10-15 minutes or higher. I am not looking for the answer "AJAX". there is more to it than that.

this is what I got for a form:

    <form method="POST" accept-charset="UTF-8" class="smart-form" id="import-course" enctype="multipart/form-data">
        <fieldset>
            <div class="row">
                <section class="col col-md-12">
                    <label class="input input-file">
                        <input class="button" name="import" type="file">
                    </label>
                </section>
            </div>
        </fieldset>
        <footer>
            <button class="btn btn-primary" id="submit-import-file" type="button">Save</button>
            <a onclick="history.back();" class="btn btn-default">Cancel</a>
        </footer>
     </form>

Here is my ajax:

$(document).ready(function(){
        $("#submit-import-file").on('click',function(){
            console.log('click');
            $('#import-course').hide();
            var formData = new FormData($('#import-course')[0]);
            $.ajax({
                url: '{{URL::route("courses.import")}}',  //Server script to process data
                type: 'POST',
                xhr: function() {  // Custom XMLHttpRequest
                    var myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // Check if upload property exists
                        myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
                    }
                    return myXhr;
                },
                //Ajax events
                success: function(data){
                    console.log(data);
                },
                // Form data
                data: formData,
                //Options to tell jQuery not to process data or worry about content-type.
                cache: false,
                contentType: false,
                processData: false
            });
        });
    });

function progressHandlingFunction(e){
    console.log(e);
}

and here is my server side pay attention to the comments.

$errors = 0;
$file = Input::file('import');
$fileName = $file->getClientOriginalName();
$destinationPath = app_path()."/storage/files/";
$file->move($destinationPath, $fileName);
$course = json_decode(File::get($destinationPath.$fileName));
if(!File::isDirectory($destinationPath.$course->code)){
    File::makeDirectory($destinationPath.$course->code,0777,true,true);
    //message back directory created
}
foreach($course->file as $file){
    if(FileManger->processfile($file)){
        //message back $file->name imported
    }else{
       //message back error importing $file->name
    }
}
return "import complete";

So now.. How do i get the comment areas to be messaged back to the user while this processes. not after.

Learn about asynchronicity, implement a simple JS solution, enjoy - would be my suggested option — kero, May 16 '14 at 15:31
even with AJAX you get 1 response at some point in the process when you use return. This is not what I am looking for. These processes can take up to 10-15 minutes. — Jason Spick, May 16 '14 at 15:34
I have used AJAX to post the data and respond when the process is complete. The problem is if i try to send back multiple messages at points within the process the ajax call stops at the first one. — Jason Spick, May 16 '14 at 15:39

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

You should use Ajax to post the data to the php page without refreshing. The below code will display "Loading" until the ajax call is complete. You could use a gif or something instead. It's more difficult to do a progress bar / percentage complete but you could look at this answer as a reference. PHP Ajax Upload Progress Bar

$.ajax({
  url: "domain.com/url",
  type: "POST", 
  data: data, 
  cache: false,
  beforeSend: function() {
    $('#response').html("Loading");
  },
  success: function(data) {
    $('#response').html(data);
  }
}

edited May 23 '17 at 12:05

Community

1
1

answered May 16 '14 at 15:33

dcclassics

896
1
12
38

I'm not looking for a upload progress bar as there is no way to measure 100%. the file itself only takes seconds to upload. It's the processing of the file that takes a long time. – Jason Spick May 16 '14 at 15:43
Understood, so the code I provided would be sufficient. But you'd have to read a little bit about how to perform Ajax calls, or provide us some code to help you along with it. – dcclassics May 16 '14 at 15:44

score 0 · Answer 2 · answered May 16 '14 at 16:39

You can still use a jquery progressbar. Write the progress of the processing out to the UI and calculate some form of percentage based on the progress through the processing. That of course assumes there is more than one step to the processing of course...! A progress bar that goes from 0 to 100% in one step isn't terribly useful.

how so I respond to user while POST is processing?

2 Answers2