How to redraw snippet with Dropzone ajax call

3 months ago

Mardzis
Member | 30
+
0
-

Hi, I have a simple file upload with Dropzone and handler, after the upload is finished I would like to redraw a snippet with files preview, but during calling uploadFile from Dropzone there probably missing some attribute to let Nette know this is an ajax call redraw the snippet. Thanks for any suggestion and help.

Code I use:

Upload files with Dropzone and calling handle http://url/?do=uploadFiles

$('#dropzone').dropzone({
    method: 'POST',
    url: dropzoneSetting.uploadUrl + '?do=uploadFiles',
    init: function() {

      $(this.element).addClass('dropzone');

      this.on('success', function(file, serverFileName) {

        // Should I call something here?
        // $.nette.redrawSnippet('files');

      });
    }
});
public function handleUploadFiles()
{
    $files = $this->getHttpRequest()->getFiles();

    foreach ($files as $file) {
        $f = $this->filesRepository->uploadFile($file);
        if (in_array($f->extension, self::COMPRESSIBLE_IMAGE_EXTENSIONS)) {
            $this->tinify->compress($f);
        }
    }

    $this->files = $this->filesRepository->listFiles();

    $this->redrawControl("files");
}

Latte (the delete handle works perfectly):

<div n:snippet="files">
    {foreach $files as $file}
        <div class="file">
            <a href="{$basePath}/files/{$file->name}" class="preview">
                <img src="{$basePath}/files/{$file->name}" alt="{$file->name}">
            </a>
            <a class="ajax" n:href="deleteFile! $file->name"><span class="fa fa-trash text-danger"></span</a>
        </div>
    {/foreach}
</div>

3 months ago

Mardzis
Member | 30
+
0
-

Ok, one week later, solved with code below inside this.on('success'):

$.nette.ajax({
   url: dropzoneSetting.uploadUrl + '?do=uploadFiles',
   complete: function () {
      console.log("redraw");
   }
});