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

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


tutorials - 5 undefined, 2020

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

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;

}

Our Sponsors

NodeJS Experts
React Experts
PHP Experts
AngularJS Experts
Aws Experts
Firebase Experts

Top Applications in TutorialStuff

Top Experts In TutorialStuff

Trending On TutorialStuff