dropzone - make preview files clickable

Question

Here is what I've done in my django project:

<link href="{% static 'media/dropzone/dist/min/dropzone.min.css' %}" type="text/css" rel="stylesheet" />
<form class="dropzone" id="my-media-dropzone" action="/some/url/" method="post" enctype="multipart/form-data">{% csrf_token %}</form>
<script src="{% static 'media/dropzone/dist/dropzone.js' %}"></script>
<script type="text/javascript">
    Dropzone.options.myMediaDropzone = {
        paramName: "file",
        maxFileSize: 2,
        uploadMultiple: false,
        clickable: true // I want the preview file to be clickable
    };
</script>

Files are added to the dropzone and preview files are shown. So, if you add 5 files, then 5 files are shown in the dropzone box.

I want to make these preview files clickable (make them URL links).

How do I do this?

Answer 1

The docs aren't great but if you look under Tips, you can find what you're looking for:

myDropzone.on("addedfile", function(file) {
  file.previewElement.addEventListener("click", function() {
    myDropzone.removeFile(file);
  });
});

Of course, you don't want the file to be removed when it's clicked, but you can replace the myDropzone.removeFile(file); line with whatever you want.

Maybe something like:

window.location.replace("http://stackoverflow.com");
// or
window.location.replace("mywebsite.com/"+file.name);