Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dropzone.js with php multiple files upload
<?php
// define absolute folder path
$storeFolder = 'ABSOLUTE_FOLDER_PATH/'
// if folder doesn't exists, create it
if(!file_exists($storeFolder) && !is_dir($storeFolder)) {
mkdir($storeFolder);
}
// upload files to $storeFolder
if (!empty($_FILES)) {
/**
* uploadMultiple = false
* When uploading file by file, upload on fly
*
*/
// $tempFile = $_FILES['file']['tmp_name'];
// $targetFile = $storeFolders . $_FILES['file']['name'];
// move_uploaded_file($tempFile,$targetFile);
/**
* uploadMultiple = true
* When uploading multiple files in a single request.
* Way to go if using dropzone in a form with other fields,
* and when uploading files on form submit via button... myDropzone.processQueue();
*
* $_FILES['file']['tmp_name'] is an array so have to use loop
*
*/
foreach($_FILES['file']['tmp_name'] as $key => $value) {
$tempFile = $_FILES['file']['tmp_name'][$key];
$targetFile = $storeFolder. $_FILES['file']['name'][$key];
move_uploaded_file($tempFile,$targetFile);
}
}
?>
<!-- include dropzone script & style -->
<link rel="stylesheet" href="<?=$config->urls->templates?>lib/dropzone/dropzone.css">
<script src="<?=$config->urls->templates?>lib/dropzone/dropzone.js"></script>
<script>
// disable auto discover
Dropzone.autoDiscover = false;
// init dropzone on id (form or div)
$(document).ready(function() {
var myDropzone = new Dropzone("#myDropzone", {
url: "<?=$page->url?>",
paramName: "file",
autoProcessQueue: false,
uploadMultiple: true, // uplaod files in a single request
parallelUploads: 100, // use it with uploadMultiple
maxFilesize: 1, // MB
maxFiles: 5,
acceptedFiles: ".jpg, .jpeg, .png, .gif, .pdf",
addRemoveLinks: true,
// Language Strings
dictFileTooBig: "File is to big ({{filesize}}mb). Max allowed file size is {{maxFilesize}}mb",
dictInvalidFileType: "Invalid File Type",
dictCancelUpload: "Cancel",
dictRemoveFile: "Remove",
dictMaxFilesExceeded: "Only {{maxFiles}} files are allowed",
dictDefaultMessage: "Drop files here to upload",
});
});
Dropzone.options.myDropzone = {
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
$("#dropzoneSubmit").on("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (myDropzone.files != "") {
myDropzone.processQueue();
} else {
$("#myDropzone").submit();
}
});
// on add file
this.on("addedfile", function(file) {
// console.log(file);
});
// on error
this.on("error", function(file, response) {
// console.log(response);
});
// on start
this.on("sendingmultiple", function(file) {
// console.log(file);
});
// on success
this.on("successmultiple", function(file) {
// submit form
$("#form").submit();
});
}
};
</script>
<!-- dropzone as a form
<form id="myDropzone" action="./" enctype="multipart/form-data" class="dropzone" method="post"></form>
-->
<!-- dropzone as a div in a form -->
<form id="form" action="./" method="POST">
<!-- standard form fields -->
<input type="text" name="name" />
<input type="email" name="email" />
<!-- dropzone field -->
<div id="myDropzone" class="dropzone"></div>
</form>
<!-- submit button -->
<button id="dropzoneSubmit" class="uk-button uk-button-primary">Submit</button>
@fhefh2015

This comment has been minimized.

Copy link

fhefh2015 commented Sep 26, 2018

$storeFolder = 'ABSOLUTE_FOLDER_PATH/' missed ;
it should be $storeFolder = 'ABSOLUTE_FOLDER_PATH/';;

@bodomalo

This comment has been minimized.

Copy link

bodomalo commented Mar 15, 2019

It does not upload any $_file for me.
I select a file, I click on submit, and then the same php file is shown again. It seems $_File is not transfered.

I have this problem ALWAYS. What is wrong?

@PkLearning

This comment has been minimized.

Copy link

PkLearning commented Mar 24, 2019

hello i have a little issues about $_POST['']
when i submit $_POST[''] is empty when insert to database
i have no idea how can i fix it

example $_POST['name'] and $_POST['email']

@kreativan

This comment has been minimized.

Copy link

kreativan commented Mar 28, 2019

A bit more cleaner implementation without jQuery
https://gist.github.com/kreativan/83febc214d923eea34cc6f557e89f26c

@kreativan

This comment has been minimized.

Copy link

kreativan commented Mar 28, 2019

It does not upload any $_file for me.
I select a file, I click on submit, and then the same php file is shown again. It seems $_File is not transfered.

I have this problem ALWAYS. What is wrong?

Make sure u set the right url for the dropzone, it's an ajax request

@kreativan

This comment has been minimized.

Copy link

kreativan commented Mar 28, 2019

hello i have a little issues about $_POST['']
when i submit $_POST[''] is empty when insert to database
i have no idea how can i fix it

example $_POST['name'] and $_POST['email']

Image upload and "normal" form post are two separate requests.
One ajax request sent by the dropzone on provided url, and it should handle file upload, and another is normal form submit after successful dropzone request.

In this example, only file upload is handled, but not the $_POST. Form is submited but not processed so u need to:

// process $_POST request
if(isset($_POST["email"])) {  
    // Do something    
    print_r($_POST);
}

This is a bit cleaner example: https://gist.github.com/kreativan/83febc214d923eea34cc6f557e89f26c

@PkLearning

This comment has been minimized.

Copy link

PkLearning commented Mar 30, 2019

hello i have a little issues about $_POST['']
when i submit $_POST[''] is empty when insert to database
i have no idea how can i fix it
example $_POST['name'] and $_POST['email']

Image upload and "normal" form post are two separate requests.
One ajax request sent by the dropzone on provided url, and it should handle file upload, and another is normal form submit after successful dropzone request.

In this example, only file upload is handled, but not the $_POST. Form is submited but not processed so u need to:

// process $_POST request
if(isset($_POST["email"])) {  
    // Do something    
    print_r($_POST);
}

This is a bit cleaner example: https://gist.github.com/kreativan/83febc214d923eea34cc6f557e89f26c

thank you it's work!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.