Oj Obasi
Oj Obasi

I am also and will continue to be a student of web design and development. My tutorials may not be for you. If you feel that way, then search online for better tutorials.

Upload Delete from server MySQL, uploaded file in Dropzone.js using PHP

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

In this tutorial, we use DropzoneJS to upload images to server and also save the file links on a MySQL database.

There are a few things we want to achieve here:-

1. Upload files to server and save links in MySQL database.
2. Use DropzoneJS , Ajax, PHP to preview images based on product unique ID.
3. Delete the uploaded files with Ajax confirmation.
4. Redirect to another page after successful upload.

To do this , we have a MySql table 'myproducts' with products in it and we want each product to have its own 3 main images.

For this tutorial , we initialized some DropzoneJS functions like

autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 100,
acceptedFiles: 'image/jpeg, image/png',
maxFiles: 3,

We turn autoProcessQueue: false , this will prevent , DropzoneJS from auto uploading our files. So our files will only be uploaded after a button click.

We use PHP to upload files base on a 'product' unique id 'pid'.

To redirect after upload completion, uncomment, this line in the 'product.php' script section:

//window.setTimeout(function() { window.location.href = "index.php"; }, 1000);

Check the 'Demo for better understanding. Files available for download.

if you have any questions, leave a comment below.