ItSolutionStuff.com

PHP Dropzone Display Existing Files from Server Example

By Hardik Savani • May 14, 2024
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>

<html>

<head>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href='https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.css' type='text/css' rel='stylesheet'>

<script src='https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js' type='text/javascript'></script>

<style type="text/css">

.dz-preview .dz-image img{

width: 100% !important;

height: 100% !important;

object-fit: cover;

}

</style>

</head>

<body>

<div class="container" >

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

<div class='content'>

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

</form>

</div>

</div>

<script type="text/javascript">

Dropzone.autoDiscover = false;

$(".dropzone").dropzone({

init: function() {

myDropzone = this;

$.ajax({

url: 'uploadFile.php',

type: 'post',

data: {request: 'fetch'},

dataType: 'json',

success: function(response){

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

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

myDropzone.emit("addedfile", mockFile);

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

myDropzone.emit("complete", mockFile);

});

}

});

}

});

</script>

</body>

</html>

Create uploadFile.php File:

<?php

/* Upload directory*/

$targetDir = "upload/";

$request = "upload";

if(isset($_POST['request'])){

$request = $_POST['request'];

}

/* Upload file */

if($request == "upload"){

$msg = "";

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

$msg = "Successfully uploaded";

}else{

$msg = "Error while uploading";

}

echo $msg;

exit;

}

/* 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;

if(!is_dir($file_path)){

$size = filesize($file_path);

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

}

}

}

closedir($dh);

}

}

echo json_encode($fileList);

exit;

}

I hope it can help you....

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

JQuery Ajax CRUD Operations in PHP MySQL Example

Read Now →

PHP MySQL Create Dynamic Treeview Example

Read Now →

PHP MySQL Column Sorting Example Tutorial

Read Now →

PHP Ajax Drag and Drop Sorting Table Rows Example

Read Now →

PHP AngularJS Populate Dynamic Dropdown Example

Read Now →

PHP Ajax Multiple Image Upload with Preview Example

Read Now →

How to Create Zip Folder and Download in PHP?

Read Now →

PHP MySQL Image Gallery CRUD Example

Read Now →

PHP MySQL Highcharts Chart Example

Read Now →

Multiple File Upload using Dropzone JS in PHP Example

Read Now →

Laravel - Multiple Images Uploading using dropzone.js Example

Read Now →

PHP Crop Image Before Upload using Croppie JS Example

Read Now →

PHP Paypal Payment Gateway Integration Example

Read Now →

Laravel Storage Dropbox Integration Example

Read Now →