Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<DeleteButton /> not show when using addInitialFiles()

See original GitHub issue

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 :

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

    <div class="column is-12">
      <div class="thumbnail"
           v-for="file in state.submittedFiles"
        <thumbnail :id=""
                   :uploader="uploader" />

        <cancel-button class="button"
          <i class="fas fa-times-circle"></i>
        <delete-button :id=""
          <i class="far fa-trash-alt"></i>

        <progress-bar class="progress-bar"

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: {
  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() {
          onError(id, name, errorReason) {
            if (id !== undefined && name !== undefined) {
                duration: 6000,
                message: errorReason,
                type: 'is-danger',

    return {
      productId: null,
      state: {
        submittedFiles: [],
        isChanged: false,
  methods: {
    upload(productId) {
      return new Promise((resolve) => {
        if (this.state.submittedFiles.length > 0) {
          this.productId = productId;
          this.uploader.on('onAllComplete', () => {
            // reset FineUploader and remove all thumbnails if is create route
            if (this.$ === 'product.create') {
              this.state.submittedFiles = [];
            resolve('Upload successfuly');
        resolve('Nothing to upload');
    isFileGone(status) {
      return ['canceled', 'deleted'].indexOf(status) >= 0;
    addInitialFiles() {
        .then((response) => {
          this.isLoading = false;
          const data = this.uploader.methods.getUploads();
          this.state.submittedFiles = data;
        .catch((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') {

Can you help me ?


Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

bagermencommented, Jun 27, 2018

I know little workaround…

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

Elhebertcommented, Oct 5, 2018

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:

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error using addInitialFiles Method - fine uploader
addInitialFiles is not a function. This is the code I use to initialize Fine Uploader, and make the call the addInitialFiles():
Read more >
File Explorer has the delete button greyed out.
So I opened the files and saved them with the correct names. I closed the 'app' and all of the documents, and then...
Read more >
Quick and Easy Solution! Delete option missing can't delete files
You are unable to delete a file or folder because there is no ... 10-multi logins so you can use one account on...
Read more >
31. Delete the Product from file When delete button ... - YouTube
In this video we will see how to delete the product when the delete button is clicked in express Node App - NodeJSIf...
Read more >
Full Stack React & Firebase: #25 Delete Button - YouTube
Full Stack React & Firebase: #25 Delete Button. Watch later. Share. Copy link. Info. Shopping. Tap to unmute. If playback doesn't begin ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found