previewTemplate - css selector

[iamsalnikov]

Hi!

Is it possible to pass in previewTemplate css selector element to be used as a previewTemplate?

For example, I have here an element:

<div id="dz-preview-template" class="dz-preview dz-file-preview">
    <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
        <div class="dz-size" data-dz-size></div>
        <img data-dz-thumbnail />
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
</div>

And I pass in previewTemplate selector #dz-preview-template.

[enyo]

At the moment it's not possible. Sorry. I'll have a look at it.

[Maxwell2022]

Hum, I'm not really sure what you want to do @iamsalnikov.
I'm using a custom template and I use the previewsContainer option to set the CSS selector:

$dropzone.dropzone({
        paramname: 'pic',
        parallelUploads: 2,
        thumbnailWidth:250,
        thumbnailHeight:150,
        previewsContainer: '#dz-preview-template',
        acceptedMimeTypes: "image/*",
...

What are you trying to achieve?

[iamsalnikov]

@Maxwell2022, i want pass to previewTemplate css selector instead of html.

Look:

$dropzone.dropzone({
        paramname: 'pic',
        parallelUploads: 2,
        thumbnailWidth:250,
        thumbnailHeight:150,
        previewTemplate: '<div id="dz-preview-template" class="dz-preview dz-file-preview"><div class="dz-details">       <div class="dz-filename"><span data-dz-name></span></div><div class="dz-size" data-dz-size></div><img data-dz-thumbnail /></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div></div>',
...

What i mean:

$dropzone.dropzone({
        paramname: 'pic',
        parallelUploads: 2,
        thumbnailWidth:250,
        thumbnailHeight:150,
        previewTemplate: '#previewTemplate',
...

Example, as i do now:

previewTemplate = $.trim($('<div/>').append('#previewTemplate').html());
$('#previewTemplate').remove();
$dropzone.dropzone({
        paramname: 'pic',
        parallelUploads: 2,
        thumbnailWidth:250,
        thumbnailHeight:150,
        previewTemplate: previewTemplate,
...

// HTML
<div id="previewTemplate" class="dz-preview dz-file-preview">
    <div class="dz-details">
        <div class="dz-filename"><span data-dz-name></span></div>
        <div class="dz-size" data-dz-size></div>
        <img data-dz-thumbnail />
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
</div>

So I can quite easily change the previewTemplate.

[Maxwell2022]

This is what I'm doing. My template is in an external file. I'm using a twig template so I use twigjs to render it but you can use jQuery template.

var tpl = twig({href: '/bundles/acmecontent/js/template/upload.html.twig', async:false});

$dropzone.dropzone({
        paramname: 'pic',
        enqueueForUpload: false,
        parallelUploads: 2,
        thumbnailWidth:250,
        thumbnailHeight:150,
        previewsContainer: '#preview-template',
        acceptedMimeTypes: "image/*",
        url: 'https://s3.amazonaws.com/'+bucket,
        addedfile: function(file)
        {
            file.status = 'ready';
            updateForm();
            var _this = this;
            file.template = $(tpl.render());
            $(this.previewsContainer).append(file.template);
            file.template.find('.filename span').text(file.name);
            file.template.find('#filename').html(file.name);
            file.template.find('.btn-delete').on('click', function(){
                $.when(deleteFileTemplate(file)).then(_this.removeFile(file));
            });
            return file.template.find('#filesize').html(this.filesize(file.size));
        },
       ...

[enyo]

I think querying for the element and using innerHTML is an OK workaround. Reopen if you disagree

[codeablehq]

Is it possible to completely avoid templating (previewsContainer and previewTemplate) , Dropzone comes with plenty of useful events I can use to build/use my own html

[lekhnath]

+1 Completely avoiding templating

[erbunao]

+1 for disabling preview

[enyo]

@lekhnath @erbunao @carmivore , this has been implemented by @kevinkrouse and is already merged (#487). Just set previewsContainer to false.