custom ajax multiple file uploading Dropzone using PHP

custom ajax multiple file uploading Dropzone using PHP

Today, We want to share with you custom ajax multiple file uploading Dropzone using PHP.In this post we will show you Drag and Drop File Upload using DropzoneJS and PHP, hear for drag and drop multiple image upload in php we will give you demo and example for implement.In this post, we will learn about Drag and Drop ajax file upload using DropzoneJS and PHP with an example.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

custom ajax multiple file uploading Dropzone using PHP

There are the Following The simple About custom ajax multiple file uploading Dropzone using PHP Full Information With Example and source code.

As I will cover this Post with live Working example to develop Dropzone.js with php multiple files upload, so the PHP – multiple file uploading dropzone js for this example is following below.

Create Database Table

CREATE TABLE `users_mst` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `img_flname` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `dt_updated` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Database Configuration

conn_db.php

<?php
//Simple Config Database configuration
$dbHost     = "localhost";
$dbUsername = "myUsername";
$dbPassword = "mypasswordeneter";
$dbName     = "pakainfo";

// Create PHP MySQL database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

//simple PHP MySQL Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

Drag and Drop File Upload

index.html

<script src="plugin/jquery.js"></script>
<link rel="stylesheet" href="plugin/bootstrap-3.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js">
<h1>Dropzone Multiple File Upload using PHP Example</h1>
<form action="do_upload.php" class="dropzone"></form>
<a href="https://www.pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>

Upload Files to the PHP Server

do_upload.php

<?php
if(!empty($_FILES)){
    require 'conn_db.php';
    
    $baseFolder = "uploads/";
    $fileName = $_FILES['file']['name'];
    $targetFilePath = $baseFolder.$fileName;
    
    if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)){
        $insert = $db->query("INSERT INTO users_mst (img_flname, dt_updated) VALUES ('".$fileName."', NOW())");
    }
}
?>

View / Preview Uploaded Files

<?php
require 'conn_db.php';

$query = $db->query("SELECT * FROM users_mst ORDER BY id DESC");

if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
        $destination_path = 'uploads/'.$row["img_flname"];
        $fileImgMime = mime_content_type($destination_path);
?>
	<embed src="<?php echo $destination_path; ?>" type="<?php echo $fileImgMime; ?>" width="450px" height="380px" />
<?php }
}else{ ?>
    <p>No Any Images / file(s) found...</p>
<?php } ?>

Customize PHP DropzoneJS Drag and Drop jquery Ajax Upload

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropzone"></div>
<a href="https://www.pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
<script>
//Disabling autoDiscover
Dropzone.autoDiscover = false;

$(function() {
    //My Multiple Images/ files upload Dropzone class
    var liveDropzone = new Dropzone(".dropzone", {
		url: "do_upload.php",
		paramName: "imgvalues",
		maxFilesize: 10,
		maxFiles: 5,
		acceptedFiles: "image/*,application/pdf"
	});
});
</script>

Upload with Custom Button in Dropzone

<div class="dropzone"></div>
	
<button id="multiple_upload">UPLOAD</button>

<script>
//Disabling autoDiscover
Dropzone.autoDiscover = false;

$(function() {
    //Dropzone class
    var liveDropzone = new Dropzone(".dropzone", {
		url: "do_upload.php",
		paramName: "imgvalues",
		maxFilesize: 10,
		maxFiles: 5,
		acceptedFiles: "image/*,application/pdf",
		autoProcessQueue: false
	});
	
	$('#multiple_upload').click(function(){           
		liveDropzone.processQueue();
	});
});
</script>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about custom ajax multiple file uploading Dropzone using PHP.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Redirect page after delay using Angularjs Example
  2.   Dropzone Multiple Image upload validation
  3.   Laravel Toggle Switch with Ajax Update Database
  4.   Laravel Eloquent Multiple WHERE clauses
  5.   Laravel 6 Custom Date Validation Example
  6.   How to Open URL in New Tab using Vue JS
  7.   Drag And Drop Multiple File Uploading using DropzoneJS and PHP Example
  8.   Add Remove multiple Input Fields Dynamically in jQuery
  9.   Simple jQuery Form Validator validation
  10.   Dropzone Multiple File Upload using PHP Example