DropzoneJS example with a powerful PHP code to upload/delete file

DropzoneJS example with everything you will need, translations, custom preview and a powerful PHP code to handle upload/delete the file

DropzoneJS has been around for a couple of years now, and various features can be used in clever ways. I wanted here to share with you a full example with DropzoneJS and what you can do with it, made nice and easy including the PHP function to handle the file upload and delete from server.

For those who didn’t hear about it, DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.
You can read it’s docs on their website http://www.dropzonejs.com/

Features:

Upload files to your server with drag and drop.
Well commented and organized Javascript and PHP code that lights your way.
Thumbnails.

PHP validation that handles:
Upload or delete files.
Check if the upload folder exists and if we can write on it, and if there is any file with the same name.
Be sure that the file has been uploaded.
While deleting the previously uploaded file, check the directory’s permissions, check if the file exists, then delete the file, be sure we deleted the file.

Messages translations.
Custom preview for uploaded files.
And it’s responsive.

Let’s start

Of course, you should get the latest version of DropzoneJS http://www.dropzonejs.com/ and include in your project

In our example, I’m using Bootstrap, Font Awesome and jQuery, but they are not necessary.

Prepare the HTML form

There is a lot of unnecessary HTML code in our example, it’s just to look better.

<form action="file-upload.php" class="dropzone files-container">
	<div class="fallback">
		<input name="file" type="file" multiple />
	</div>
</form>

Now the exciting part 😀 , Javascript of course

initFileUploader: function(base, target) {
    var previewNode = document.querySelector("#onyx-dropzone-template"), // Dropzone template holder
        warningsHolder = $("#warnings"); // Warning messages' holder

    previewNode.id = "";

    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var onyxDropzone = new Dropzone(target, {
        url: ($(target).attr("action")) ? $(target).attr("action") : "../../file-upload.php", // Check that our form has an action attr and if not, set one here
        maxFiles: 5,
        maxFilesize: 20,
        acceptedFiles: "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.tsv,.ppt,.pptx,.pages,.odt,.rtf",
        previewTemplate: previewTemplate,
        previewsContainer: "#previews",
        clickable: true,

        createImageThumbnails: true,

        /**
            * The text used before any files are dropped.
            */
        dictDefaultMessage: "Drop files here to upload.", // Default: Drop files here to upload

        /**
            * The text that replaces the default message text it the browser is not supported.
            */
        dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.", // Default: Your browser does not support drag'n'drop file uploads.

        /**
            * If the filesize is too big.
            * `{{filesize}}` and `{{maxFilesize}}` will be replaced with the respective configuration values.
            */
        dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.", // Default: File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.

        /**
            * If the file doesn't match the file type.
            */
        dictInvalidFileType: "You can't upload files of this type.", // Default: You can't upload files of this type.

        /**
            * If the server response was invalid.
            * `{{statusCode}}` will be replaced with the servers status code.
            */
        dictResponseError: "Server responded with {{statusCode}} code.", // Default: Server responded with {{statusCode}} code.

        /**
            * If `addRemoveLinks` is true, the text to be used for the cancel upload link.
            */
        dictCancelUpload: "Cancel upload.", // Default: Cancel upload

        /**
            * The text that is displayed if an upload was manually canceled
            */
        dictUploadCanceled: "Upload canceled.", // Default: Upload canceled.

        /**
            * If `addRemoveLinks` is true, the text to be used for confirmation when cancelling upload.
            */
        dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?", // Default: Are you sure you want to cancel this upload?

        /**
            * If `addRemoveLinks` is true, the text to be used to remove a file.
            */
        dictRemoveFile: "Remove file", // Default: Remove file

        /**
            * If this is not null, then the user will be prompted before removing a file.
            */
        dictRemoveFileConfirmation: null, // Default: null

        /**
            * Displayed if `maxFiles` is st and exceeded.
            * The string `{{maxFiles}}` will be replaced by the configuration value.
            */
        dictMaxFilesExceeded: "You can not upload any more files.", // Default: You can not upload any more files.

        /**
            * Allows you to translate the different units. Starting with `tb` for terabytes and going down to
            * `b` for bytes.
            */
        dictFileSizeUnits: {tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b"},

    });

    Dropzone.autoDiscover = false;

    onyxDropzone.on("addedfile", function(file) { 
        $('.preview-container').css('visibility', 'visible');
        file.previewElement.classList.add('type-' + base.fileType(file.name)); // Add type class for this element's preview
    });

    onyxDropzone.on("totaluploadprogress", function (progress) {

        var progr = document.querySelector(".progress .determinate");

        if (progr === undefined || progr === null) return;

        progr.style.width = progress + "%";
    });

    onyxDropzone.on('dragenter', function () {
        $(target).addClass("hover");
    });

    onyxDropzone.on('dragleave', function () {
        $(target).removeClass("hover");    		
    });

    onyxDropzone.on('drop', function () {
        $(target).removeClass("hover");	
    });

    onyxDropzone.on('addedfile', function () {

        // Remove no files notice
        $(".no-files-uploaded").slideUp("easeInExpo");

    });

    onyxDropzone.on('removedfile', function (file) {

        $.ajax({
            type: "POST",
            url: ($(target).attr("action")) ? $(target).attr("action") : "../../file-upload.php",
            data: {
                target_file: file.upload_ticket,
                delete_file: 1
            }
        });

        // Show no files notice
        if ( base.dropzoneCount() == 0 ) {
            $(".no-files-uploaded").slideDown("easeInExpo");
            $(".uploaded-files-count").html(base.dropzoneCount());
        }

    });

    onyxDropzone.on("success", function(file, response) {
        let parsedResponse = JSON.parse(response);
        file.upload_ticket = parsedResponse.file_link;


        // Make it wait a little bit to take the new element
        setTimeout(function(){
            $(".uploaded-files-count").html(base.dropzoneCount());
            console.log('Files count: ' + base.dropzoneCount());
        }, 350);


        // Something to happen when file is uploaded, like showing a message
        if ( typeof parsedResponse.info !== 'undefined' ) {
            console.log(parsedResponse.info);
            warningsHolder.children('span').html(parsedResponse.info);
            warningsHolder.slideDown("easeInExpo");
        }
    });
}

Now the important part of the Javascript is these DropzoneJS options:
maxFiles: 5
maxFilesize: 20
acceptedFiles: “image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.tsv,.ppt,.pptx,.pages,.odt,.rtf”
previewTemplate: previewTemplate
previewsContainer: “#previews”
clickable: true

And it’s plain English 🙂, it doesn’t need an explanation.
You can go through the lines and read my comments, I tried to make everything simple.

For more options, you can read the docs on http://www.dropzonejs.com/

Our PHP code is like the following, it’s looking complex because it does a lot of checks 🤓

/**
 * Dropzone PHP file upload/delete
 */

// Check if the request is for deleting or uploading
$delete_file = 0;
if(isset($_POST['delete_file'])){ 
    $delete_file = $_POST['delete_file'];
}

$targetPath = dirname( __FILE__ ) . '/uploads/';

// Check if it's an upload or delete and if there is a file in the form
if ( !empty($_FILES) && $delete_file == 0 ) {

    // Check if the upload folder is exists
    if ( file_exists($targetPath) && is_dir($targetPath) ) {

        // Check if we can write in the target directory
        if ( is_writable($targetPath) ) {

            /**
             * Start dancing
             */
            $tempFile = $_FILES['file']['tmp_name'];

            $targetFile = $targetPath . $_FILES['file']['name'];

            // Check if there is any file with the same name
            if ( !file_exists($targetFile) ) {

                move_uploaded_file($tempFile, $targetFile);

                // Be sure that the file has been uploaded
                if ( file_exists($targetFile) ) {
                    $response = array (
                        'status'    => 'success',
                        'file_link' => $targetFile
                    );
                } else {
                    $response = array (
                        'status' => 'error',
                        'info'   => 'Couldn\'t upload the requested file :(, a mysterious error happend.'
                    );
                }

            } else {
                // A file with the same name is already here
                $response = array (
                    'status'    => 'error',
                    'info'      => 'A file with the same name is exists.',
                    'file_link' => $targetFile
                );
            }

        } else {
            $response = array (
                'status' => 'error',
                'info'   => 'The specified folder for upload isn\'t writeable.'
            );
        }
    } else {
        $response = array (
            'status' => 'error',
            'info'   => 'No folder to upload to :(, Please create one.'
        );
    }

    // Return the response
    echo json_encode($response);
    exit;
}


// Remove file
if( $delete_file == 1 ){
    $file_path = $_POST['target_file'];

    // Check if file is exists
    if ( file_exists($file_path) ) {

        // Delete the file
        unlink($file_path);

        // Be sure we deleted the file
        if ( !file_exists($file_path) ) {
            $response = array (
                'status' => 'success',
                'info'   => 'Successfully Deleted.'
            );
        } else {
            // Check the directory's permissions
            $response = array (
                'status' => 'error',
                'info'   => 'We screwed up, the file can\'t be deleted.'
            );
        }
    } else {
        // Something weird happend and we lost the file
        $response = array (
            'status' => 'error',
            'info'   => 'Couldn\'t find the requested file :('
        );
    }

    // Return the response
    echo json_encode($response);
    exit;
}

Screenshot:

* Thumbnails support has been added.

Finally

Download our working example or view demo from the buttons at the beginning of this post.
Please don’t hesitate to write to me if something went wrong with you 🙂 I’m always glad to help.

Important Note

The demo here is not really uploading any files to our server, it’s just for testing purposes.

References and Credits:

jQuery 😀
Bootstrap
Font Awesome
Open Sans font
Dropzone.js