upload without preview

[faeb187]

Is it true that it's not possible to upload without getting a preview afterwards??
I tried with an empty string for the previewTemplate option.. FAIL

[coderguy9210]

While I'm pretty new to using it, my simple and quick answer is that you control the CSS in the .css file or by overriding the CSS in the previewTemplate. For example:

Just modifying the template to include a visibility:hidden;display:none; quickly hides the thumbnail...

You can use the CSS to rearrange or hide the elements to make it your own layout.

Hope this helps.

[enyo]

You can just set the option createImageThumbnails to false. Then it won't generate any thumbnails.

You can't just set an empty previewTemplate because Dropzone tries to update the (inexistent) elements.

Just hide the preview square with CSS if you also don't like the square with the filename (as @kennwags suggested).

Cheers

[faeb187]

@kennwags: performance problems.. why should I make DOM manipulations and then hide it... it's a hack ;)
@enyo: great, that's what I wanted to know.. thank you.

[nickbuddendotcom]

Would be good to add this to the site's API documentation.

[jackocnr]

I love this plugin so far, but I would also +1 for upload without preview.

[elendil1979]

previewTemplate : '<div style="display:none"></div>'

this works, but it would be desirable to tell false variable and worked

[vieiradev]

faeb187, the reason it doesnt work with an empty template is cause it waits for a DOM html object, so an empty string doesnt fit. U need an html node, so u can create a span, it doesnt display any width/height if it has no content inside (and if it has the span default css properties, ofcourse)

[faeb187]

@vieiradev yeah obv mate.. just tried to explain my issue.. I'm using jquery.filedrop atm...

just for the other guys who try with display:none.. that's no solution.. we're lightweight.. we're performance oriented.. If a developer starts to accept unproper things happening in his code (e.g. DOM access without using it).... that's just against modern innovative web development and poor =) maybe I'm a nerd.

[svedova]

Simply in your dropzone configuration provide an 'addedfile' option and leave it empty.

new Dropzone(mydiv, { addedfile: function(file) { console.log(file); } })

This will upload the file but do nothing afterwards.

[Jack97]

You can now accomplish this by setting the previewsContainer option to false which was introduced in #487.

[peppeocchi]

Just adding a note here, I was struggling with this issue as well, instead of hiding the preview (you always need a visual feedback IMHO), this is what worked for me without freezing the browser (tested with ~20k images dropped in)

var dropzoneBulkUpload = new Dropzone('div#productBulkImagesUpload', {
    url: ProductsService().getEndpoint('bulkUploadMedia'),
    uploadMultiple: false,
    autoDiscover: false,
    createImageThumbnails: false,
    previewTemplate: '<div class="uploaded-image"><span data-dz-name></span> <strong class="dz-size" data-dz-size></strong><div class="dz-error-message" data-dz-errormessage></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div></div>',
});

dropzoneBulkUpload.on('success', function (file, response) {
    if (response.status === 'success') {
        this.removeFile(file);
    }
});

#productBulkImagesUpload {
    max-height: 500px; // this is to prevent a very long page
    overflow: scroll;
}

.uploaded-image {
    border-bottom: 1px solid #eee;

    .dz-progress {
        display: block;
        height: 5px;
        .dz-upload {
            display: block;
            height: 100%;
            background: #b7e2b7;
            width: 0;
        }
    }
    .dz-error-message {
        color: red;
    }
    &.dz-complete .dz-progress {
        display: none;
    }
}

This is a preview (you can make it look prettier)