Icontem

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

Recommend this page to a friend!
  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 (4 years ago) RSS 2.0 feedNot enough user ratingsTotal: 508 All time: 44 This week: 15Up
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

Details
# 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:508
This week:0
All time:44
This week:15Up