<DeleteButton /> not show when using addInitialFiles()

HI, I’m using the low components to render a <Thumbnail /> and a <DeleteButton /> , files is loaded from server by addInitialFiles(), thumbnails render is ok, but <DeleteButton /> is no show. My code :

<template>
  <div class="columns is-variable is-multiline is-centered">
    <dropzone class="dropzone column is-6 has-text-centered"
              :uploader="uploader">
      <file-input multiple
                  accept='image/*'
                  :uploader="uploader">
        <p class="dz-icon">
          <i class="fas fa-cloud-upload-alt"></i>
        </p>
        <p class="dz-text">Drop files here or click to upload</p>
      </file-input>
    </Dropzone>

    <div class="column is-12">
      <div class="thumbnail"
           v-for="file in state.submittedFiles"
           :key="file.id">
        <thumbnail :id="file.id"
                   :fromServer="Boolean(file.uuid)"
                   :uploader="uploader" />

        <cancel-button class="button"
                       v-if="!file.uuid"
                       :id="file.id"
                       :uploader="uploader">
          <i class="fas fa-times-circle"></i>
        </cancel-button>
        <delete-button :id="file.id"
                       :uploader="uploader">
          <i class="far fa-trash-alt"></i>
        </delete-button>

        <progress-bar class="progress-bar"
                      :id="file.id"
                      :uploader="uploader"></progress-bar>
      </div>
    </div>
  </div>
</template>

<script>
import FineUploaderTraditional from 'fine-uploader-wrappers';
import Thumbnail from 'vue-fineuploader/thumbnail';
import Dropzone from 'vue-fineuploader/dropzone';
import FileInput from 'vue-fineuploader/file-input';
import CancelButton from 'vue-fineuploader/cancel-button';
import ProgressBar from 'vue-fineuploader/progress-bar';
import DeleteButton from 'vue-fineuploader/delete-button';
import axios from 'axios';

export default {
  name: 'Category',
  components: {
    Thumbnail,
    Dropzone,
    FileInput,
    CancelButton,
    ProgressBar,
    DeleteButton,
  },
  data() {
    const self = this;
    const uploader = new FineUploaderTraditional({
      options: {
        autoUpload: false,
        debug: true,
        request: {
          inputName: 'image',          
        },
        deleteFile: {
          enabled: true,
          endpoint: 'my/upload/endpoint',
        },
        validation: {
          sizeLimit: 400 * 1024, // 300kb
        },
        callbacks: {
          onUpload() {
            self.uploader.methods.setEndpoint(
              'gallery/upload/url'
            );
          },
          onError(id, name, errorReason) {
            if (id !== undefined && name !== undefined) {
              self.$toast.open({
                duration: 6000,
                message: errorReason,
                type: 'is-danger',
              });
            }
          },
        },        
      },
    });

    return {
      productId: null,
      uploader,
      state: {
        submittedFiles: [],
        isChanged: false,
      },
    };
  },
  methods: {
    upload(productId) {
      return new Promise((resolve) => {
        if (this.state.submittedFiles.length > 0) {
          this.productId = productId;
          this.uploader.methods.uploadStoredFiles();
          this.uploader.on('onAllComplete', () => {
            // reset FineUploader and remove all thumbnails if is create route
            if (this.$route.name === 'product.create') {
              this.uploader.methods.reset();
              this.state.submittedFiles = [];
            }
            resolve('Upload successfuly');
          });
        }
        resolve('Nothing to upload');
      });
    },
    isFileGone(status) {
      return ['canceled', 'deleted'].indexOf(status) >= 0;
    },    
    addInitialFiles() {
      axios
        .get(`gallery/api/url`)
        .then((response) => {
          this.isLoading = false;
          this.uploader.methods.addInitialFiles(response.data.media);
          const data = this.uploader.methods.getUploads();
          this.state.submittedFiles = data;
        })
        .catch((error) => {
          console.log(error);
          this.isLoading = false;
        });
    },
  },
  mounted() {
    this.uploader.on('statusChange', (id, oldStatus, newStatus) => {
      const submittedFiles = this.state.submittedFiles;

      if (newStatus === 'submitted') {
        submittedFiles.push({ id });
        this.$set(this.state, 'submittedFiles', submittedFiles);
      } else if (this.isFileGone(newStatus)) {
        const indexToRemove = submittedFiles.indexOf(id);

        submittedFiles.splice(indexToRemove, 1);
        this.$set(this.state, 'submittedFiles', submittedFiles);
      } else if (newStatus === 'upload successful') {
        console.log(this.state.submittedFiles);
      }
    });
    this.addInitialFiles();
  },
};

Can you help me ?

Thanks.

[bagermen]

I know little workaround…

callbacks: { onSessionRequestComplete: (initial) => { setTimeout(() => { initial.forEach((data) => { let file = uploader.methods.getUploads({uuid:data.uuid}); uploader.methods._uploadData.setStatus(file.id, uploader.qq.status.UPLOAD_SUCCESSFUL); }); }, 100); } }

[Elhebert]

As far as I understand, this issue isn’t coming from this library but from FineUploader itself.

According to the documentation you can set an endpoint for FineUploader to query when initialize and it’ll do a get request to your server to get all previously uploader media: https://docs.fineuploader.com/branch/master/features/session.html