var input = document.getElementById('user-files'); var previewNode = document.getElementById('preview-list'); // Drag'n'Drop FileAPI.event.dnd(previewNode, function (over){ $(this).css('background', over ? 'red' : ''); }, function (files){ // .. }); FileAPI.event.on(input, 'change', function (evt){ var files = FileAPI.getFiles(evt.target); // or FileAPI.getFiles(evt) // filtering FileAPI.filterFiles(files, function (file, info){ if( /image/.test(file.type) && info ){ returninfo.width >= 320 && info.height >= 240; } else { returnfile.size > 128; } }, function (fileList, ignor){ if( ignor.length ){ // ... } if( !fileList.length ){ // empty file list return; } // do preview var imageList = FileAPI.filter(fileList, function (file){ return /image/.test(file.type); }); FileAPI.each(imageList, function (imageFile){ FileAPI.Image(imageFile) .preview(100, 120) .get(function (err, image){ if( err ){ // ... } else { previewNode.appendChild(image); } }) ; }); // upload on server var xhr = FileAPI.upload({ url: '...', data: { foo: 'bar' }, headers: { 'x-header': '...' }, files: { files: FileAPI.filter(fileList, function (file){ return !/image/.test(file.type); }), pictures: imageList }, imageTransform: { maxWidth: 1024, maxHeight: 768 }, fileprogress: function (evt){ var percent = evt.loaded/evt.total*100; // ... }, progress: function (evt){ var percent = evt.loaded/evt.total*100; // ... }, complete: function (err, xhr){ // ... } }); }); });

FileAPI.event.on('#my-file-1', 'change', onSelect); // or jQuery $('#my-file-2').on('change', onSelect); function onSelect(evt/**Event*/){ // (1) extract fileList from event var files = FileAPI.getFiles(evt); // (2) or so var files = FileAPI.getFiles(evt.target); }

function onDrop(evt){ FileAPI.getDropFiles(evt, function (files){ if( files.length ){ // ... } }); } // OR var el = document.getElementById('el'); FileAPI.event.dnd(el, function (over/**Boolean*/, evt/**Event*/){ el.style.background = ever ? 'red' : '': }, function (files/**Array*/, evt/**Event*/){ // ... });

FileAPI.getInfo(imageFile/**File*/, function (err/**Boolean*/, info/**Object*/){ if( !err ){ switch( info.exif.Orientation ){ // ... } } }); // ... FileAPI.addInfoReader(/^image/, function (file/**File*/, callback/**Function*/){ // http://www.nihilogic.dk/labs/exif/exif.js // http://www.nihilogic.dk/labs/binaryajax/binaryajax.js FileAPI.readAsBinaryString(file, function (evt){ if( evt.type == 'load' ){ var binaryString = evt.result; var oFile = new BinaryFile(binaryString, 0, file.size); var exif = EXIF.readFromBinaryFile(oFile); callback(false, { 'exif': exif || {} }); } else if( evt.type == 'error' ){ callback('read_as_binary_string'); } else if( evt.type == 'progress' ){ // ... } }); });

FileAPI.filterFiles(files, function (file, info){ if( /image/.test(file.type) && info ){ returninfo.width > 320 && info.height > 240; } returnfile.size < 10 * FileAPI.MB; }, function (result, ignor){ // ... });

FileAPI.readAsImage(file, function (evt){ if( evt.type == 'load' ){ var images = document.getElementById('images'); images.appendChild(evt.result); } else { // ... } }); FileAPI.readAsDataURL(file, function (evt){ if( evt.type == 'load' ){ // success var result = evt.result; } else if( evt.type == 'progress' ){ var pr = evt.loaded/evt.total * 100; } else { // error } });

var xhr = FileAPI.upload({ url: '...', data: { foo: 'bar' }, headers: { 'x-header': '...' }, files: { images: FileAPI.filter(files, function (file){ return /image/.test(file.type); }), customFile: { file: 'generate.txt', blob: customFileBlob } }, imageTransform: { maxWidth: 1024, maxHeight: 768 }, upload: function (xhr, options){ // start uploading }, fileupload: function (xhr, options){ // start file uploading }, fileprogress: function (evt){ // progress file uploading var filePercent = evt.loaded/evt.total*100; }, filecomplete: function (err, xhr){ if( !err ){ var response = xhr.responseText; } }, progress: function (evt){ // total progress uploading var totalPercent = evt.loaded/evt.total*100; }, complete: function (err, xhr){ if( !err ){ // Congratulations, the uploading was successful! } } });

imageTransform: { // (1) Resize to 120x200	resize: { width: 120, height: 200 } // (2) create preview 320x240	thumb: { width: 320, height: 240, preview: true } // (3) Resize by max side	max: { maxWidth: 800, maxHeight: 600 } // (4) Custom resize	custom: function (info, transform){ return transform .crop(100, 100, 300, 200) .resize(100, 50) ; } }

{ name: 'fileName', type: 'mime-type', size: 'fileSize' }

{ status: Number, statusText: Number, readyState: Number, response: Blob, responseXML: XML, responseText: String, responseBody: String, getResponseHeader: function (name/**String*/)/**String*/{}, getAllResponseHeaders: function ()/**Object*/{}, abort: function (){} }