DropzoneJS example #1

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

Read the full article on [Onyxdev](https://onyxdev.net/)

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.

Credits

Dropzone.js
jQuery 😀
Bootstrap
Font Awesome
Open Sans font

Stay safe 😷