vue-dropzone icon indicating copy to clipboard operation
vue-dropzone copied to clipboard

change remove link position

Open KevangPatel opened this issue 5 years ago • 3 comments

Can anyone let me know how can I change the remove link position? As u can see below I am having a custom delete button which I want to make behave like remove link.

 <vue-dropzone
            ref="FileDropzone"
            id="dropzone"
            @vdropzone-file-added="handleFileAdding"
            :options="dropzoneOptions"
            :useCustomSlot="true"
            :duplicateCheck="true"
            @vdropzone-removed-file="removedFile"
            @vdropzone-complete-multiple="completeMultiple"
            @vdropzone-success-multiple="successMultiple"
            @vdropzone-sending-multiple="appendFormData"
            :include-styling="false"
          </vue-dropzone>

<div class="my-prevs">
            <div class="d-grid grid-container" v-if="images.length>0">
              <div class="grid-item" v-for="s in images" :key="s.name">
                <img :src="s.fileSrc" class="img-fluid w-100"  />
 
                <div class="grid-footer p-2">
                  <div>Pages {{s.totalPages}}</div>
                <a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove file</a>
                  <div>
                    <button
                      type="button"
                      class="btn icon icon-delete text-primary p-0"
                      title="Delete"
                    ></button>
                  </div>
                </div>
              </div>
            </div>
          </div>

KevangPatel avatar Feb 01 '20 10:02 KevangPatel

@rowanwins could you please help in this???

KevangPatel avatar Feb 01 '20 11:02 KevangPatel

Hi @KevangPatel

Sorry for the slow reply. Can you post a screenshot of what you're trying to achieve and why you can't achieve it with a custom template?

Thanks

rowanwins avatar May 03 '20 13:05 rowanwins

The suggested approach in dropzonejs doco is to use something like

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

data-dz-remove is the critical part apparently so presumably you could swap out the img element for a button or whatever and then style accordingly with css.

Hope that helps

rowanwins avatar May 09 '20 04:05 rowanwins