How to move dz-remove Dropzone.js link

Question

In my image below, as you can see, I would like to be able to change the position of the link to delete the file on the side of the content area.

I tried with custom bit template no luck.

Question: How can I remove a file button from my content area? Instead of the image below.

I only want to have a link to delete the image in another area

<div id="content"> <div id="my-dropzone" class="dropzone"> <span class="">Content Div Area</span> <div class="dz-message"> <h3>Drop files here</h3> or <strong>click</strong> to upload </div> </div> <div class="dropzone_preview" id="dz-preview"> <div class="dropzone_details"> <img data-dz-thumbnail /> </div> <a id="dz-remove" href="javascript:undefined;" data-dz-remove>Remove <-- here</a> </div> </div> <script src="<?php echo base_url(); ?>vendor/jquery/jquery.min.js"></script> <script src="<?php echo base_url(); ?>vendor/dropzone/dropzone.min.js"></script> <script> Dropzone.autoDiscover = false; var myDropzone = new Dropzone("#my-dropzone", { url: "<?php echo site_url("images/upload") ?>", acceptedFiles: "image/*", addRemoveLinks: true, thumbnailWidth: null, thumbnailHeight: null, addRemoveLinks: true, previewTemplate: document.getElementById('dz-preview').innerHTML, removedfile: function(file) { var name = file.name; $.ajax({ type: "post", url: "<?php echo site_url("images/remove") ?>", data: { file: name }, dataType: 'html' }); var previewElement; return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0); }, init: function() { this.on("thumbnail", function(file, dataUrl) { $('.dz-image').last().find('img').attr({width: '100%', height: '100%'}); }), this.on("success", function(file) { $('.dz-image').css({"width":"100%", "height":"auto"}); }); var me = this; $.get("<?php echo site_url("images/list_files") ?>", function(data) { // if any files already in server show all here if (data.length > 0) { $.each(data, function(key, value) { var mockFile = value; me.emit("addedfile", mockFile); me.emit("thumbnail", mockFile, "<?php echo base_url(); ?>uploads/" + value.name); me.emit("complete", mockFile); }); } }); } }); </script> 

Answer 1

I am not 100% sure if I understand you correctly, but does not previewTemplate solve your problem?

See http://www.dropzonejs.com/#config-previewTemplate

You are doing something like this: HTML:

 <div id="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 class="dz-success-mark"><span>✔</span></div> <div class="dz-error-mark"><span>✘</span></div> <div class="dz-error-message"><span data-dz-errormessage></span></div> <div><img src="removebutton.png" alt="Click me to remove the file." data-dz-remove /></div> </div> <div id="content"> <div id="my-dropzone" class="dropzone"> <div class="dz-message"> <h3>Drop files here</h3> or <strong>click</strong> to upload </div> </div> </div> 

JS:

 <script> Dropzone.autoDiscover = false; var myDropzone = new Dropzone("#my-dropzone", { ..., previewTemplate: document.getElementById('preview-template').innerHTML }); </script> 

Then you can change using CSS where the delete button will be displayed.