Show only uploaded Images from Server

[ashfaq1994]

1. I can upload the Image but I show uploaded images from the server.

The actual problem is it shows To Duplication file

When someone uploads the image if success removes from Dropzone and pull it from the server and show it.

Show Images which are in the server.

 uploadSuccess(file, response) {
        this.vdropzoneMount()
  },

<template>
<div>
    <div class="multile-file-attachments wt-haslayout">
    <vue-dropzone :options="this.dropzoneOptions" 
       id="upload"  
      v-on:vdropzone-sending="sendingEvent"
      v-on:vdropzone-mounted="vdropzoneMount"
      v-on:vdropzone-success="uploadSuccess"
      :vdropzone-max-files-reached="maxUploadFiles"
      :vdropzone-max-files-exceeded="maxUploadFiles"
      :vdropzone-complete="FileUploadCompleted"
          v-on:vdropzone-removed-file="fileRemoved"
     ref="success_ref" :useCustomSlot=true>
        <div class="form-group form-group-label">
            <div class="wt-labelgroup">
                <label for="file">
                    <span class="wt-btn">Select Files</span>
                </label>
                <span> Drop files here to upload</span>
            </div>
        </div>
    </vue-dropzone>
        <vue-progress-bar></vue-progress-bar>
    <vue-snotify></vue-snotify>
  </div>
</div>
</template>

<script>
const getTemplate = () => `
  <li>
      <span><span data-dz-name></span></span> 
      <em>File size: <span data-dz-size></span>
      <em class="dz-error-message">Error : <span data-dz-errormessage></span>
          <a class="image_upload_anchor">
              <span class="lnr lnr-cross"></span>
          </a>
      </em>
      <span class="upload_progress" data-dz-uploadprogress></span>
  </li>`;
import vueDropzone from "vue2-dropzone";
import jQuery from 'jquery';
const axios = require('axios');
export default {
    props: ['user'],
 data () {
    return {
      dropzoneOptions: {
          url: '/api/attachments',
          maxFiles: 3,
          addRemoveLinks: true,
          previewTemplate: getTemplate(),
          previewsContainer: '.dropzone-previews',
          // headers: {
          //     'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value,
          // },
          init: function() {;
              var count = 0;
              var myDropzone = this;
              this.on("addedfile", function(file) { 
                var li_count = jQuery('.wt-attachmentsholder').find('.lara-attachment-files .form-group ul li').length;
                count = li_count -1;
                jQuery('#'+myDropzone.element.id).parents('.wt-attachmentsholder').find('.lara-attachment-files .input-preview ul.dropzone-previews').append('<input type="hidden" value="'+file.name+'" class="hidden-file" name="attachments['+[count]+']">');
                count++
              });
              this.on("removedfile", function(file) { });
          }
      },

      userID : this.user,
    }
  },
  methods:{
    getUrl() {
        return this.temp_url;
    },

    FileUploadCompleted()
    {
    },

    removeAllFiles()
    {
         this.$refs.success_ref.removeAllFiles(true)
    },

    vdropzoneMount(){

          let self = this
          var vue = this
            axios.get(`/api/attachments/?id=${this.userID}`)
              .then(function (response) {

                response.data.forEach(function(image, index) {
                  
                  vue.$refs.success_ref.manuallyAddFile({ 
                          name: image.filename , size: image.size , id :  image.id,
                        }, image.uid, 
                        null,
                        null, 
                        {
                          dontSubstractMaxFiles: false,
                          addToFiles: true
                        }
                      )

                  
                    })
                
              })
              .catch(function (error) {
                  console.log(error);
              })
      },

      maxUploadFiles(file)
      {
          this.$Progress.fail();
          this.$snotify.error(
            "You can upload only 10 Documents",
            "Error"
          );
      },

   fileRemoved(file) {
      axios
        .delete("/api/attachments/" + file.id)
        .then(response => {
          if (response) {
            this.$Progress.finish();
            this.$snotify.success("File Deleted Successfully", "Success");
          } else {
            this.$Progress.fail();
            this.$snotify.error(
              "Something went wrong try again later.",
              "Error"
            );
          }
        })
        .catch(e => {
            this.$Progress.fail();
            this.$snotify.error(
              "Something went wrong try again later.",
              "Error"
            );
          console.log(e);
        });
  
    },
  
  uploadSuccess(file, response) {
        this.vdropzoneMount()
  },
  
  sendingEvent (file, xhr, formData) {
    formData.append('attachable_id', this.userID);
  }

  mounted: function () {

  },
  components: {
    vueDropzone
  }
};
</script>