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

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

In this post we will give you information about How to display existing files on server in Dropzone js using PHP. Hear we will give you detail about How to display existing files on server in Dropzone js using PHPAnd how to use it also give you demo for it if it is necessary.

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 >

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

<div class='content'>

<form action="uploadFile.php" >

</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:

Also see:JQuery HTML5 QR Code Scanner using Instascan JS Example

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

Hope this code and post will helped you for implement How to display existing files on server in Dropzone js using PHP. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

1  +  4  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US