app/javascript/js/libs/jquery.html5-fileupload.js
/*
* jQuery HTML5 File Upload
*
* Author: timdream at gmail.com
* Web: http://timc.idv.tw/html5-file-upload/
*
* Ajax File Upload that use real xhr,
* built with getAsBinary, sendAsBinary, FormData, FileReader, ArrayBuffer, BlobBuilder and etc.
* works in Firefox 3, Chrome 5, Safari 5 and higher
*
* Image resizing and uploading currently works in Fx 3 and up, and Chrome 9 (dev) and up only.
* Extra settings will allow current Webkit users to upload the original image
* or send the resized image in base64 form.
*
* Usage:
* $.fileUploadSupported // a boolean value indicates if the browser is supported.
* $.imageUploadSupported // a boolean value indicates if the browser could resize image and upload in binary form.
* $.fileUploadAsBase64Supported // a boolean value indicate if the browser upload files in based64.
* $.imageUploadAsBase64Supported // a boolean value indicate if the browser could resize image and upload in based64.
* $('input[type=file]').fileUpload(ajaxSettings); //Make a input[type=file] select-and-send file upload widget
* $('#any-element').fileUpload(ajaxSettings); //Make a element receive dropped file
* //TBD $('form#fileupload').fileUpload(ajaxSettings); //Send a ajax form with file
* //TBD $('canvas').fileUpload(ajaxSettings); //Upload given canvas as if it's an png image.
*
* ajaxSettings is the object contains $.ajax settings that will be passed to.
* Available extended settings are:
* fileType:
* regexp check against filename extension; You should always checked it again on server-side.
* e.g. /^(gif|jpe?g|png|tiff?)$/i for images
* fileMaxSize:
* Maxium file size allowed in bytes. Use scientific notation for converience.
* e.g. 1E4 for 1KB, 1E8 for 1MB, 1E9 for 10MB.
* If you really care the difference between 1024 and 1000, use Math.pow(2, 10)
* fileError(info, textStatus, textDescription):
* callback function when there is any error preventing file upload to start,
* $.ajax and ajax events won't be called when error.
* Use $.noop to overwrite default alert function.
* imageMaxWidth, imageMaxHeight:
* Use any of the two settings to enable client-size image resizing.
* Image will be resized to fit into given rectangle.
* File size and type limit checking will be ignored.
* allowUploadOriginalImage:
* Set to true if you accept original image to be uploaded as a fallback
* when image resizing functionality is not availible (such as Webkit browsers).
* File size and type limit will be enforced.
* allowDataInBase64:
* Alternatively, you may wish to resize the image anyway and send the data
* in base64. The data will be 133% larger and you will need to process it further with
* server-side script.
* This setting might work with browsers which could read file but cannot send it in original
* binary (no known browser are designed this way though)
* forceResize:
* Set to true will cause the image being re-sampled even if the resized image
* has the same demension as the original one.
* imageType:
* Acceptable values are: 'jpeg', 'png', or 'auto'.
*
* TBD:
* ability to change settings after binding (you can unbind and bind again as a workaround)
* multipole file handling
* form intergation
*
*/
(function($) {
// Don't do logging if window.log function does not exist.
var log = window.console.log || $.noop;
// jQuery.ajax config
var config = {
fileError: function (info, textStatus, textDescription) {
window.alert(textDescription);
}
};
// Feature detection
// Read as binary string: FileReader API || Gecko-specific function (Fx3)
var canReadAsBinaryString = (window.FileReader || window.File.prototype.getAsBinary);
// Read file using FormData interface
var canReadFormData = !!(window.FormData);
// Read file into data: URL: FileReader API || Gecko-specific function (Fx3)
var canReadAsBase64 = (window.FileReader || window.File.prototype.getAsDataURL);
var canResizeImageToBase64 = !!(document.createElement('canvas').toDataURL);
var canResizeImageToBinaryString = canResizeImageToBase64 && window.atob;
var canResizeImageToFile = !!(document.createElement('canvas').mozGetAsFile);
// Send file in multipart/form-data with binary xhr (Gecko-specific function)
// || xhr.send(blob) that sends blob made with ArrayBuffer.
var canSendBinaryString = (
(window.XMLHttpRequest && window.XMLHttpRequest.prototype.sendAsBinary)
|| (window.ArrayBuffer && window.BlobBuilder)
);
// Send file as in FormData object
var canSendFormData = !!(window.FormData);
// Send image base64 data by extracting data: URL
var canSendImageInBase64 = !!(document.createElement('canvas').toDataURL);
var isSupported = (
(canReadAsBinaryString && canSendBinaryString)
|| (canReadFormData && canSendFormData)
);
var isImageSupported = (
canReadAsBase64 && (
(canResizeImageToBinaryString && canSendBinaryString)
|| (canResizeImageToFile && canSendFormData)
)
);
var isSupportedInBase64 = canReadAsBase64;
var isImageSupportedInBase64 = canReadAsBase64 && canResizeImageToBase64;
var dataURLtoBase64 = function (dataurl) {
return dataurl.substring(dataurl.indexOf(',')+1, dataurl.length);
}
// Step 1: check file info and attempt to read the file
// paramaters: Ajax settings, File object
var handleFile = function (settings, file) {
var info = {
// properties of standard File object || Gecko 1.9 properties
type: file.type || '', // MIME type
size: file.size || file.fileSize,
name: file.name || file.fileName
};
settings.resizeImage = !!(settings.imageMaxWidth || settings.imageMaxHeight);
if (settings.resizeImage && !isImageSupported && settings.allowUploadOriginalImage) {
log('WARN: Fall back to upload original un-resized image.');
settings.resizeImage = false;
}
if (settings.resizeImage) {
settings.imageMaxWidth = settings.imageMaxWidth || Infinity;
settings.imageMaxHeight = settings.imageMaxHeight || Infinity;
}
if (!settings.resizeImage) {
if (settings.fileType && settings.fileType.test) {
// Not using MIME types
if (!settings.fileType.test(info.name.substr(info.name.lastIndexOf('.')+1))) {
log('ERROR: Invalid Filetype.');
settings.fileError.call(this, info, 'INVALID_FILETYPE', 'Invalid filetype.');
return;
}
}
if (settings.fileMaxSize && file.size > settings.fileMaxSize) {
log('ERROR: File exceeds size limit.');
settings.fileError.call(this, info, 'FILE_EXCEEDS_SIZE_LIMIT', 'File exceeds size limit.');
return;
}
}
if (!settings.resizeImage && canReadFormData) {
log('INFO: Bypass file reading, insert file object into FormData object directly.');
handleForm(settings, 'file', file, info);
} else if (window.FileReader) {
log('INFO: Using FileReader to do asynchronously file reading.');
var reader = new FileReader();
reader.onerror = function (ev) {
if (ev.target.error) {
switch (ev.target.error) {
case 8:
log('ERROR: File not found.');
settings.fileError.call(this, info, 'FILE_NOT_FOUND', 'File not found.');
break;
case 24:
log('ERROR: File not readable.');
settings.fileError.call(this, info, 'IO_ERROR', 'File not readable.');
break;
case 18:
log('ERROR: File cannot be access due to security constrant.');
settings.fileError.call(this, info, 'SECURITY_ERROR', 'File cannot be access due to security constrant.');
break;
case 20: //User Abort
break;
}
}
}
if (!settings.resizeImage) {
if (canSendBinaryString) {
reader.onloadend = function (ev) {
var bin = ev.target.result;
handleForm(settings, 'bin', bin, info);
};
reader.readAsBinaryString(file);
} else if (settings.allowDataInBase64) {
reader.onloadend = function (ev) {
handleForm(
settings,
'base64',
dataURLtoBase64(ev.target.result),
info
);
};
reader.readAsDataURL(file);
} else {
log('ERROR: No available method to extract file; allowDataInBase64 not set.');
settings.fileError.call(this, info, 'NO_BIN_SUPPORT_AND_BASE64_NOT_SET', 'No available method to extract file; allowDataInBase64 not set.');
}
} else {
reader.onloadend = function (ev) {
var dataurl = ev.target.result;
handleImage(settings, dataurl, info);
};
reader.readAsDataURL(file);
}
} else if (window.File.prototype.getAsBinary) {
log('WARN: FileReader does not exist, UI will be blocked when reading big file.');
if (!settings.resizeImage) {
try {
var bin = file.getAsBinary();
} catch (e) {
log('ERROR: File not readable.');
settings.fileError.call(this, info, 'IO_ERROR', 'File not readable.');
return;
}
handleForm(settings, 'bin', bin, info);
} else {
try {
var bin = file.getAsDataURL();
} catch (e) {
log('ERROR: File not readable.');
settings.fileError.call(this, info, 'IO_ERROR', 'File not readable.');
return;
}
handleImage(settings, dataurl, info);
}
} else {
log('ERROR: No available method to extract file; this browser is not supported.');
settings.fileError.call(this, info, 'NOT_SUPPORT', 'ERROR: No available method to extract file; this browser is not supported.');
}
};
// step 1.5: inject file into <img>, paste the pixels into <canvas>,
// read the final image
var handleImage = function (settings, dataurl, info) {
var img = new Image();
img.onerror = function () {
log('ERROR: <img> failed to load, file is not a supported image format.');
settings.fileError.call(this, info, 'FILE_NOT_IMAGE', 'File is not a supported image format.');
};
img.onload = function () {
var ratio = Math.max(
img.width/settings.imageMaxWidth,
img.height/settings.imageMaxHeight,
1
);
var d = {
w: Math.floor(Math.max(img.width/ratio, 1)),
h: Math.floor(Math.max(img.height/ratio, 1))
}
log(
'INFO: Original image size: ' + img.width.toString(10) + 'x' + img.height.toString(10)
+ ', resized image size: ' + d.w + 'x' + d.h + '.'
);
if (!settings.forceResize && img.width === d.w && img.height === d.h) {
log('INFO: Image demension is the same, send the original file.');
if (canResizeImageToBinaryString) {
handleForm(
settings,
'bin',
window.atob(dataURLtoBase64(dataurl)),
info
);
} else if (settings.allowDataInBase64) {
handleForm(
settings,
'base64',
dataURLtoBase64(dataurl),
info
);
} else {
log('ERROR: No available method to send the original file; allowDataInBase64 not set.');
settings.fileError.call(this, info, 'NO_BIN_SUPPORT_AND_BASE64_NOT_SET', 'No available method to extract file; allowDataInBase64 not set.');
}
return;
}
var canvas = document.createElement('canvas');
canvas.setAttribute('width', d.w);
canvas.setAttribute('height', d.h);
canvas.getContext('2d').drawImage(
img,
0,
0,
img.width,
img.height,
0,
0,
d.w,
d.h
);
if (!settings.imageType || settings.imageType === 'auto') {
if (info.type === 'image/jpeg') settings.imageType = 'jpeg';
else settings.imageType = 'png';
}
var ninfo = {
type: 'image/' + settings.imageType,
name: info.name.substr(0, info.name.indexOf('.')) + '.resized.' + settings.imageType
};
if (canResizeImageToFile && canSendFormData) {
// Gecko 2 (Fx4) non-standard function
var nfile = canvas.mozGetAsFile(
ninfo.name,
'image/' + settings.imageType
);
ninfo.size = file.size || file.fileSize;
handleForm(
settings,
'file',
nfile,
ninfo
);
} else if (canResizeImageToBinaryString && canSendBinaryString) {
// Read the image as DataURL, convert it back to binary string.
var bin = window.atob(dataURLtoBase64(canvas.toDataURL('image/' + settings.imageType)));
ninfo.size = bin.length;
handleForm(
settings,
'bin',
bin,
ninfo
);
} else if (settings.allowDataInBase64 && canResizeImageToBase64 && canSendImageInBase64) {
handleForm(
settings,
'base64',
dataURLtoBase64(canvas.toDataURL('image/' + settings.imageType)),
ninfo
);
} else {
log('ERROR: No available method to extract image; allowDataInBase64 not set.');
settings.fileError.call(this, info, 'NO_BIN_SUPPORT_AND_BASE64_NOT_SET', 'No available method to extract file; allowDataInBase64 not set.');
}
}
img.src = dataurl;
}
// Step 2: construct form data and send the file
// paramaters: Ajax settings, File object, binary string of file || null, file info assoc array
var handleForm = function (settings, type, data, info) {
if (canSendFormData && type === 'file') {
// FormData API saves the day
log('INFO: Using FormData to construct form.');
var formdata = new FormData();
formdata.append('Filedata', data);
// Prevent jQuery form convert FormData object into string.
settings.processData = false;
// Prevent jQuery from overwrite automatically generated xhr content-Type header
// by unsetting the default contentType and inject data only right before xhr.send()
settings.contentType = null;
settings.__beforeSend = settings.beforeSend;
settings.beforeSend = function (xhr, s) {
s.data = formdata;
if (s.__beforeSend) return s.__beforeSend.call(this, xhr, s);
}
//settings.data = formdata;
} else if (canSendBinaryString && type === 'bin') {
log('INFO: Concat our own multipart/form-data data string.');
// A placeholder MIME type
if (!info.type) info.type = 'application/octet-stream';
if (/[^\x20-\x7E]/.test(info.name)) {
log('INFO: Filename contains non-ASCII code, do UTF8-binary string conversion.');
info.name_bin = unescape(encodeURIComponent(info.name));
}
//filtered out non-ASCII chars in filenames
// info.name = info.name.replace(/[^\x20-\x7E]/g, '_');
// multipart/form-data boundary
var bd = 'xhrupload-' + parseInt(Math.random()*(2 << 16));
settings.contentType = 'multipart/form-data; boundary=' + bd;
var formdata = '--' + bd + '\n' // RFC 1867 Format, simulate form file upload
+ 'content-disposition: form-data; name="Filedata";'
+ ' filename="' + (info.name_bin || info.name) + '"\n'
+ 'Content-Type: ' + info.type + '\n\n'
+ data + '\n\n'
+ '--' + bd + '--';
if (window.XMLHttpRequest.prototype.sendAsBinary) {
// Use xhr.sendAsBinary that takes binary string
log('INFO: Pass binary string to xhr.');
settings.data = formdata;
} else {
// make a blob
log('INFO: Convert binary string into Blob.');
var buf = new ArrayBuffer(formdata.length);
var view = new Uint8Array(buf);
$.each(
formdata,
function (i, o) {
view[i] = o.charCodeAt(0);
}
);
var bb = new BlobBuilder();
bb.append(buf);
var blob = bb.getBlob();
settings.processData = false;
settings.__beforeSend = settings.beforeSend;
settings.beforeSend = function (xhr, s) {
s.data = blob;
if (s.__beforeSend) return s.__beforeSend.call(this, xhr, s);
};
}
} else if (settings.allowDataInBase64 && type === 'base64') {
log('INFO: Concat our own multipart/form-data data string; send the file in base64 because binary xhr is not supported.');
// A placeholder MIME type
if (!info.type) info.type = 'application/octet-stream';
// multipart/form-data boundary
var bd = 'xhrupload-' + parseInt(Math.random()*(2 << 16));
settings.contentType = 'multipart/form-data; boundary=' + bd;
settings.data = '--' + bd + '\n' // RFC 1867 Format, simulate form file upload
+ 'content-disposition: form-data; name="Filedata";'
+ ' filename="' + encodeURIComponent(info.name) + '.base64"\n'
+ 'Content-Transfer-Encoding: base64\n' // Vaild MIME header, but won't work with PHP file upload handling.
+ 'Content-Type: ' + info.type + '\n\n'
+ data + '\n\n'
+ '--' + bd + '--';
} else {
log('ERROR: Data is not given in processable form.');
settings.fileError.call(this, info, 'INTERNAL_ERROR', 'Data is not given in processable form.');
return;
}
xhrupload(settings);
};
// Step 3: start sending out file
var xhrupload = function (settings) {
log('INFO: Sending file.');
if (typeof settings.data === 'string' && canSendBinaryString) {
log('INFO: Using xhr.sendAsBinary.');
settings.___beforeSend = settings.beforeSend;
settings.beforeSend = function (xhr, s) {
xhr.send = xhr.sendAsBinary;
if (s.___beforeSend) return s.___beforeSend.call(this, xhr, s);
}
}
$.ajax(settings);
};
$.fn.fileUpload = function(settings) {
this.each(function(i, el) {
if ($(el).is('input[type=file]')) {
log('INFO: binding onchange event to a input[type=file].');
$(el).bind(
'change',
function () {
if (!this.files.length) {
log('ERROR: no file selected.');
return;
} else if (this.files.length > 1) {
log('WARN: Multiple file upload not implemented yet, only first file will be uploaded.');
}
handleFile($.extend({}, config, settings), this.files[0]);
if (this.form.length === 1) {
this.form.reset();
} else {
log('WARN: Unable to reset file selection, upload won\'t be triggered again if user selects the same file.');
}
return;
}
);
}
if ($(el).is('form')) {
log('ERROR: <form> not implemented yet.');
} else {
log('INFO: binding ondrop event.');
$(el).bind(
'dragover', // dragover behavior should be blocked for drop to invoke.
function(ev) {
return false;
}
).bind(
'drop',
function (ev) {
if (!ev.originalEvent.dataTransfer.files) {
log('ERROR: No FileList object present; user might had dropped text.');
return false;
}
if (!ev.originalEvent.dataTransfer.files.length) {
log('ERROR: User had dropped a virual file (e.g. "My Computer")');
return false;
}
if (!ev.originalEvent.dataTransfer.files.length > 1) {
log('WARN: Multiple file upload not implemented yet, only first file will be uploaded.');
}
handleFile($.extend({}, config, settings), ev.originalEvent.dataTransfer.files[0]);
return false;
}
);
}
});
return this;
};
$.fileUploadSupported = isSupported;
$.imageUploadSupported = isImageSupported;
$.fileUploadAsBase64Supported = isSupportedInBase64;
$.imageUploadAsBase64Supported = isImageSupportedInBase64;
})(jQuery);