Tagged: PHP : Upload multiple file using dropzone.js with drag and drop features

Dropzone Multiple Image upload validation 0

Dropzone Multiple Image upload validation

Today, We want to share with you Dropzone Multiple Image upload validation.In this post we will show you upload images to server using PHP dropzone.js, hear for How to Build a File Upload Form with Express and Dropzone.js we will give you demo and example for implement.In this post, we will learn about PHP – Upload multiple file using dropzone.js with drag and drop features with an example.

Dropzone Multiple Image upload validation

There are the Following The simple About Dropzone Multiple Image upload validation Full Information With Example and source code.

As I will cover this Post with live Working example to develop Upload Multiple Images and Files with Validation in Laravel, so the php upload file to server usind dropzone javascript library for this example is following below.

Setp 1: Include dropzone css and js

We use cdn for bootstrap, jquery, dropzone css and js

<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"></script>

Step 2 : Create File “index.php” to upload file

<div class="dropzone"></div>
<b>Note:</b> 1) You can upload maximum 10 files. File size should not exceed 10MB. 2) If you have to upload a screencast video, kindly upload it to either Google Drive or Dropbox and then share its link in the Request Description.

Step 3 : Configuring dropzones

/* DropZone */
Dropzone.autoDiscover = false;


var myDropzone = new Dropzone(".dropzone", {
    addRemoveLinks: true,
    dictRemoveFile : "×",
    url: "<?php echo $api_url.'storeproducts'?>",
    paramName: "file",
    maxFilesize: 10,
    dictFileTooBig: 'File size should not exceed 10MB.',
    parallelUploads:10,
    maxFiles: 10,
    dictMaxFilesExceeded : 'You can not upload more than 10 files. You can prepare zip of more than 10 files and then upload.',
    uploadMultiple:true,
    acceptedFiles: "image/*,application/pdf",
    autoProcessQueue: false,
    headers: {
        'Authorization': '<?php echo $your_apiKey;?>'
    }
});

Upload multiple images using Dropzone plugin with PHP validation

Dropzone.options.myDropzone = {
  url: "storeproducts.php",
  autoProcessQueue: true,
  uploadMultiple: true,
  parallelUploads: 10,
  maxFilesize: 6,
  dictFileTooBig: 'File size should not exceed 6MB.',
  maxFiles: 10,
  dictMaxFilesExceeded : 'You can not upload more than 10 files. You can prepare zip of more than 10 files and then upload.',
  addRemoveLinks: true,
  dictRemoveFile : "×",
  acceptedFiles: "image/*,application/pdf",
  method: 'put',    
  headers: {
        'Authorization': '<?php echo $your_apiKey;?>'
  }
  init: function() {
    this.on('processing', function(file) {
      data = file;
      console.log(this.options.url);
    });
    this.on('addedfile', function(file) {
      if (this.files[10] != null) {
        this.removeFile(this.files[0]);
      }
    });
    this.on('maxfilesreached', function(file) {
      if (this.files[10] != null) {
        this.removeFile(this.files[0]);
      }
    });
    this.on('success', function(file, resp) {
      if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
          setTimeout(function () {
             console.log('Pakaifo.com all are uploaded');
          }, 500);
      }
    });
    this.on("error", function(file, errorMessage, xhr) {
      alert(file.name + ": " + errorMessage)
    });
    this.on("queuecomplete", function(file) {
      alert("queuecomplete");
    });
    this.on("sending", function(file, xhr, formData) {
      var _send = xhr.send;
      xhr.send = function() {
        _send.call(xhr, file);
      }
    });
  }
}

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 Dropzone Multiple Image upload validation.
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.

custom ajax multiple file uploading Dropzone using PHP 0

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.

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://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://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.

Dropzone Multiple File Upload using PHP Example 0

Dropzone Multiple File Upload using PHP Example

Today, We want to share with you Dropzone Multiple File Upload using PHP Example.In this post we will show you Dropzone.js with php multiple files upload, hear for PHP – multiple file uploading dropzone js example we will give you demo and example for implement.In this post, we will learn about Drag and Drop File Upload using DropzoneJS and PHP with an example.

Dropzone Multiple File Upload using PHP Example

There are the Following The simple About Dropzone Multiple File Upload using PHP Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop How to Upload a File Using Dropzone.js With PHP, so the php multiple image upload dropzone for this example is following below.

Step 1: Create index.php file

index.php

<!DOCTYPE html>
<html>
<head>
	<title>Drag and Drop File Upload using DropzoneJS and PHP</title>
	<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
	<link rel="stylesheet" href="http://demo.itsolutionstuff.com/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"></script>
</head>
<body>

<h1>How to Upload a File Using Dropzone.js With PHP</h1>
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h2>PHP - Multiple Image upload using dropzone.js</h2>
			<form action="do_upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
				<div>
					<h3>Upload Your All the Multiple Image/Files By Click On This Box</h3>
				</div>
			</form>
		</div>
	</div>
</div>
<a href="https://pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
<b>PHP : Upload multiple file using dropzone.js with drag and drop features</b>

<script type="text/javascript">
	Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };
</script>


</body>
</html>

Step 2: Make do_upload.php file

do_upload.php

In PHP Serever side, There is a main global PHP Basic variable $_FILES that All the files keeps all the details related to Save uploaded with Store files.

<?php

$saveImgDir = 'uploads';

if (!empty($_FILES)) {
 $mytmpsFile = $_FILES['file']['tmp_name'];
 $file_imgname = $saveImgDir.'/'.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($mytmpsFile,$file_imgname);
}

?>

Step 3: Make simple uploads folder

create simple Your Serever or system “uploads” folder for Upload or save store all the images

php -S localhost:8000

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 Dropzone Multiple File Upload using PHP Example.
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.