Admin/Extensions/ajax_file_upload

AJAX File Upload Extension

This extension will enable an existing input[type=file] element to upload files through AJAX. The upload method can be invoked either manually by calling the "upload" function or automatically once the file is selected. A "validate" event is triggered before upload starts so that you can validate the selected file before it is uploaded and stop the procedure if needed.

Currently the module supports the basic upload functionality but you can add extra logic on your own by following code examples in the official page of the plugin.

The "auto" option is enabled by default which means that the extension will automatically trigger the upload operation when the user selects a file.

https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Important: If you need to support older versions of Internet Explorer you should use the automatic upload mode because the manual mode uses the JavaScript File API and this is supported from IE 10+.

Options

URL | data-ajax_upload_file-url | String | Required

Define the upload URL that will handle the file upload.

Auto | data-ajax_upload_file-auto | Boolean | Optional

Define whether the upload process will be started automatically after the user selects a file.

Events

// Add your validation rules, triggered before upload (Manual Mode - Requires JS file API support).
$('#upload-file').on('validate', function(event, file) {});

// Triggered when server responds to upload request (Manual + Auto Mode).
$('#upload-file').on('upload', function(event, response) {});

Methods

// Trigger the selected file validation, returns a bool value.
$('#upload-file').validate();

// Trigger the file upload, callback argument is optional.
$('#upload-file').upload(callback);

Example

Automatic Upload

The upload process will be triggered automatically after the user selects a file.

<!-- HTML -->
<input id="upload-file" type="file" data-gx-extension="ajax_file_upload"
            data-ajax_file_upload-url="http://url/to/upload-script.php" />

<!-- JavaScript -->
<script>
    $('#upload-file').on('validate', function(event, file) {
         // Validation Checks (Only IE 10+) ...
         return true; // Return true for success or false for failure - will stop the upload.
    });

    $('#upload-file').on('upload', function(event, response) {
         // The "response" parameter contains the server's response information.
    });
</script>

Manual Upload

The upload process needs to be triggered through JavaScript as shown in the following example.

<!-- HTML -->
<input id="upload-file" type="file" data-gx-extension="ajax_file_upload"
        data-ajax_file_upload-url="http://url/to/upload-script.php"
        data-ajax_file_upload-auto="false" />
<button id="upload-file-button">Trigger Upload</button>

<!-- JavaScript -->
<script>
    $('#upload-file-button').on('click', function() {
         $('#upload-file').upload(function(response) {
             // Callback Function (Optional)
         });
    });
</script>