Icontem

Multiple File Drag and Drop Upload: Upload drag and dropped files

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Info   View files View files (12)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Last Updated Ratings Unique User Downloads Download Rankings  
2012-09-02 (2 years ago) RSS 2.0 feedNot enough user ratingsTotal: 495 All time: 42 This week: 49Down
Version License JavaScript version Categories  
drag-and-upload 1.0.0GNU General Publi...1.0jQuery, Events, Files and Folders
Description Author  

This object can upload drag and dropped files.

It starts to listen to drag and drop events to process files dragged to a given page element.

The class can process dropped files by uploading them to the server using jQuery AJAX support to upload one or more dropped files at a time.

Files selected with a given form file input can also be uploaded by this object.

Picture of Arun Kumar
Name: Arun Kumar <contact>
Classes: 1 package by
Country: India India
Age: 29
All time rank: 402 in India India
Week rank: 55 Down4 in India India Down

Details provided by the author  
# Multiple File Drag and Drop Upload

Multiple File Drag and Drop Upload this will work in modern browsers (HTML 5), File uploads happening through ajax
for this i used [Form Data] (http://www.w3.org/TR/FileAPI/) and [File Reader] (http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/) javascript API.

## File & Folders

 - /images 	-	Required images
 - /css 	-	Stylesheet files
 - /js  	-	Javascript files and libraries
 - /uploads	-  	New files holder
 - index.php -	Client side File
 - upload.php -	Server Side File

## Requirements

	- Jquery Library (version 1.7+)
	- HTML5

## How to use
	
### Config
	
All Fields required.
	
	support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",		// Valid file formats
	form: "demoFiler",					// Form ID
	dragArea: "dragAndDropFiles",		// Upload Area ID
	uploadUrl: "upload.php"				// Server side file url
	
### Init

 Its simple init. Just call function with required configurations.
 
 	initMultiUploader(config);	

## Example

```javascript
	var config = {
		support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",	
		form: "demoFiler",					
		dragArea: "dragAndDropFiles",		
		uploadUrl: "upload.php"				
	}
	$(document).ready(function(){
		initMultiUploader(config);
	});
```	
	
	<center><h1 class="title">Multiple Drag and Drop File Upload</h1></center>
	<div id="dragAndDropFiles" class="uploadArea">
		<h1>Drop Images Here</h1>
	</div>
	<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
		<input type="file" name="multiUpload" id="multiUpload" multiple />
		<input type="submit" name="submitHandler" id="submitHandler" value="Upload" class="buttonUpload" />
	</form>
	<div class="progressBar">
		<div class="status"></div>
	</div>	

	
  Files folder image Files  
File Role Description
Files folder imagecss (1 file)
Files folder imageimages (6 files)
Files folder imagejs (1 file)
Files folder imageuploads (1 file)
Accessible without login Plain text file index.php Example Auxiliary data
Accessible without login Plain text file README.md Data Auxiliary data
Accessible without login Plain text file upload.php Data Auxiliary data

  Files folder image Files  /  css  
File Role Description
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  images  
File Role Description
  Accessible without login Image file ajax-loader.gif Icon Icon image
  Accessible without login Image file ajax-loaderback.gif Icon Icon image
  Accessible without login Image file ajax-loadereee.gif Icon Icon image
  Accessible without login Image file image.png Icon Icon image
  Accessible without login Image file trash.png Icon Icon image
  Accessible without login Image file unknown.png Icon Icon image

  Files folder image Files  /  js  
File Role Description
  Plain text file multiupload.js Class Class source

  Files folder image Files  /  uploads  
File Role Description
  Accessible without login Image file jessica-alba-8_1280x800.jpg Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 100%Total:495All time:42
 This week:0This week:49Down