Hello Devs,

In this tutorial, we are going to learn how to display existing files or image on server in dropzone js. 

Follow this step by step guide given below:



Step 1 :


Create Index.php File

<!DOCTYPE html>
<html>
<head>
    <title>How to Display Existing Files on Server in Dropzone JS - Rathorji.in</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>How to Display Existing Files on Server in Dropzone JS - Rathorji.in</h1>
  <div class='content'>
    <form action="upload.php" class="dropzone" >  
    </form> 
  </div> 
</div>
  
<script type="text/javascript">
  Dropzone.autoDiscover = false;
  $(".dropzone").dropzone({
    init: function() { 
      myDropzone = this;
      $.ajax({
        url: 'upload.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>



Step 2 :


Create upload.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 this example helps you.