Drag and Drop File Upload jQuery PHP Ajax HTML5 MySQL and Bootstrap

Posted 6:18 pm by muni & filed under Uncategorized.

In this tutorial we are going to implement drag and drop file upload using jQuery, PHP, ajax, html5, mysql and bootstrap. I am using blueimp jquery file upload plugin to implement this drag and drop image upload. Using this jQuery file upload plugin you can upload images, audio files(mp3, mp4, mpeg), video files, text files, zip files, word document and excel documents and etc.

This jQuery file upload plugin has image preview, video preview, and audio preview options before uploading it to server, where you can check it before uploading it to server.

Please refer my other tutorials on Ajax image upload using jQuery and PHP

Ajax Multiple Image Upload With Resize Using jQuery PHP

Ajax Image Upload Using jQuery, PHP and MySQL

Send Email with File Attachment (PDF, word files and images etc..) in PHP

Drag and Drop File Upload jQuery PHP Ajax HTML5 MySQL and Bootstrap

Design jQuery File Upload Form:

 Design your own html5 form with your own creative designs or use below html5 script to design the jquery File upload form.

<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
	<!-- Redirect browsers with JavaScript disabled to the origin page -->
	<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
	<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
	<div class="row fileupload-buttonbar">

		<!-- The global progress state -->
		<div class="col-lg-5 fileupload-progress fade">
			<!-- The global progress bar -->
			<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
				<div class="progress-bar progress-bar-success" style="width:0%;"></div>
			</div>
			<!-- The extended global progress state -->
			<div class="progress-extended">&nbsp;</div>
		</div>
	</div>
	<!-- The table listing the files available for upload/download -->
	<div style="drag" class='well'>
		<p class="text-center">Plase drag and drop your image here</p>
		<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

	</div>
</form>

Add jQuery File upload Plugin:

Please ensure following files are included in your php file.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
<!-- Custom styles for this template -->
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>

<!-- blueimp Gallery script -->
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/cors/jquery.xdr-transport.js"></script>
<![endif]-->

Code your JQuery File Upload Script:

Configure your file upload using jQuery script. Now select the form using it’s id and initialize jquery file upload plugin. Where your can specify ajax file upload URL, maxFileSize, minFileSize, fileType and etc.

    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: 'server/php/',
        maxFileSize: 50*1000
    });

Now code ajax file upload jQuery script.

// Load existing files:
$('#fileupload').addClass('fileupload-processing');
$.ajax({
	// Uncomment the following to send cross-domain cookies:
	//xhrFields: {withCredentials: true},
	url: $('#fileupload').fileupload('option', 'url'),
	dataType: 'json',
	context: $('#fileupload')[0]
}).always(function () {
	$(this).removeClass('fileupload-processing');
})

Code your PHP File Upload Script:

Please download source file it has php script to handle file upload in the php directory. This php script will upload the file in the same name of the uploaded file. If want to change uploaded file name, please follow this few steps.

Create the following function that will handle random name generation on the fly.

protected function generate_unique_filename($filename = "")
{
	$extension = "";
	if ( $filename != "" )
	{
		$extension = pathinfo($filename , PATHINFO_EXTENSION);
		$name = explode(".", $filename);

		if ( $extension != "" )
		{
			$extension = ".".$extension;
		}
	}
	return $name[0].time().$extension;
}

Comment out the following line of php script in the UploadHandler.php file and call the above function.(on line number 1056 in the handle_file_upload() function )

protected function handle_file_upload($uploaded_file, $name, $size, $type, $error, $index = null $content_range = null) {
        $file = new \stdClass();

        $file->name = $this->generate_unique_filename($name);

        ///$file->name = $this->get_file_name($uploaded_file, $name, $size, $type, $error,$index, $content_range);
        $file->size = $this->fix_integer_overflow((int)$size);

.