fileapi thumbs

fileapi thumbs.js

		(function (){
			var processing = false;

			if( !(FileAPI.support.html5 || FileAPI.support.flash) ){
				alert('Ooops, your browser does not support Flash and HTML5 :[');
			}

			function thumb(file, width, height, type){
				var image = FileAPI.Image(file), label = width+'x'+height, callback;

				if( type ){
					label += ' ('+type+')';
					image.resize(width, height, type);
				} else if( width ){
					image.preview(width, height);
				} else {
					label = 'original';
				}

				image.get(function (err, img){
					var el = document.createElement('div');
					el.innerHTML = '<label>'+label+'</label>';
					el.className = 'thumb';
					el.appendChild(img);
					thumbnails.appendChild(el);
					callback && callback();
				});

				return function (then){ callback = then; };
			}


			FileAPI.event.on(browse, 'change', function (evt){
				var file = FileAPI.getFiles(evt)[0];

				!processing && FileAPI.getInfo(file, function (err, info){
					if( info.width >= 480 && info.height >= 320 ){
						processing = true;
						thumbnails.innerHTML = ''; // clear
						loading.style.display = '';

						// 100x100
						thumb(file, 100, 100)(function (){
							// 320x240
							thumb(file, 320, 240)(function (){
								// 480x320 by min side
								thumb(file, 480, 320, 'min')(function (){
									// 480x320 by max side
									thumb(file, 480, 320, 'max')(function (){
										// Original
										thumb(file);
										processing = false;
										loading.style.display = 'none';
									});
								});
							});
						});
					}
					else {
						alert('Does not fit, you need more than: '+info.width+'x'+info.height);
					}
				});
			});
		})();

gistfile1.js

		(function (){
			var processing = false;

			if( !(FileAPI.support.html5 || FileAPI.support.flash) ){
				alert('Ooops, your browser does not support Flash and HTML5 :[');
			}

			function thumb(file, width, height, type){
				var image = FileAPI.Image(file), label = width+'x'+height, callback;

				if( type ){
					label += ' ('+type+')';
					image.resize(width, height, type);
				} else if( width ){
					image.preview(width, height);
				} else {
					label = 'original';
				}

				image.get(function (err, img){
					var el = document.createElement('div');
					el.innerHTML = '<label>'+label+'</label>';
					el.className = 'thumb';
					el.appendChild(img);
					thumbnails.appendChild(el);
					callback && callback();
				});

				return function (then){ callback = then; };
			}


			FileAPI.event.on(browse, 'change', function (evt){
				var file = FileAPI.getFiles(evt)[0];

				!processing && FileAPI.getInfo(file, function (err, info){
					if( info.width >= 480 && info.height >= 320 ){
						processing = true;
						thumbnails.innerHTML = ''; // clear
						loading.style.display = '';

						// 100x100
						thumb(file, 100, 100)(function (){
							// 320x240
							thumb(file, 320, 240)(function (){
								// 480x320 by min side
								thumb(file, 480, 320, 'min')(function (){
									// 480x320 by max side
									thumb(file, 480, 320, 'max')(function (){
										// Original
										thumb(file);
										processing = false;
										loading.style.display = 'none';
									});
								});
							});
						});
					}
					else {
						alert('Does not fit, you need more than: '+info.width+'x'+info.height);
					}
				});
			});
		})();