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.

I have tried with custom template bit no luck.

Question How can I have a remove file button out side of my content div area? Instead of below image.

I only want to be able to have the remove image link in different 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("plete", mockFile);
                });
            }
        });
    }
});
</script>

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.

I have tried with custom template bit no luck.

Question How can I have a remove file button out side of my content div area? Instead of below image.

I only want to be able to have the remove image link in different 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("plete", mockFile);
                });
            }
        });
    }
});
</script>

• javascript
• jquery
• codeigniter
• dropzone.js

3 Answers 3

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

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

You do 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 modify with CSS where to display the removal button.

Just remove option parameter addRemoveLinks: true,... twice :-)

If you want some specific link to remove a file (instead of the built in addRemoveLinks config), you can simply insert elements in the template with the data-dz-remove attribute. Example:

<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />

You can find out more on https://docs.dropzone.dev/configuration/basics/layout