Upload files with dropzone.js and php

dropzone.php

<?php

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

?>

<form id="dropzone-form" action="./" method="POST" enctype="multipart/form-data">

    <div class="uk-margin">
        <input class="uk-input" type="text" name="name" palceholder="Name" />
    </div>
    
    <div class="uk-margin">
        <input class="uk-input" type="email" name="email" palceholder="Email Address" />
    </div>

    <div id="dropzone" class="dropzone"></div>

    <div class="uk-margin-top">
        <input id="submit-dropzone" class="uk-button uk-button-primary" type="submit" name="submitDropzone" value="Submit" />
    </div>

</form>

<link rel="stylesheet" href="dropzone.min.css">
<script src="dropzone.min.js"></script>
<script src="my-dropzone.js"></script>

my-dropzone.js

// disable autodiscover
Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#dropzone", {
    url: "upload.php",
    method: "POST",
    paramName: "file",
    autoProcessQueue : false,
    acceptedFiles: "image/*",
    maxFiles: 5,
    maxFilesize: 0.3, // MB
    uploadMultiple: true,
    parallelUploads: 100, // use it with uploadMultiple
    createImageThumbnails: true,
    thumbnailWidth: 120,
    thumbnailHeight: 120,
    addRemoveLinks: true,
    timeout: 180000,
    dictRemoveFileConfirmation: "Are you Sure?", // ask before removing file
    // 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",
});

myDropzone.on("addedfile", function(file) {
    //console.log(file);
});

myDropzone.on("removedfile", function(file) {
    // console.log(file);
});

// Add mmore data to send along with the file as POST data. (optional)
myDropzone.on("sending", function(file, xhr, formData) {
    formData.append("dropzone", "1"); // $_POST["dropzone"]
});

myDropzone.on("error", function(file, response) {
    console.log(response);
});

// on success
myDropzone.on("successmultiple", function(file, response) {
    // get response from successful ajax request
    console.log(response);
    // submit the form after images upload
    // (if u want yo submit rest of the inputs in the form)
    document.getElementById("dropzone-form").submit();
});


/**
 *  Add existing images to the dropzone
 *  @var images
 *
 */
 
var images = [
	{name:"image_1.jpg", url: "example/image1.jpg", size: "12345"},
	{name:"image_2.jpg", url: "example/image2.jpg", size: "12345"},
	{name:"image_2.jpg", url: "example/image2.jpg", size: "12345"},
] 

for(let i = 0; i < images.length; i++) {

    let img = images[i];
    //console.log(img.url);

    // Create the mock file:
    var mockFile = {name: img.name, size: img.size, url: img.url};
    // Call the default addedfile event handler
    myDropzone.emit("addedfile", mockFile);
    // And optionally show the thumbnail of the file:
    myDropzone.emit("thumbnail", mockFile, img.url);
    // Make sure that there is no progress bar, etc...
    myDropzone.emit("complete", mockFile);
    // If you use the maxFiles option, make sure you adjust it to the
    // correct amount:
    var existingFileCount = 1; // The number of files already uploaded
    myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

}

// button trigger for processingQueue
var submitDropzone = document.getElementById("submit-dropzone");
submitDropzone.addEventListener("click", function(e) {
    // Make sure that the form isn't actually being sent.
    e.preventDefault();
    e.stopPropagation();

    if (myDropzone.files != "") {
        // console.log(myDropzone.files);
        myDropzone.processQueue();
    } else {
	// if no file submit the form    
        document.getElementById("dropzone-form").submit();
    }

});

upload.php

<?php

// define absolute folder path
$dest_folder = 'ABSOLUTE_FOLDER_PATH/';

if (!empty($_FILES)) {
	
	// if dest folder doesen't exists, create it
	if(!file_exists($dest_folder) && !is_dir($dest_folder)) mkdir($dest_folder);
	
	/**
	 *	Single File 
	 *	uploadMultiple = false
	 *	@var $_FILES['file']['tmp_name'] string, file_name
	 */
	// $tempFile = $_FILES['file']['tmp_name'];        
    // $targetFile =  $dest_folder . $_FILES['file']['name'];
    // move_uploaded_file($tempFile,$targetFile); 
    
    /**
     *  Multiple Files
     *  uploadMultiple = true
     *  @var $_FILES['file']['tmp_name'] array
     *
     */
    foreach($_FILES['file']['tmp_name'] as $key => $value) {
        $tempFile = $_FILES['file']['tmp_name'][$key];
        $targetFile =  $dest_folder. $_FILES['file']['name'][$key];
        move_uploaded_file($tempFile,$targetFile);
    }
    
    /**
     *	Response 
     *	return json response to the dropzone
     *	@var data array
     */
    $data = [
    	"file" => $_POST["file"],
    	"dropzone" => $_POST["dropzone"],
    ];
    header('Content-type: application/json');
    echo json_encode($data);

    exit();

}

My upload.php

// define absolute folder path
$dest_folder = 'uploads/';

if (!empty($_FILES)) {

// if dest folder doesen't exists, create it
if(!file_exists($dest_folder) && !is_dir($dest_folder)) mkdir($dest_folder);

/**
 *	Single File 
 *	uploadMultiple = false
 *	@var $_FILES['file']['tmp_name'] string, file_name
 */
// $tempFile = $_FILES['file']['tmp_name'];        
// $targetFile =  $dest_folder . $_FILES['file']['name'];
// move_uploaded_file($tempFile,$targetFile); 

/**
 *  Multiple Files
 *  uploadMultiple = true
 *  @var $_FILES['file']['tmp_name'] array
 *
 */
foreach($_FILES['file']['tmp_name'] as $key => $value) {
    $tempFile = $_FILES['file']['tmp_name'][$key];
    $targetFile =  $dest_folder. $_FILES['file']['name'][$key];
    move_uploaded_file($tempFile,$targetFile);
}

/**
 *	Response 
 *	return json response to the dropzone
 *	@var data array
 */
if ($_POST["dropzone"]) {
 
    $host = "localhost";
    $root = "root";
    $pwd = "";

    try {
    $conn = new PDO("mysql:host=$host;dbname=ecomm", $root, $pwd);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    } catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
    }
    $titre = $_POST["titre"];
    $categorie = $_POST["categorie"];
    $deadline = $_POST["deadline"];
    $status = $_POST["status"];
    $montant = $_POST["montant"];
    $type_annonce = $_POST["type_annonce"];
    $prenom = $_POST["prenom"];
    $nom = $_POST["nom"];
    $phone = $_POST["phone"];
    $description = $_POST["description"];
    $stmt = $conn->prepare("insert into annonce set titre=?, categorie=?, deadline=?, status=?,montant=?, type_annonce=?, prenom=?, nom=?, phone=?, description=?, photos=?");
    $stmt->execute([$titre, $categorie, $deadline, $status, $montant, $type_annonce, $prenom, $nom, $phone, $description, $targetFile]);


    // upload files
    // send emails

    /**
     *	Response 
     *	return json response to the dropzone
     *	@var data array
     */
    $data = [
        status: "success"
        message: "Done!"
    ];
    header('Content-type: application/json');
    echo json_encode($data);
    exit();
}

}

Hi,
You can upload files and handle db stuff in one ajax request.

if ($_POST["dropzone"]) {
    
    // Uplod file
    // need to define destination $dest_folder = ""
    $tempFile = $_FILES['file']['tmp_name'];        
    $targetFile =  $dest_folder . $_FILES['file']['name'];
    move_uploaded_file($tempFile,$targetFile); 
    
    // do your db stuff
    // save file path to the db, in this case that's $targetFile
    .... connect to db...
    $image= $targetFile;
   
   $response = [
       status => "success"
   ]
   
    header('Content-type: application/json');
    echo json_encode($response);
    exit();
}

Hello how are you?
I need to validate if there is any file in POST. What is the way to do this using dropzone?

I tried it this way but it didn't work. I want to check if there is at least 3 files in the form, if it doesn't exist then it displays a message and doesn't trigger the form.

init: function () {
            var myDropzone = this;
            $('html').on('submit', '.sendMail_form', function (e) {
                e.preventDefault();
                var form = $(this);
                form.find('img').fadeIn('fast').css('display', 'inline-block');
                if (myDropzone.files !== "") {
                    myDropzone.processQueue();
                } else {     
                    $('.sendMail_form').find('img').fadeOut('slow', function () {
                        swal.fire({
                            "title": 'ATTENTION',
                            "text": 'It is mandatory to attach all documentation, check at the end of this page if any documents are missing.',
                            "type": 'warning',
                            "confirmButtonClass": 'btn btn-warning',
                        });
                    });
                }
            });

Hi,
Try to use myDropzone.files.length > 0 instead of myDropzone.files !== "" to check if there is files attached

My friend, thank you. The only way I could make it work was with your code.
How would you display the files already uploaded to the server?
I am using dropzone to upload a form with images and other inputs. Now I want to give the user the possibility to edit the entry. So I want to retrieve what the user did and display in the form having it already filled.

Hello Kreativan,
Is it to be used as plugin for WP for example ?