/* * jQuery XHR upload plugin * http://github.com/maca * * Copyright 2011, Macario Ortega * Dual licensed under the MIT or GPL Version 2 licenses. * */ (function($){ $.fn.ajaxyUpload = function(opts) { var settings = { error : $.noop, success : $.noop, start : $.noop }; return $(this).each(function(){ var fileInput = $(this); if (opts) { $.extend(settings, opts); } // xhrUpload callback, this is triggered below only if the browser has hxr upload // capabilities fileInput.bind('xhrUpload', function(){ var self = this; $.each(this.files, function(index, file){ var advance = $('
').addClass('inline-upload-advance'); var pBar = $('
').addClass('inline-upload-progress-bar').append(advance); if ((advance.css('height').match(/\d/)[0]|0) == 0) { advance.css('height', '10px'); }; advance.css('background-color', advance.css('background-color') || '#33a'); advance.css('width', '0px'); if ((pBar.css('width').match(/\d/)[0]|0) == 0) { pBar.css('width', '200px'); }; pBar.css('background-color', pBar.css('background-color') || '#fff'); pBar.css('border', pBar.css('border') || '1px solid #BBB'); fileInput.after(pBar); $.ajax({ type : "POST", url : settings.url, xhr : function(){ var xhr = $.ajaxSettings.xhr(); xhr.upload.onprogress = function(rpe) { var progress = (rpe.loaded / rpe.total * 100 >> 0) + '%'; advance.css('width', progress); }; xhr.onloadstart = function(){ settings.start.apply(self); }; return xhr; }, beforeSend : function(xhr){ // here we set custom headers for the rack middleware, first one tells the Rack app we are doing // an xhr upload, the two others are self explanatory xhr.setRequestHeader("X-XHR-Upload", "1"); xhr.setRequestHeader("X-File-Name", file.name || file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); }, success : function(data, status, xhr) { settings.success.apply(self, [data, status, xhr]); }, error : function(xhr, text, error) { if (xhr.status == 422) { settings.error.apply(self, [$.parseJSON(xhr.responseText)]); } else { settings.error.apply(self); }; }, complete : function(xhr, status) { fileInput.after(fileInput.clone()).remove(); settings.complete.apply(self); pBar.remove(); }, contentType : "application/octet-stream", dataType : "json", processData : false, data : file, }); }); }); // set an iframeUpload callback as fallback for older browsers fileInput.bind('iframeUpload', function(){ var input = $("").attr('name', $(this).attr('name')); var iframe = $("