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

By Hardik Savani | December 11, 2018 | | 5898 Viewer | 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>

<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....



***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: