title: How to relocate the dz-remove link Dropzone.js
body: <p>On my image below as you can see I would like to be able change the position of the remove file link to out side of the content div area.</p>
  
  <p>I have tried with custom template bit no luck.</p>
  
  <blockquote>
    <p>Question How can I have a remove file button out side of my
    content div area? Instead of below image.</p>
  </blockquote>
  
  <p><strong><em>I only want to be able to have the remove image link in different area</em></strong></p>
  
  <p><a href="https://i.stack.imgur.com/NRjLD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NRjLD.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div id="content"&gt;
  
      &lt;div id="my-dropzone" class="dropzone"&gt;
          &lt;span class=""&gt;Content Div Area&lt;/span&gt;
          &lt;div class="dz-message"&gt;
              &lt;h3&gt;Drop files here&lt;/h3&gt; or &lt;strong&gt;click&lt;/strong&gt; to upload
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="dropzone_preview" id="dz-preview"&gt;
          &lt;div class="dropzone_details"&gt;
              &lt;img data-dz-thumbnail /&gt;
          &lt;/div&gt;
          &lt;a id="dz-remove" href="javascript:undefined;" data-dz-remove&gt;Remove &lt;-- here&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script src="&lt;?php echo base_url(); ?&gt;vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?php echo base_url(); ?&gt;vendor/dropzone/dropzone.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  Dropzone.autoDiscover = false;
  var myDropzone = new Dropzone("#my-dropzone", {
  
      url: "&lt;?php echo site_url("images/upload") ?&gt;",
      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: "&lt;?php echo site_url("images/remove") ?&gt;",
          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("&lt;?php echo site_url("images/list_files") ?&gt;", function(data) {
              // if any files already in server show all here
              if (data.length &gt; 0) {
                  $.each(data, function(key, value) {
                  var mockFile = value;
                  me.emit("addedfile", mockFile);
                  me.emit("thumbnail", mockFile, "&lt;?php echo base_url(); ?&gt;uploads/" + value.name);
                  me.emit("complete", mockFile);
                  });
              }
          });
      }
  });
  &lt;/script&gt;
  </code></pre>