/** * Sami's AJAX uploader v.1.1 * Handles ajax uploads * NOTE: requires jQuery * @param object element - The object that contains the plugin setings * @author Samuil Banti - https://samiwell.eu * @copyright (C) 2016 - Samuil Banti * @license GNU/GPLv3 https://www.gnu.org/licenses/gpl-3.0.html * @return false. This plugin is focused on the result in the callback methods. */ (function( $ ){ $.fn.samis_uploader = function( options ) { // Create some defaults, extending them with any options that were provided var settings = $.extend( { csrf_token: false, // (Optional) You may set the value of the CSRF token input as it should be passed to the upload URL. upload_url: false, // The URL that will handle the uploads. content_type: false, // Add JSON or something else that you expect as a result. data_type: false, // Set the dataType. Most likely JSON. success_function: false, // The callback function for success. Gets as parameter the response of the upload URL. progress_function: false, // The callback function that get's as parameter the percent of the upload. before_function: false, // The callback function to execute before the upload. error_function: false, // The callback function to execute in case of HTTP error. max_size: 10, // Max upload size in MB (set to false for no frontend limit) max_size_error: {success: false, msg: "Max size is 10 MB"} // The response for max file size }, options); return this.change(function() { $.fn.samis_uploader.settings = settings; uploader($(this)); }); function uploader(element) { var file_contents = element.get(0).files[0]; var formData = new FormData(); formData.append(element.attr('name'), file_contents); if (settings.max_size) { const fsize = file_contents.size; const file = Math.round((fsize / 1024 / 1024)); if (file >= settings.max_size) { settings.error_function(settings.max_size_error); return; } } $.ajax({ headers: { 'X-CSRF-Token': settings.csrf_token }, xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; if(settings.progress_function) { settings.progress_function(Math.floor(percentComplete*100)); } } }, false); xhr.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with download progress } }, false); return xhr; }, url: settings.upload_url, //Ajax events beforeSend: function (e) { if(settings.before_function) { settings.before_function(e); } }, success: function (e) { if(settings.success_function) { settings.success_function(e); } }, error: function (e) { if(settings.error_function) { settings.error_function(e); } }, // Form data data: formData, type: 'POST', //Options to tell jQuery not to process data or worry about content-type. cache: false, contentType: settings.content_type, dataType: settings.data_type, processData: false }); element.val(''); // Clear the input value so that the same file could be uploaded return false; } }; })( jQuery );