Download raw (3.3 KB)

(function( $ ){
	var area, s;
	// Methods
	var m = {
		traverse: function(files, folderDest, encrypt){
			if (typeof files !== "undefined") {
				for (var i=0, l=files.length; i<l; i++) {
					m.upload(files[i], folderDest, encrypt);
				}
			} else {
				$(area).html(nosupport);
			}	
		},
		upload: function(file, folderDest, encrypt){
			$(area).empty();
			var progress = $('<div>',{'class':'progress'}),	xhr, requests;
			$(area).append(progress);
			
			// File type control
			//if (typeof FileReader === "undefined" || !(/image/i).test(file.type)) {
				//$(area).html(file.type,s.noimage); 
				//alert('only image files: jpeg, png, gif');
				//return false;
			//}

			// File size control
			if (file.size > (s.maxsize * 1024)) {
				$(area).html(file.type,s.noimage); 
				alert('max upload size: ' + s.maxsize + 'Kb');
				return false;
			}
			
			// Uploading - for Firefox, Google Chrome and Safari
			xhr = new XMLHttpRequest();
			// Update progress bar
			xhr.upload.addEventListener("progress", function (e) {
				if (e.lengthComputable) {
					var loaded = Math.ceil((e.loaded / e.total) * 100) + "%";
					progress.css({'height':loaded}).html(loaded);
				}
			}, false);
			
			// File uploaded
			xhr.addEventListener("load", function (e) {
			    $(area).html(e.target.responseText);
				progress.addClass('uploaded');
				progress.html(s.uploaded).fadeOut('slow');
			}, false);

			// Set request parameters
            // TODO: fix extension using file.type for instance
			requests = '?type=' + $(area).data('type');

			xhr.open("post", s.post + requests, true); 

            // Set appropriate headers
		    xhr.setRequestHeader("Content-Type", "multipart/form-data");
		    xhr.setRequestHeader("X-File-Name", file.fileName);
		    xhr.setRequestHeader("X-File-Size", file.fileSize);
		    xhr.setRequestHeader("X-File-Type", file.type);
			xhr.setRequestHeader("X-File-Location", folderDest + '/');
			xhr.setRequestHeader("X-File-Encrypt", encrypt);
            console.log(file);

		    xhr.send(file);
		}
	};
	/**
	* @param folderDest string specify the destination folder
	* @param encrypt string active encryption
	*/
	$.fn.droparea = function(o) {
		// Settings
	    s = {
			'instructions'	: 'drop an image file here',
			'over'			: 'drop file here!',
			'nosupport'		: 'No support for the File API in this web browser',
			'noimage'		: 'Unsupported file type!',
			'uploaded'		: 'Uploaded',
			'maxsize'		: '5000', //Kb
			'post'			: 'upload.php',
			'folderDest'    : '',
			'encrypt'		: 'yes'
	    };
		this.each(function(){
			if(o) $.extend(s, o);
		    $(this)
			    .html(s.instructions)
			    .bind({
			    dragleave: function (e) {
					e.preventDefault();
					e.stopPropagation();
					var target = e.target;
					if (target && target === area) {
						$(this).removeClass('over').html(s.instructions);
					}
				},
				dragenter: function (e) {
					e.preventDefault();
					e.stopPropagation();
					area = this;
			    	$(this).addClass('over').html(s.over);
				},
				dragover: function (e) {
					e.preventDefault();
					e.stopPropagation();
				}
			    });
			this.addEventListener("drop", function (e) {
				m.traverse(e.dataTransfer.files, s.folderDest, s.encrypt);
				e.preventDefault();
		    	e.stopPropagation();
				$(this).removeClass('over');
			},false);				
		});
	};
})( jQuery );