DropzoneJS - View files - How to do?

Question

DropzoneJS - View files - How to do?

Navigation

#1 by (2 votes)

2

How do I dropzoneJS view files that have already been uploaded? I followed the steps in the documentation and are uploading normally, but do not display the already uploaded files.

My form HTML code:

<form action="upload.php" class="dropzone" id="my-dropzone"></form>

Script:

<script type="text/javascript"> 
        $(document).ready(function() {          
            Dropzone.autoDiscover = false;
            $("#my-dropzone").dropzone({
                //url: "/file/post",
                addRemoveLinks : true,
                maxFilesize: 0.5,
                dictResponseError: 'Erro ao fazer o upload !'
            });
        })
</script>

<script type="text/javascript">     
        Dropzone.options.myDropzone = {
            init: function() {
                thisDropzone = this;                    
                $.get('upload.php', function(data) {
                    $.each(data, function(key,value){
                        var mockFile = { name: value.name, size: value.size };                           
                        thisDropzone.options.addedfile.call(thisDropzone, mockFile);             
                        thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name);                          
                    });                      
                });
            }
        };
</script>

Code in upload.php:

<?php

$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'uploads';  

if (!empty($_FILES)) {

   $tempFile = $_FILES['file']['tmp_name'];
   $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; 
   $targetFile =  $targetPath. $_FILES['file']['name']; 
   move_uploaded_file($tempFile,$targetFile);

} else { 

  $result  = array(); 
  $files = scandir($storeFolder);                  
  if ( false!==$files ) {
    foreach ( $files as $file ) {
        if ( '.'!=$file && '..'!=$file) {       
            $obj['name'] = $file;
            $obj['size'] = filesize($storeFolder.$ds.$file);
            $result[] = $obj;
        }
    }
}
    header('Content-type: text/json');              
    header('Content-type: application/json');
    echo json_encode($result);
}
?>

javascript dropzonejs

asked by anonymous 17.06.2014 / 16:17

1 answer

Class that selects the product name or code or value Overlay problem @media

score 2 · Answer 1

I was able to resolve and created a button that opens the files already sent, I made some changes in the script, as follows:

<script>
    Dropzone.options.myDropzone = {
        init: function() {
            thisDropzone = this;
            $.get('upload.php', function(data) {
                $.each(data, function(key,value){
                    var mockFile = { name: value.name, size: value.size };
                    thisDropzone.emit("addedfile", mockFile);
                    thisDropzone.emit("thumbnail", mockFile, "uploads/"+value.name);
                });
            });

            thisDropzone.on("addedfile", function(file) {

            var openButton = Dropzone.createElement("<button class='btn btn-sm btn-success'>Abrir</button>"); 
            var _this = this;

            openButton.addEventListener("click", function(e) {
              e.preventDefault();
              e.stopPropagation();
              window.open("/uploads/"+file.name);
            }); 
            file.previewElement.appendChild(openButton);
          }); 
        }
    };
</script>