Delay after uploading large files with Jquery BlueImp uploader

Asked
Active3 hr before
Viewed126 times

9 Answers

fileslargedelayuploading
90%

If you are only interested to see whether all downloads have finished and display to the user that something is still going on, you may want to check out stop / done events, or also fileupload('active'), see here: Finish of Multiple file upload,One possibility is to monitor the upload status and set JavaScript timeout or counter in uploading event that will cancel the upload after reached time limit., Thanks for replying. The upload process itself is very fast, the problem is after the upload has "completed". A "move file" operation happens instantly on the command line.. So what is actually happening after the upload to cause this delay? – BSUK Apr 5 '17 at 2:03 ,Once the uploads have completed on the client side, the UI progress bar reaches 100% and remains so whilst the server is processing the files.

The first problem I encountered was that there doesn’t appear to be a blueimp callback for the point when the file uploads have completed on the client side, and the server processing begins. So I worked around this by creating a function (in main.js) to display my custom “processing div” after data.loaded matches data.total:

$('#fileupload').bind('fileuploadprogressall', function(e, data) {
   console.log(data);
   if (data.loaded == data.total) {
      setTimeout(function() {
         $("#processwarn").fadeTo(300, 1);
      }, 3000);
   }
})
load more v
88%

When I click on "Select File to Upload" (i.e. input type=file) there is a delay between the time I clicked the button and selected the file to displaying selected file next to the button. Is the browser trying load the file into browser ?? Why is there a delay.,Setting the width and height of the file input element fixes the issue in both ie8 and ie9.,Once the uploads have completed on the client side, the UI progress bar reaches 100% and remains so whilst the server is processing the files.,From there it is a simple matter to decide the height of your element.

$("button").click(function() {
  var spinner = $("<img />", {
    "id": "spinner",
    "src": "data:image/gif;charset=binary;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
});
  $(this).after(spinner).nextAll("input:first").click();
  $(window).one("focus", function() {
    $("#spinner").detach()
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>choose file</button>
<input type="file" style="opacity:0;" />
load more v
72%

Loading ,EDIT2: It return after 600 sec. "The uploaded file exceeds the upload_max_filesize directive in php.ini",I'm using: jQuery File Upload 10.7.0 PHP 7.3 Safari,@blueimp - I also edited your sessions function to work with my DB sessions and uploading. to prevent unauthorized users from accessing the JSON output.

file_uploads = On
memory_limit = 2 G
upload_max_filesize = 2 G
post_max_size = 2 G
max_execution_time = 1200
load more v
65%

With that in mind, let’s create a basic (no Vue or React here!) JavaScript file upload example in a WordPress plugin to learn about the FileReader API.,Meet the JavaScript FileReader API. It’s an easy way to read and process a file directly in the browser. The JavaScript FileReader API now has major browser support including Chrome, Firefox, Safari, and even Internet Explorer 10.,Since the FileReader API is baked into JavaScript, the HTML side of things is easy and relies on a basic HTML form with a file input element:,With the upload form in place we should see a basic file upload form when we visit the WordPress dashboard:

Since the FileReader API is baked into JavaScript, the HTML side of things is easy and relies on a basic HTML form with a file input element:

<form>
   <input type="file" name="dbi_import_file" /><br><br>
   <input type="submit" value="Upload" />
</form>
load more v
75%

Note that IIS Server by default sets file size limit which can also cause issues when large files are uploaded:, Reveal App Empower everyone in your organization to use data to make smarter business decisions ,Do you have a suggestion as to how I can trap the onError event and end the upload when it times out?,My MVC4 project uses an igUpload control for images and videos.  With files larger than 10MB the upload will typically stop at some point and I have to cancel.

Eventually, a server side error will be thrown:

System.Web.HttpException(0x80004005): Request timed out.
40%

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads., Preview images, audio and video: A preview of image, audio and video files can be displayed before uploading with browsers supporting the required APIs.,The File Upload plugin is regularly tested with the latest browser versions and supports the following minimal versions:, JavaScript Load Image library v2+: Required for the image previews and resizing functionality.

npm install blueimp - file - upload
load more v
22%

You 'd better check $_FILES structure and values throughly.The following code cannot cause any errors absolutely.Example:<?phpheader('
Content - Type: text / plain;
charset = utf - 8 ');try {        // Undefined | Multiple Files | $_FILES Corruption Attack    // If this request falls under any of them, treat it invalid.    if (        !isset($_FILES['
upfile ']['
error ']) ||        is_array($_FILES['
upfile ']['
error '])    ) {        throw new RuntimeException('
Invalid parameters.
');    }    // Check $_FILES['
upfile ']['
error '] value.    switch ($_FILES['
upfile ']['
error ']) {        case UPLOAD_ERR_OK:            break;        case UPLOAD_ERR_NO_FILE:            throw new RuntimeException('
No file sent.
');        case UPLOAD_ERR_INI_SIZE:        case UPLOAD_ERR_FORM_SIZE:            throw new RuntimeException('
Exceeded filesize limit.
');        default:            throw new RuntimeException('
Unknown errors.
');    }    // You should also check filesize here.     if ($_FILES['
upfile ']['
size '] > 1000000) {        throw new RuntimeException('
Exceeded filesize limit.
');    }    // DO NOT TRUST $_FILES['
upfile ']['
mime '] VALUE !!    // Check MIME Type by yourself.    $finfo = new finfo(FILEINFO_MIME_TYPE);    if (false === $ext = array_search(        $finfo->file($_FILES['
upfile ']['
tmp_name ']),        array(            '
jpg ' => '
image / jpeg ',            '
png ' => '
image / png ',            '
gif ' => '
image / gif ',        ),        true    )) {        throw new RuntimeException('
Invalid file format.
');    }    // You should name it uniquely.    // DO NOT USE $_FILES['
upfile ']['
name '] WITHOUT ANY VALIDATION !!    // On this example, obtain safe unique name from its binary data.    if (!move_uploaded_file(        $_FILES['
upfile ']['
tmp_name '],        sprintf('. / uploads / % s. % s ',            sha1_file($_FILES['
upfile ']['
tmp_name ']),            $ext        )    )) {        throw new RuntimeException('
Failed to move uploaded file.
');    }    echo '
File is uploaded successfully.
';} catch (RuntimeException $e) {    echo $e->getMessage();}?>
load more v
60%

The Uploader sends the large file split into small chunks and transmits to the server using AJAX. You can also pause, resume, and retry the failed chunk file.,The following sample specifies the chunk upload delay with 3000 milliseconds and the retry count is 5. The failure event is triggered as the wrong saveUrl is used.,This pause and resume features available only when the chunk upload is enabled.,The following example explains about chunk upload with cancel support.

import {
   Uploader
} from '@syncfusion/ej2-inputs';

// initialize Uploader component
let uploadObject: Uploader = new Uploader({
   asyncSettings: {
      saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
      removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
      // split the files into chunks of the size 102400 bytes
      chunkSize: 102400
   }
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');
load more v
48%

boolean, whether to display the file browse button. Defaults to true.,boolean, whether to display the file caption. Defaults to true.,boolean, whether to display the file remove/clear button. Defaults to true.,boolean, whether to display the file preview. Defaults to true.

All the options to the bootstrap file input plugin can be passed typically via the javascript object at plugin initialization. Depending on your need, these options can also be configured as HTML5 data attributes on the native file input (on which the plugin is initialized). Most of the plugin options can be retrieved at runtime by the following method.

var plugin = $('#file-input).data('
      fileinput ');
      console.log(plugin.initialPreview); // get initialPreview
load more v

Other "files-large" queries related to "Delay after uploading large files with Jquery BlueImp uploader"