fileapi
Version:
FileAPI — a set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF.
2,163 lines (1,808 loc) • 87.2 kB
JavaScript
/*! FileAPI 2.1.1 - BSD | git://github.com/mailru/FileAPI.git
* FileAPI — a set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF.
*/
/*
* JavaScript Canvas to Blob 2.0.5
* https://github.com/blueimp/JavaScript-Canvas-to-Blob
*
* Copyright 2012, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*
* Based on stackoverflow user Stoive's code snippet:
* http://stackoverflow.com/q/4998908
*/
/*jslint nomen: true, regexp: true */
/*global window, atob, Blob, ArrayBuffer, Uint8Array */
(function (window) {
'use strict';
var CanvasPrototype = window.HTMLCanvasElement &&
window.HTMLCanvasElement.prototype,
hasBlobConstructor = window.Blob && (function () {
try {
return Boolean(new Blob());
} catch (e) {
return false;
}
}()),
hasArrayBufferViewSupport = hasBlobConstructor && window.Uint8Array &&
(function () {
try {
return new Blob([new Uint8Array(100)]).size === 100;
} catch (e) {
return false;
}
}()),
BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
window.MozBlobBuilder || window.MSBlobBuilder,
dataURLtoBlob = (hasBlobConstructor || BlobBuilder) && window.atob &&
window.ArrayBuffer && window.Uint8Array && function (dataURI) {
var byteString,
arrayBuffer,
intArray,
i,
mimeString,
bb;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
// Convert base64 to raw binary data held in a string:
byteString = atob(dataURI.split(',')[1]);
} else {
// Convert base64/URLEncoded data component to raw binary data:
byteString = decodeURIComponent(dataURI.split(',')[1]);
}
// Write the bytes of the string to an ArrayBuffer:
arrayBuffer = new ArrayBuffer(byteString.length);
intArray = new Uint8Array(arrayBuffer);
for (i = 0; i < byteString.length; i += 1) {
intArray[i] = byteString.charCodeAt(i);
}
// Separate out the mime component:
mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// Write the ArrayBuffer (or ArrayBufferView) to a blob:
if (hasBlobConstructor) {
return new Blob(
[hasArrayBufferViewSupport ? intArray : arrayBuffer],
{type: mimeString}
);
}
bb = new BlobBuilder();
bb.append(arrayBuffer);
return bb.getBlob(mimeString);
};
if (window.HTMLCanvasElement && !CanvasPrototype.toBlob) {
if (CanvasPrototype.mozGetAsFile) {
CanvasPrototype.toBlob = function (callback, type, quality) {
if (quality && CanvasPrototype.toDataURL && dataURLtoBlob) {
callback(dataURLtoBlob(this.toDataURL(type, quality)));
} else {
callback(this.mozGetAsFile('blob', type));
}
};
} else if (CanvasPrototype.toDataURL && dataURLtoBlob) {
CanvasPrototype.toBlob = function (callback, type, quality) {
callback(dataURLtoBlob(this.toDataURL(type, quality)));
};
}
}
window.dataURLtoBlob = dataURLtoBlob;
})(window);
/*jslint evil: true */
/*global window, URL, webkitURL, ActiveXObject */
(function (window, undef){
'use strict';
var
gid = 1,
noop = function (){},
document = window.document,
doctype = document.doctype || {},
userAgent = window.navigator.userAgent,
safari = /safari\//i.test(userAgent) && !/chrome\//i.test(userAgent),
iemobile = /iemobile\//i.test(userAgent),
insecureChrome = !safari && /chrome\//i.test(userAgent) && window.location.protocol === 'http:',
// https://github.com/blueimp/JavaScript-Load-Image/blob/master/load-image.js#L48
apiURL = (window.createObjectURL && window) || (window.URL && URL.revokeObjectURL && URL) || (window.webkitURL && webkitURL),
Blob = window.Blob,
File = window.File,
FileReader = window.FileReader,
FormData = window.FormData,
XMLHttpRequest = window.XMLHttpRequest,
jQuery = window.jQuery,
html5 = !!(File && (FileReader && (window.Uint8Array || FormData || XMLHttpRequest.prototype.sendAsBinary)))
&& !(safari && /windows/i.test(userAgent) && !iemobile), // BugFix: https://github.com/mailru/FileAPI/issues/25
cors = html5 && ('withCredentials' in (new XMLHttpRequest)),
chunked = html5 && !!Blob && !!(Blob.prototype.webkitSlice || Blob.prototype.mozSlice || Blob.prototype.slice),
normalize = ('' + ''.normalize).indexOf('[native code]') > 0,
// https://github.com/blueimp/JavaScript-Canvas-to-Blob
dataURLtoBlob = window.dataURLtoBlob,
_rimg = /img/i,
_rcanvas = /canvas/i,
_rimgcanvas = /img|canvas/i,
_rinput = /input/i,
_rdata = /^data:[^,]+,/,
_toString = {}.toString,
_supportConsoleLog,
_supportConsoleLogApply,
Math = window.Math,
_SIZE_CONST = function (pow){
pow = new window.Number(Math.pow(1024, pow));
pow.from = function (sz){ return Math.round(sz * this); };
return pow;
},
_elEvents = {}, // element event listeners
_infoReader = [], // list of file info processors
_readerEvents = 'abort progress error load loadend',
_xhrPropsExport = 'status statusText readyState response responseXML responseText responseBody'.split(' '),
currentTarget = 'currentTarget', // for minimize
preventDefault = 'preventDefault', // and this too
_isArray = function (ar) {
return ar && ('length' in ar);
},
/**
* Iterate over a object or array
*/
_each = function (obj, fn, ctx){
if( obj ){
if( _isArray(obj) ){
for( var i = 0, n = obj.length; i < n; i++ ){
if( i in obj ){
fn.call(ctx, obj[i], i, obj);
}
}
}
else {
for( var key in obj ){
if( obj.hasOwnProperty(key) ){
fn.call(ctx, obj[key], key, obj);
}
}
}
}
},
/**
* Merge the contents of two or more objects together into the first object
*/
_extend = function (dst){
var args = arguments, i = 1, _ext = function (val, key){ dst[key] = val; };
for( ; i < args.length; i++ ){
_each(args[i], _ext);
}
return dst;
},
/**
* Add event listener
*/
_on = function (el, type, fn){
if( el ){
var uid = api.uid(el);
if( !_elEvents[uid] ){
_elEvents[uid] = {};
}
var isFileReader = (FileReader && el) && (el instanceof FileReader);
_each(type.split(/\s+/), function (type){
if( jQuery && !isFileReader){
jQuery.event.add(el, type, fn);
} else {
if( !_elEvents[uid][type] ){
_elEvents[uid][type] = [];
}
_elEvents[uid][type].push(fn);
if( el.addEventListener ){ el.addEventListener(type, fn, false); }
else if( el.attachEvent ){ el.attachEvent('on'+type, fn); }
else { el['on'+type] = fn; }
}
});
}
},
/**
* Remove event listener
*/
_off = function (el, type, fn){
if( el ){
var uid = api.uid(el), events = _elEvents[uid] || {};
var isFileReader = (FileReader && el) && (el instanceof FileReader);
_each(type.split(/\s+/), function (type){
if( jQuery && !isFileReader){
jQuery.event.remove(el, type, fn);
}
else {
var fns = events[type] || [], i = fns.length;
while( i-- ){
if( fns[i] === fn ){
fns.splice(i, 1);
break;
}
}
if( el.addEventListener ){ el.removeEventListener(type, fn, false); }
else if( el.detachEvent ){ el.detachEvent('on'+type, fn); }
else { el['on'+type] = null; }
}
});
}
},
_one = function(el, type, fn){
_on(el, type, function _(evt){
_off(el, type, _);
fn(evt);
});
},
_fixEvent = function (evt){
if( !evt.target ){ evt.target = window.event && window.event.srcElement || document; }
if( evt.target.nodeType === 3 ){ evt.target = evt.target.parentNode; }
return evt;
},
_supportInputAttr = function (attr){
var input = document.createElement('input');
input.setAttribute('type', "file");
return attr in input;
},
/**
* FileAPI (core object)
*/
api = {
version: '2.1.1',
cors: false,
html5: true,
media: false,
formData: true,
multiPassResize: true,
insecureChrome: insecureChrome,
debug: false,
pingUrl: false,
multiFlash: false,
flashAbortTimeout: 0,
withCredentials: true,
staticPath: './dist/',
flashUrl: 0, // @default: './FileAPI.flash.swf'
flashImageUrl: 0, // @default: './FileAPI.flash.image.swf'
postNameConcat: function (name, idx){
return name + (idx != null ? '['+ idx +']' : '');
},
ext2mime: {
jpg: 'image/jpeg'
, tif: 'image/tiff'
, txt: 'text/plain'
},
// Fallback for flash
accept: {
'image/*': 'art bm bmp dwg dxf cbr cbz fif fpx gif ico iefs jfif jpe jpeg jpg jps jut mcf nap nif pbm pcx pgm pict pm png pnm qif qtif ras rast rf rp svf tga tif tiff xbm xbm xpm xwd'
, 'audio/*': 'm4a flac aac rm mpa wav wma ogg mp3 mp2 m3u mod amf dmf dsm far gdm imf it m15 med okt s3m stm sfx ult uni xm sid ac3 dts cue aif aiff wpl ape mac mpc mpp shn wv nsf spc gym adplug adx dsp adp ymf ast afc hps xs'
, 'video/*': 'm4v 3gp nsv ts ty strm rm rmvb m3u ifo mov qt divx xvid bivx vob nrg img iso pva wmv asf asx ogm m2v avi bin dat dvr-ms mpg mpeg mp4 mkv avc vp3 svq3 nuv viv dv fli flv wpl'
},
uploadRetry : 0,
networkDownRetryTimeout : 5000, // milliseconds, don't flood when network is down
chunkSize : 0,
chunkUploadRetry : 0,
chunkNetworkDownRetryTimeout : 2000, // milliseconds, don't flood when network is down
KB: _SIZE_CONST(1),
MB: _SIZE_CONST(2),
GB: _SIZE_CONST(3),
TB: _SIZE_CONST(4),
EMPTY_PNG: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=',
expando: 'fileapi' + (new Date).getTime(),
uid: function (obj){
return obj
? (obj[api.expando] = obj[api.expando] || api.uid())
: (++gid, api.expando + gid)
;
},
log: function (){
if( api.debug && _supportConsoleLog ){
if( _supportConsoleLogApply ){
console.log.apply(console, arguments);
}
else {
console.log([].join.call(arguments, ' '));
}
}
},
/**
* Create new image
*
* @param {String} [src]
* @param {Function} [fn] 1. error -- boolean, 2. img -- Image element
* @returns {HTMLElement}
*/
newImage: function (src, fn){
var img = document.createElement('img');
if( fn ){
api.event.one(img, 'error load', function (evt){
fn(evt.type == 'error', img);
img = null;
});
}
img.src = src;
return img;
},
/**
* Get XHR
* @returns {XMLHttpRequest}
*/
getXHR: function (){
var xhr;
if( XMLHttpRequest ){
xhr = new XMLHttpRequest;
}
else if( window.ActiveXObject ){
try {
xhr = new ActiveXObject('MSXML2.XMLHttp.3.0');
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
}
return xhr;
},
isArray: _isArray,
support: {
dnd: cors && ('ondrop' in document.createElement('div')),
cors: cors,
html5: html5,
chunked: chunked,
dataURI: true,
accept: _supportInputAttr('accept'),
multiple: _supportInputAttr('multiple')
},
event: {
on: _on
, off: _off
, one: _one
, fix: _fixEvent
},
throttle: function(fn, delay) {
var id, args;
return function _throttle(){
args = arguments;
if( !id ){
fn.apply(window, args);
id = setTimeout(function (){
id = 0;
fn.apply(window, args);
}, delay);
}
};
},
F: function (){},
parseJSON: function (str){
var json;
if( window.JSON && JSON.parse ){
json = JSON.parse(str);
}
else {
json = (new Function('return ('+str.replace(/([\r\n])/g, '\\$1')+');'))();
}
return json;
},
trim: function (str){
str = String(str);
return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
},
/**
* Simple Defer
* @return {Object}
*/
defer: function (){
var
list = []
, result
, error
, defer = {
resolve: function (err, res){
defer.resolve = noop;
error = err || false;
result = res;
while( res = list.shift() ){
res(error, result);
}
},
then: function (fn){
if( error !== undef ){
fn(error, result);
} else {
list.push(fn);
}
}
};
return defer;
},
queue: function (fn){
var
_idx = 0
, _length = 0
, _fail = false
, _end = false
, queue = {
inc: function (){
_length++;
},
next: function (){
_idx++;
setTimeout(queue.check, 0);
},
check: function (){
(_idx >= _length) && !_fail && queue.end();
},
isFail: function (){
return _fail;
},
fail: function (){
!_fail && fn(_fail = true);
},
end: function (){
if( !_end ){
_end = true;
fn();
}
}
}
;
return queue;
},
/**
* For each object
*
* @param {Object|Array} obj
* @param {Function} fn
* @param {*} [ctx]
*/
each: _each,
/**
* Async for
* @param {Array} array
* @param {Function} callback
*/
afor: function (array, callback){
var i = 0, n = array.length;
if( _isArray(array) && n-- ){
(function _next(){
callback(n != i && _next, array[i], i++);
})();
}
else {
callback(false);
}
},
/**
* Merge the contents of two or more objects together into the first object
*
* @param {Object} dst
* @return {Object}
*/
extend: _extend,
/**
* Is file?
* @param {File} file
* @return {Boolean}
*/
isFile: function (file){
return _toString.call(file) === '[object File]';
},
/**
* Is blob?
* @param {Blob} blob
* @returns {Boolean}
*/
isBlob: function (blob) {
return this.isFile(blob) || (_toString.call(blob) === '[object Blob]');
},
/**
* Is canvas element
*
* @param {HTMLElement} el
* @return {Boolean}
*/
isCanvas: function (el){
return el && _rcanvas.test(el.nodeName);
},
getFilesFilter: function (filter){
filter = typeof filter == 'string' ? filter : (filter.getAttribute && filter.getAttribute('accept') || '');
return filter ? new RegExp('('+ filter.replace(/\./g, '\\.').replace(/,/g, '|') +')$', 'i') : /./;
},
/**
* Read as DataURL
*
* @param {File|Element} file
* @param {Function} fn
*/
readAsDataURL: function (file, fn){
if( api.isCanvas(file) ){
_emit(file, fn, 'load', api.toDataURL(file));
}
else {
_readAs(file, fn, 'DataURL');
}
},
/**
* Read as Binary string
*
* @param {File} file
* @param {Function} fn
*/
readAsBinaryString: function (file, fn){
if( _hasSupportReadAs('BinaryString') ){
_readAs(file, fn, 'BinaryString');
} else {
// Hello IE10!
_readAs(file, function (evt){
if( evt.type == 'load' ){
try {
// dataURL -> binaryString
evt.result = api.toBinaryString(evt.result);
} catch (e){
evt.type = 'error';
evt.message = e.toString();
}
}
fn(evt);
}, 'DataURL');
}
},
/**
* Read as ArrayBuffer
*
* @param {File} file
* @param {Function} fn
*/
readAsArrayBuffer: function(file, fn){
_readAs(file, fn, 'ArrayBuffer');
},
/**
* Read as text
*
* @param {File} file
* @param {String} encoding
* @param {Function} [fn]
*/
readAsText: function(file, encoding, fn){
if( !fn ){
fn = encoding;
encoding = 'utf-8';
}
_readAs(file, fn, 'Text', encoding);
},
/**
* Convert image or canvas to DataURL
*
* @param {Element} el Image or Canvas element
* @param {String} [type] mime-type
* @return {String}
*/
toDataURL: function (el, type){
if( typeof el == 'string' ){
return el;
}
else if( el.toDataURL ){
return el.toDataURL(type || 'image/png');
}
},
/**
* Canvert string, image or canvas to binary string
*
* @param {String|Element} val
* @return {String}
*/
toBinaryString: function (val){
return window.atob(api.toDataURL(val).replace(_rdata, ''));
},
/**
* Read file or DataURL as ImageElement
*
* @param {File|String} file
* @param {Function} fn
* @param {Boolean} [progress]
*/
readAsImage: function (file, fn, progress){
if( api.isBlob(file) ){
if( apiURL ){
/** @namespace apiURL.createObjectURL */
var data = apiURL.createObjectURL(file);
if( data === undef ){
_emit(file, fn, 'error');
}
else {
api.readAsImage(data, fn, progress);
}
}
else {
api.readAsDataURL(file, function (evt){
if( evt.type == 'load' ){
api.readAsImage(evt.result, fn, progress);
}
else if( progress || evt.type == 'error' ){
_emit(file, fn, evt, null, { loaded: evt.loaded, total: evt.total });
}
});
}
}
else if( api.isCanvas(file) ){
_emit(file, fn, 'load', file);
}
else if( _rimg.test(file.nodeName) ){
if( file.complete ){
_emit(file, fn, 'load', file);
}
else {
var events = 'error abort load';
_one(file, events, function _fn(evt){
if( evt.type == 'load' && apiURL ){
/** @namespace apiURL.revokeObjectURL */
apiURL.revokeObjectURL(file.src);
}
_off(file, events, _fn);
_emit(file, fn, evt, file);
});
}
}
else if( file.iframe ){
_emit(file, fn, { type: 'error' });
}
else {
// Created image
var img = api.newImage(file.dataURL || file);
api.readAsImage(img, fn, progress);
}
},
/**
* Make file by name
*
* @param {String} name
* @return {Array}
*/
checkFileObj: function (name){
var file = {}, accept = api.accept;
if( typeof name == 'object' ){
file = name;
}
else {
file.name = (name + '').split(/\\|\//g).pop();
}
if( file.type == null ){
file.type = file.name.split('.').pop();
}
_each(accept, function (ext, type){
ext = new RegExp(ext.replace(/\s/g, '|'), 'i');
if( ext.test(file.type) || api.ext2mime[file.type] ){
file.type = api.ext2mime[file.type] || (type.split('/')[0] +'/'+ file.type);
}
});
return file;
},
/**
* Get drop files
*
* @param {Event} evt
* @param {Function} callback
*/
getDropFiles: function (evt, callback){
var
files = []
, all = []
, items
, dataTransfer = _getDataTransfer(evt)
, transFiles = dataTransfer.files
, transItems = dataTransfer.items
, entrySupport = _isArray(transItems) && transItems[0] && _getAsEntry(transItems[0])
, queue = api.queue(function (){ callback(files, all); })
;
if( entrySupport ){
if( normalize && transFiles ){
var
i = transFiles.length
, file
, entry
;
items = new Array(i);
while( i-- ){
file = transFiles[i];
try {
entry = _getAsEntry(transItems[i]);
}
catch( err ){
api.log('[err] getDropFiles: ', err);
entry = null;
}
if( _isEntry(entry) ){
// OSX filesystems use Unicode Normalization Form D (NFD),
// and entry.file(…) can't read the files with the same names
if( entry.isDirectory || (entry.isFile && file.name == file.name.normalize('NFC')) ){
items[i] = entry;
}
else {
items[i] = file;
}
}
else {
items[i] = file;
}
}
}
else {
items = transItems;
}
}
else {
items = transFiles;
}
_each(items || [], function (item){
queue.inc();
try {
if( entrySupport && _isEntry(item) ){
_readEntryAsFiles(item, function (err, entryFiles, allEntries){
if( err ){
api.log('[err] getDropFiles:', err);
} else {
files.push.apply(files, entryFiles);
}
all.push.apply(all, allEntries);
queue.next();
});
}
else {
_isRegularFile(item, function (yes, err){
if( yes ){
files.push(item);
}
else {
item.error = err;
}
all.push(item);
queue.next();
});
}
}
catch( err ){
queue.next();
api.log('[err] getDropFiles: ', err);
}
});
queue.check();
},
/**
* Get file list
*
* @param {HTMLInputElement|Event} input
* @param {String|Function} [filter]
* @param {Function} [callback]
* @return {Array|Null}
*/
getFiles: function (input, filter, callback){
var files = [];
if( callback ){
api.filterFiles(api.getFiles(input), filter, callback);
return null;
}
if( input.jquery ){
// jQuery object
input.each(function (){
files = files.concat(api.getFiles(this));
});
input = files;
files = [];
}
if( typeof filter == 'string' ){
filter = api.getFilesFilter(filter);
}
if( input.originalEvent ){
// jQuery event
input = _fixEvent(input.originalEvent);
}
else if( input.srcElement ){
// IE Event
input = _fixEvent(input);
}
if( input.dataTransfer ){
// Drag'n'Drop
input = input.dataTransfer;
}
else if( input.target ){
// Event
input = input.target;
}
if( input.files ){
// Input[type="file"]
files = input.files;
if( !html5 ){
// Partial support for file api
files[0].blob = input;
files[0].iframe = true;
}
}
else if( !html5 && isInputFile(input) ){
if( api.trim(input.value) ){
files = [api.checkFileObj(input.value)];
files[0].blob = input;
files[0].iframe = true;
}
}
else if( _isArray(input) ){
files = input;
}
return api.filter(files, function (file){ return !filter || filter.test(file.name); });
},
/**
* Get total file size
* @param {Array} files
* @return {Number}
*/
getTotalSize: function (files){
var size = 0, i = files && files.length;
while( i-- ){
size += files[i].size;
}
return size;
},
/**
* Get image information
*
* @param {File} file
* @param {Function} fn
*/
getInfo: function (file, fn){
var info = {}, readers = _infoReader.concat();
if( api.isBlob(file) ){
(function _next(){
var reader = readers.shift();
if( reader ){
if( reader.test(file.type) ){
reader(file, function (err, res){
if( err ){
fn(err);
}
else {
_extend(info, res);
_next();
}
});
}
else {
_next();
}
}
else {
fn(false, info);
}
})();
}
else {
fn('not_support_info', info);
}
},
/**
* Add information reader
*
* @param {RegExp} mime
* @param {Function} fn
*/
addInfoReader: function (mime, fn){
fn.test = function (type){ return mime.test(type); };
_infoReader.push(fn);
},
/**
* Filter of array
*
* @param {Array} input
* @param {Function} fn
* @return {Array}
*/
filter: function (input, fn){
var result = [], i = 0, n = input.length, val;
for( ; i < n; i++ ){
if( i in input ){
val = input[i];
if( fn.call(val, val, i, input) ){
result.push(val);
}
}
}
return result;
},
/**
* Filter files
*
* @param {Array} files
* @param {Function} eachFn
* @param {Function} resultFn
*/
filterFiles: function (files, eachFn, resultFn){
if( files.length ){
// HTML5 or Flash
var queue = files.concat(), file, result = [], deleted = [];
(function _next(){
if( queue.length ){
file = queue.shift();
api.getInfo(file, function (err, info){
(eachFn(file, err ? false : info) ? result : deleted).push(file);
_next();
});
}
else {
resultFn(result, deleted);
}
})();
}
else {
resultFn([], files);
}
},
upload: function (options){
options = _extend({
jsonp: 'callback'
, prepare: api.F
, beforeupload: api.F
, upload: api.F
, fileupload: api.F
, fileprogress: api.F
, filecomplete: api.F
, progress: api.F
, complete: api.F
, pause: api.F
, imageOriginal: true
, chunkSize: api.chunkSize
, chunkUploadRetry: api.chunkUploadRetry
, uploadRetry: api.uploadRetry
}, options);
if( options.imageAutoOrientation && !options.imageTransform ){
options.imageTransform = { rotate: 'auto' };
}
var
proxyXHR = new api.XHR(options)
, dataArray = this._getFilesDataArray(options.files)
, _this = this
, _total = 0
, _loaded = 0
, _nextFile
, _complete = false
;
// calc total size
_each(dataArray, function (data){
_total += data.size;
});
// Array of files
proxyXHR.files = [];
_each(dataArray, function (data){
proxyXHR.files.push(data.file);
});
// Set upload status props
proxyXHR.total = _total;
proxyXHR.loaded = 0;
proxyXHR.filesLeft = dataArray.length;
// emit "beforeupload" event
options.beforeupload(proxyXHR, options);
// Upload by file
_nextFile = function (){
var
data = dataArray.shift()
, _file = data && data.file
, _fileLoaded = false
, _fileOptions = _simpleClone(options)
;
proxyXHR.filesLeft = dataArray.length;
if( _file && _file.name === api.expando ){
_file = null;
api.log('[warn] FileAPI.upload() — called without files');
}
if( ( proxyXHR.statusText != 'abort' || proxyXHR.current ) && data ){
// Mark active job
_complete = false;
// Set current upload file
proxyXHR.currentFile = _file;
// Prepare file options
if (_file && options.prepare(_file, _fileOptions) === false) {
_nextFile.call(_this);
return;
}
_fileOptions.file = _file;
_this._getFormData(_fileOptions, data, function (form){
if( !_loaded ){
// emit "upload" event
options.upload(proxyXHR, options);
}
var xhr = new api.XHR(_extend({}, _fileOptions, {
upload: _file ? function (){
// emit "fileupload" event
options.fileupload(_file, xhr, _fileOptions);
} : noop,
progress: _file ? function (evt){
if( !_fileLoaded ){
// For ignore the double calls.
_fileLoaded = (evt.loaded === evt.total);
// emit "fileprogress" event
options.fileprogress({
type: 'progress'
, total: data.total = evt.total
, loaded: data.loaded = evt.loaded
}, _file, xhr, _fileOptions);
// emit "progress" event
options.progress({
type: 'progress'
, total: _total
, loaded: proxyXHR.loaded = (_loaded + data.size * (evt.loaded/evt.total)) || 0
}, _file, xhr, _fileOptions);
}
} : noop,
complete: function (err){
_each(_xhrPropsExport, function (name){
proxyXHR[name] = xhr[name];
});
if( _file ){
data.total = (data.total || data.size);
data.loaded = data.total;
if( !err ) {
// emulate 100% "progress"
this.progress(data);
// fixed throttle event
_fileLoaded = true;
// bytes loaded
_loaded += data.size; // data.size != data.total, it's desirable fix this
proxyXHR.loaded = _loaded;
}
// emit "filecomplete" event
options.filecomplete(err, xhr, _file, _fileOptions);
}
// upload next file
setTimeout(function () {_nextFile.call(_this);}, 0);
}
})); // xhr
// ...
proxyXHR.abort = function (current){
if (!current) { dataArray.length = 0; }
this.current = current;
xhr.abort();
};
// Start upload
xhr.send(form);
});
}
else {
var successful = proxyXHR.status == 200 || proxyXHR.status == 201 || proxyXHR.status == 204;
options.complete(successful ? false : (proxyXHR.statusText || 'error'), proxyXHR, options);
// Mark done state
_complete = true;
}
};
// Next tick
setTimeout(_nextFile, 0);
// Append more files to the existing request
// first - add them to the queue head/tail
proxyXHR.append = function (files, first) {
files = api._getFilesDataArray([].concat(files));
_each(files, function (data) {
_total += data.size;
proxyXHR.files.push(data.file);
if (first) {
dataArray.unshift(data);
} else {
dataArray.push(data);
}
});
proxyXHR.statusText = "";
if( _complete ){
_nextFile.call(_this);
}
};
// Removes file from queue by file reference and returns it
proxyXHR.remove = function (file) {
var i = dataArray.length, _file;
while( i-- ){
if( dataArray[i].file == file ){
_file = dataArray.splice(i, 1);
_total -= _file.size;
}
}
return _file;
};
return proxyXHR;
},
_getFilesDataArray: function (data){
var files = [], oFiles = {};
if( isInputFile(data) ){
var tmp = api.getFiles(data);
oFiles[data.name || 'file'] = data.getAttribute('multiple') !== null ? tmp : tmp[0];
}
else if( _isArray(data) && isInputFile(data[0]) ){
_each(data, function (input){
oFiles[input.name || 'file'] = api.getFiles(input);
});
}
else {
oFiles = data;
}
_each(oFiles, function add(file, name){
if( _isArray(file) ){
_each(file, function (file){
add(file, name);
});
}
else if( file && (file.name || file.image) ){
files.push({
name: name
, file: file
, size: file.size
, total: file.size
, loaded: 0
});
}
});
if( !files.length ){
// Create fake `file` object
files.push({ file: { name: api.expando } });
}
return files;
},
_getFormData: function (options, data, fn){
var
file = data.file
, name = data.name
, filename = file.name
, filetype = file.type
, trans = api.support.transform && options.imageTransform
, Form = new api.Form
, queue = api.queue(function (){ fn(Form); })
, isOrignTrans = trans && _isOriginTransform(trans)
, postNameConcat = api.postNameConcat
;
// Append data
_each(options.data, function add(val, name){
if( typeof val == 'object' ){
_each(val, function (v, i){
add(v, postNameConcat(name, i));
});
}
else {
Form.append(name, val);
}
});
(function _addFile(file/**Object*/){
if( file.image ){ // This is a FileAPI.Image
queue.inc();
file.toData(function (err, image){
// @todo: требует рефакторинга и обработки ошибки
if (file.file) {
image.type = file.file.type;
image.quality = file.matrix.quality;
filename = file.file && file.file.name;
}
filename = filename || (new Date).getTime()+'.png';
_addFile(image);
queue.next();
});
}
else if( api.Image && trans && (/^image/.test(file.type) || _rimgcanvas.test(file.nodeName)) ){
queue.inc();
if( isOrignTrans ){
// Convert to array for transform function
trans = [trans];
}
api.Image.transform(file, trans, options.imageAutoOrientation, function (err, images){
if( isOrignTrans && !err ){
if( !dataURLtoBlob && !api.flashEngine ){
// Canvas.toBlob or Flash not supported, use multipart
Form.multipart = true;
}
Form.append(name, images[0], filename, trans[0].type || filetype);
}
else {
var addOrigin = 0;
if( !err ){
_each(images, function (image, idx){
if( !dataURLtoBlob && !api.flashEngine ){
Form.multipart = true;
}
if( !trans[idx].postName ){
addOrigin = 1;
}
Form.append(trans[idx].postName || postNameConcat(name, idx), image, filename, trans[idx].type || filetype);
});
}
if( err || options.imageOriginal ){
Form.append(postNameConcat(name, (addOrigin ? 'original' : null)), file, filename, filetype);
}
}
queue.next();
});
}
else if( filename !== api.expando ){
Form.append(name, file, filename);
}
})(file);
queue.check();
},
reset: function (inp, notRemove){
var parent, clone;
if( jQuery ){
clone = jQuery(inp).clone(true).insertBefore(inp).val('')[0];
if( !notRemove ){
jQuery(inp).remove();
}
} else {
parent = inp.parentNode;
clone = parent.insertBefore(inp.cloneNode(true), inp);
clone.value = '';
if( !notRemove ){
parent.removeChild(inp);
}
_each(_elEvents[api.uid(inp)], function (fns, type){
_each(fns, function (fn){
_off(inp, type, fn);
_on(clone, type, fn);
});
});
}
return clone;
},
/**
* Load remote file
*
* @param {String} url
* @param {Function} fn
* @return {XMLHttpRequest}
*/
load: function (url, fn){
var xhr = api.getXHR();
if( xhr ){
xhr.open('GET', url, true);
if( xhr.overrideMimeType ){
xhr.overrideMimeType('text/plain; charset=x-user-defined');
}
_on(xhr, 'progress', function (/**Event*/evt){
/** @namespace evt.lengthComputable */
if( evt.lengthComputable ){
fn({ type: evt.type, loaded: evt.loaded, total: evt.total }, xhr);
}
});
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 ){
xhr.onreadystatechange = null;
if( xhr.status == 200 ){
url = url.split('/');
/** @namespace xhr.responseBody */
var file = {
name: url[url.length-1]
, size: xhr.getResponseHeader('Content-Length')
, type: xhr.getResponseHeader('Content-Type')
};
file.dataURL = 'data:'+file.type+';base64,' + api.encode64(xhr.responseBody || xhr.responseText);
fn({ type: 'load', result: file }, xhr);
}
else {
fn({ type: 'error' }, xhr);
}
}
};
xhr.send(null);
} else {
fn({ type: 'error' });
}
return xhr;
},
encode64: function (str){
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=', outStr = '', i = 0;
if( typeof str !== 'string' ){
str = String(str);
}
while( i < str.length ){
//all three "& 0xff" added below are there to fix a known bug
//with bytes returned by xhr.responseText
var
byte1 = str.charCodeAt(i++) & 0xff
, byte2 = str.charCodeAt(i++) & 0xff
, byte3 = str.charCodeAt(i++) & 0xff
, enc1 = byte1 >> 2
, enc2 = ((byte1 & 3) << 4) | (byte2 >> 4)
, enc3, enc4
;
if( isNaN(byte2) ){
enc3 = enc4 = 64;
} else {
enc3 = ((byte2 & 15) << 2) | (byte3 >> 6);
enc4 = isNaN(byte3) ? 64 : byte3 & 63;
}
outStr += b64.charAt(enc1) + b64.charAt(enc2) + b64.charAt(enc3) + b64.charAt(enc4);
}
return outStr;
}
} // api
;
function _emit(target, fn, name, res, ext){
var evt = {
type: name.type || name
, target: target
, result: res
};
_extend(evt, ext);
fn(evt);
}
function _hasSupportReadAs(method){
return FileReader && !!FileReader.prototype['readAs' + method];
}
function _readAs(file, fn, method, encoding){
if( api.isBlob(file) && _hasSupportReadAs(method) ){
var Reader = new FileReader;
// Add event listener
_on(Reader, _readerEvents, function _fn(evt){
var type = evt.type;
if( type == 'progress' ){
_emit(file, fn, evt, evt.target.result, { loaded: evt.loaded, total: evt.total });
}
else if( type == 'loadend' ){
_off(Reader, _readerEvents, _fn);
Reader = null;
}
else {
_emit(file, fn, evt, evt.target.result);
}
});
try {
// ReadAs ...
if( encoding ){
Reader['readAs' + method](file, encoding);
}
else {
Reader['readAs' + method](file);
}
}
catch (err){
_emit(file, fn, 'error', undef, { error: err.toString() });
}
}
else {
_emit(file, fn, 'error', undef, { error: 'filreader_not_support_' + method });
}
}
function _isRegularFile(file, callback){
// http://stackoverflow.com/questions/8856628/detecting-folders-directories-in-javascript-filelist-objects
if( !file.type && (safari || ((file.size % 4096) === 0 && (file.size <= 102400))) ){
if( FileReader ){
try {
var reader = new FileReader();
_one(reader, _readerEvents, function (evt){
var isFile = evt.type != 'error';
if( isFile ){
if ( reader.readyState == null || reader.readyState === reader.LOADING ) {
reader.abort();
}
callback(isFile);
}
else {
callback(false, reader.error);
}
});
reader.readAsDataURL(file);
} catch( err ){
callback(false, err);
}
}
else {
callback(null, new Error('FileReader is not supported'));
}
}
else {
callback(true);
}
}
function _isEntry(item){
return item && (item.isFile || item.isDirectory);
}
function _getAsEntry(item){
var entry;
if( item.getAsEntry ){ entry = item.getAsEntry(); }
else if( item.webkitGetAsEntry ){ entry = item.webkitGetAsEntry(); }
return entry;
}
function _readEntryAsFiles(entry, callback){
if( !entry ){
// error
var err = new Error('invalid entry');
entry = new Object(entry);
entry.error = err;
callback(err.message, [], [entry]);
}
else if( entry.isFile ){
// Read as file
entry.file(function (file){
// success
file.fullPath = entry.fullPath;
callback(false, [file], [file]);
}, function (err){
// error
entry.error = err;
callback('FileError.code: ' + err.code, [], [entry]);
});
}
else if( entry.isDirectory ){
var
reader = entry.createReader()
, firstAttempt = true
, files = []
, all = [entry]
;
var onerror = function (err){
// error
entry.error = err;
callback('DirectoryError.code: ' + err.code, files, all);
};
var ondone = function ondone(entries){
if( firstAttempt ){
firstAttempt = false;
if( !entries.length ){
entry.error = new Error('directory is empty');
}
}
// success
if( entries.length ){
api.afor(entries, function (next, entry){
_readEntryAsFiles(entry, function (err, entryFiles, allEntries){
if( !err ){
files = files.concat(entryFiles);
}
all = all.concat(allEntries);
if( next ){
next();
}
else {
reader.readEntries(ondone, onerror);
}
});
});
}
else {
callback(false, files, all);
}
};
reader.readEntries(ondone, onerror);
}
else {
_readEntryAsFiles(_getAsEntry(entry), callback);
}
}
function _simpleClone(obj){
var copy = {};
_each(obj, function (val, key){
if( val && (typeof val === 'object') && (val.nodeType === void 0) ){
val = _extend({}, val);
}
copy[key] = val;
});
return copy;
}
function isInputFile(el){
return _rinput.test(el && el.tagName);
}
function _getDataTransfer(evt){
return (evt.originalEvent || evt || '').dataTransfer || {};
}
function _isOriginTransform(trans){
var key;
for( key in trans ){
if( trans.hasOwnProperty(key) ){
if( !(trans[key] instanceof Object || key === 'overlay' || key === 'filter') ){
return true;
}
}
}
return false;
}
// Add default image info reader
api.addInfoReader(/^image/, function (file/**File*/, callback/**Function*/){
if( !file.__dimensions ){
var defer = file.__dimensions = api.defer();
api.readAsImage(file, function (evt){
var img = evt.target;
defer.resolve(evt.type == 'load' ? false : 'error', {
width: img.width
, height: img.height
});
img.src = api.EMPTY_PNG;
img = null;
});
}
file.__dimensions.then(callback);
});
/**
* Drag'n'Drop special event
*
* @param {HTMLElement} el
* @param {Function} onHover
* @param {Function} onDrop
*/
api.event.dnd = function (el, onHover, onDrop){
var _id, _type;
if( !onDrop ){
onDrop = onHover;
onHover = api.F;
}
if( FileReader ){
// Hover
_on(el, 'dragenter dragleave dragover', onHover.ff = onHover.ff || function (evt){
var
types = _getDataTransfer(evt).types
, i = types && types.length
, debounceTrigger = false
;
while( i-- ){
if( ~types[i].indexOf('File') ){
evt[preventDefault]();
if( _type !== evt.type ){
_type = evt.type; // Store current type of event
if( _type != 'dragleave' ){
onHover.call(evt[currentTarget], true, evt);
}
debounceTrigger = true;
}
break; // exit from "while"
}
}
if( debounceTrigger ){
clearTimeout(_id);
_id = setTimeout(function (){
onHover.call(evt[currentTarget], _type != 'dragleave', evt);
}, 50);
}
});
// Drop
_on(el, 'drop', onDrop.ff = onDrop.ff || function (evt){
evt[preventDefault]();
_type = 0;
api.getDropFiles(evt, function (files, all){
onDrop.call(evt[currentTarget], files, all, evt);
});
onHover.call(evt[currentTarget], false, evt);
});
}
else {
api.log("Drag'n'Drop -- not supported");
}
};
/**
* Remove drag'n'drop
* @param {HTMLElement} el
* @param {Function} onHover
* @param {Function} onDrop
*/
api.event.dnd.off = function (el, onHover, onDrop){
_off(el, 'dragenter dragleave dragover', onHover.ff);
_off(el, 'drop', onDrop.ff);
};
// Support jQuery
if( jQuery && !jQuery.fn.dnd ){
jQuery.fn.dnd = function (onHover, onDrop){
return this.each(function (){
api.event.dnd(this, onHover, onDrop);
});
};
jQuery.fn.offdnd = function (onHover, onDrop){
return this.each(function (){
api.event.dnd.off(this, onHover, onDrop);
});
};
}
// @export
window.FileAPI = _extend(api, window.FileAPI);
// Debug info
api.log('FileAPI: ' + api.version);
api.log('protocol: ' + window.location.protocol);
api.log('doctype: [' + doctype.name + '] ' + doctype.publicId + ' ' + doctype.systemId);
// @detect 'x-ua-compatible'
_each(document.getElementsByTagName('meta'), function (meta){
if( /x-ua-compatible/i.test(meta.getAttribute('http-equiv')) ){
api.log('meta.http-equiv: ' + meta.getAttribute('content'));
}
});
// Configuration
try {
_supportConsoleLog = !!console.log;
_supportConsoleLogApply = !!console.log.apply;
}
catch (err) {}
if( !api.flashUrl ){ api.flashUrl = api.staticPath + 'FileAPI.flash.swf'; }
if( !api.flashImageUrl ){ api.flashImageUrl = api.staticPath + 'FileAPI.flash.image.swf'; }
if( !api.flashWebcamUrl ){ api.flashWebcamUrl = api.staticPath + 'FileAPI.flash.camera.swf'; }
})(window, void 0);
/*global window, FileAPI, document */
(function (api, document, undef) {
'use strict';
var
min = Math.min,
round = Math.round,
getCanvas = function () { return document.createElement('canvas'); },
support = false,
exifOrientation = {
8: 270
, 3: 180
, 6: 90
, 7: 270
, 4: 180
, 5: 90
}
;
try {
support = getCanvas().toDataURL('image/png').indexOf('data:image/png') > -1;
}
catch (e){}
function Image(file){
if( file instanceof Image ){
var img = new Image(file.file);
api.extend(img.matrix, file.matrix);
return img;
}
else if( !(this instanceof Image) ){
return new Image(file);
}
this.file = file;
this.size = file.size || 100;
this.matrix = {
sx: 0,
sy: 0,
sw: 0,
sh: 0,
dx: 0,
dy: 0,
dw: 0,
dh: 0,
resize: 0, // min, max OR preview
deg: 0,
quality: 1, // jpeg quality
filter: 0
};
}
Image.prototype = {
image: true,
constructor: Image,
set: function (attrs){
api.extend(this.matrix, attrs);
return this;
},
crop: function (x, y, w, h){
if( w === undef ){
w = x;
h = y;
x = y = 0;
}
return this.set({ sx: x, sy: y, sw: w, sh: h || w });
},
resize: function (w, h, strategy){
if( /min|max|height|width/.test(h) ){
strategy = h;
h = w;
}
return this.set({ dw: w, dh: h || w, resize: strategy });
},
preview: function (w, h){
return this.resize(w, h || w, 'preview');
},
rotate: function (deg){
return this.set({ deg: deg });
},
filter: function (filter){
return this.set({ filter: filter });
},
overlay: function (images){
return this.set({ overlay: images });
},
clone: function (){
return new Image(this);
},
_load: function (image, fn){
var self = this;
if( /img|video/i.test(image.nodeName) ){
fn.call(self, null, image);
}
else {
api.readAsImage(image, function (evt){
fn.call(self, evt.type != 'load', evt.result);
});
}
},
_apply: function (image, fn){
var
canvas = getCanvas()
, m = this.getMatrix(image)
, ctx = canvas.getContext('2d')
, width = image.videoWidth || image.width
, height = image.videoHeight || image.height
, deg = m.deg
, dw = m.dw
, dh = m.dh
, w = width
, h = height
, filter = m.filter
, copy // canvas copy
, buffer = image
, overlay = m.overlay
, queue = api.queue(function (){ image.src = api.EMPTY_PNG; fn(false, canvas); })
, renderImageToCanvas = api.renderImageToCanvas
;
// Normalize angle
deg = deg - Math.floor(deg/360)*360;
// For `renderImageToCanvas`
image._type = this.file.type;
while(m.multipass && min(w/dw, h/dh) > 2 ){
w = (w/2 + 0.5)|0;
h = (h/2 + 0.5)|0;
copy = getCanvas();
copy.width = w;
copy.height = h;
if( buffer !== image ){
renderImageToCanvas(copy, buffer, 0, 0, buffer.width, buffer.height, 0, 0, w, h);
buffer = copy;
}
else {
buffer = copy;
renderImageToCanvas(buffer, image, m.sx, m.sy, m.sw, m.sh, 0, 0, w, h);
m.sx = m.sy = m.sw = m.sh = 0;
}
}
canvas.width = (deg % 180) ? dh : dw;
canvas.height = (deg % 180) ? dw : dh;
canvas.type = m.type;
canvas.quality = m.quality;
ctx.rotate(deg * Math.PI / 180);
renderImageToCanvas(ctx.canvas, buffer
, m.sx, m.sy
, m.sw || buffer.width
, m.sh || buffer.height
, (deg == 180 || deg == 270 ? -dw : 0)
, (deg == 90 || deg == 180 ? -dh : 0)
, dw, dh
);
ctx.setTransform(1, 0, 0, 1, 0, 0);
dw = canvas.width;
dh = canvas.height;
// Apply overlay
overlay && api.each([].concat(overlay), function (over){
queue.inc();
// preload
var img = new window.Image, fn = function (){
var
x = over.x|0
, y = over.y|0
, w = over.w || img.width
, h = over.h || img.height
, rel = over.rel
;
// center | right | left
x = (rel == 1 || rel == 4 || rel == 7) ? (dw - w + x)/2 : (rel == 2 || rel == 5 || rel == 8 ? dw - (w + x) : x);
// center | bottom | top
y = (rel == 3 || rel == 4 || rel == 5) ? (dh - h + y)/2 : (rel >= 6 ? dh - (h + y) : y);
api.event.off(img, 'error load abort', fn);
try {
ctx.globalAlpha = over.opacity || 1;
ctx.drawImage(img, x, y, w, h);
}
catch (er){}
queue.next();
};
api.event.on(img, 'error load abort', fn);
img.src = over.src;
if( img.complete ){
fn();
}
});
if( filter ){
queue.inc();
Image.applyFilter(canvas, filter, queue.next);
}
queue.check();
},
getMatrix: function (image){
var
m = api.extend({}, this.matrix)
, sw = m.sw = m.sw || image.videoWidth || image.naturalWidth || image.width
, sh = m.sh = m.sh || image.videoHeight || image.naturalHeight || image.height
, dw = m.dw = m.dw || sw
, dh = m.dh = m.dh || sh
, sf = sw/sh, df = dw/dh
, strategy = m.resize
;
if( strategy == 'preview' ){
if( dw != sw || dh != sh ){
// Make preview
var w, h;
if( df >= sf ){
w = sw;
h = w / df;
} else {
h = sh;
w = h * df;
}
if( w != sw || h != s