How to display existing files on server in Dropzone js using PHP

By Hardik Savani | December 11, 2018 | Category : PHP jQuery

Hi Guys,

In this post, i would like to show you how to display uploaded files or image on server in dropzone js using php. we will learn to show existing images on dropzone js in php.

if you used dropzone js for document upload like images or files then you might be need to show also existing uploaded files from database using php mysql. so, in this example, i write small script to display all the uploaded files from upload folder and you can easily upload mode using dropzone js.

You need to just create two files and one "upload" folder to make it done this example, so just follow this example.

Create Index.php File:

<!DOCTYPE html>



<title>Dropzone display uploaded files on server PHP -</title>

<script src=""></script>

<link href='' type='text/css' rel='stylesheet'>

<script src='' type='text/javascript'></script>

<style type="text/css">

.dz-preview .dz-image img{

width: 100% !important;

height: 100% !important;

object-fit: cover;





<div class="container" >

<h1>Dropzone display uploaded files on server in PHP <BR/></h1>

<div class='content'>

<form action="uploadFile.php" class="dropzone" >




<script type="text/javascript">

Dropzone.autoDiscover = false;


init: function() {

myDropzone = this;


url: 'uploadFile.php',

type: 'post',

data: {request: 'fetch'},

dataType: 'json',

success: function(response){

$.each(response, function(key,value) {

var mockFile = { name:, size: value.size};

myDropzone.emit("addedfile", mockFile);

myDropzone.emit("thumbnail", mockFile, value.path);

myDropzone.emit("complete", mockFile);









Create uploadFile.php File:


/* Upload directory*/

$targetDir = "upload/";

$request = "upload";


$request = $_POST['request'];


/* Upload file */

if($request == "upload"){

$msg = "";

if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetDir.$_FILES['file']['name'])) {

$msg = "Successfully uploaded";


$msg = "Error while uploading";


echo $msg;



/* Read files from */

if($request == 'fetch'){

$fileList = [];

$dir = $targetDir;

if (is_dir($dir)){

if ($dh = opendir($dir)){

while (($file = readdir($dh)) !== false){

if($file != '' && $file != '.' && $file != '..'){

$file_path = $targetDir.$file;


$size = filesize($file_path);

$fileList[] = ['name'=>$file, 'size'=>$size, 'path'=>$file_path];







echo json_encode($fileList);



I hope it can help you....

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: