File Upload Progress in modal box.

Currently, I am uploading file using php post method without any ajax request in laravel as follows:

        $extension = $request->file('import_file')->getClientOriginalExtension(); 
        $filename = uniqid().'_'.time().'_'.date('Ymd').'.'.$extension;
        Storage::disk('local')->putFileAs('/files/', $request->file('import_file'), $filename);

Without any extra code I can see uploading percentage at bottom left corner.

Now, I have question, how can I show this uploading message in modal box. I know about the modal box, but I don't know in which variable, this uploading value is assigned.

Inquisitive

8 years ago

Level 9

It will be little difficult to give the exact answer without looking at your form, but I am trying to provide you some idea.

$(document).ready(function(){
        $('form').submit(function(event){

            event.preventDefault();
            var formData = new FormData($(this)[0]);
            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') },
                url: "{{url('abc/xyz')}}",
                data: formData,
                type: 'post',
                cache: false,
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    $("#modal_id").modal('show');
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = parseInt(percentComplete * 100);
                            $('.uploadProgressBar').attr('aria-valuenow',percentComplete).css('width',percentComplete + '%').text(percentComplete + '%');
                            if (percentComplete === 100) {
                                $("#modal_id").modal('hide');
                            }

                        }
                    }, false);

                    return xhr;
                },
                processData: false,
                contentType: false,
            });

        });
    });

And modal box:

<div class="modal fade" id="modal_id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header bg-success">
        <h5 class="modal-title text-white" id="exampleModalLabel">Uploading</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <div class="progress" style="height: 2em;">
            <div class="progress-bar uploadProgressBar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary uploading_close_btn" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>