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' }, // POST-data (iframe, flash, html5) headers: { 'x-header': '...' }, // request headers (html5) files: { files: FileAPI.filter(fileList, function (file){ return !/image/.test(file.type); }), pictures: imageList }, imageTransform: { maxWidth: 1024, maxHeight: 768 }, imageAutoOrientation: true, fileprogress: function (evt){ // (flash, html5) var percent = evt.loaded/evt.total*100; // ... }, progress: function (evt){ // (flash, html5) 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 = over ? '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 } }, chunkSize: 0, // or chunk size in bytes, eg: FileAPI.MB*.5 (html5) chunkUploadRetry: 0, // number of retries during upload chunks (html5) imageTransform: { maxWidth: 1024, maxHeight: 768 }, imageAutoOrientation: true, prepare: function (file, options){ // prepare options for current file options.data.filename = file.name; }, 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! } } });

FileAPI.upload({ // .. imageOriginal: false, // don't send original on server 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) ; } } });

// (1) all images FileAPI.upload({ // .. imageAutoOrientation: true }); // (2) or so FileAPI.upload({ // .. imageAutoOrientation: true, imageTransform: { width: .., height: .. } }); // (3) or so FileAPI.upload({ // .. imageTransform: { rotate: 'auto' } }); // (4) only "800x600", original not modified FileAPI.upload({ // .. imageTransform: { "800x600": { width: 800, height: 600, rotate: 'auto' } } });

FileAPI.upload({ url: '...' , files: fileList , chunkSize: .5 * FileAPI.MB // 512KB , chunkUploadRetry: 1 , complete: function (err, xhr){} });

{ 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 (){} }