Refresh a table after upload file with Alpine js

Question

I'm developing a Laravel application and I've got a view where displayed file data in a table. When I upload a file via Filepond input type file, I want the view to refresh using Alpine js to display the new uploaded file. How can i do?

This is the view

And this is the main .js file where I use Alpine and Filepond

Hi FilePond dev here, I don't have any experience with Alpine (yet), but you can use the `onprocessfile` callback to detect when a file was uploaded successfully. — Rik, Nov 07 '21 at 17:10

score 1 · Answer 1 · answered Feb 20 '22 at 11:50

From Rik's answer I would assume the simplest way to integrate is to store the file's information into Alpine.js state post upload by FilePond.

Alpine.store('fileInfo', {
  loading: false,
  file: null,
  setFileInfo(file) {
    this.file = file;
  }
});

// Alpine initialisation code

// onreadystatechanged wrapper etc

FilePond.create(element, {
  // other config
  process: {
    // other config
    onprocessfile: (error, file) => {
      Alpine.store('fileInfo').setFileInfo(file);
    }
  }
})

In your template or in your Alpine component you can do $store.fileInfo.file or this.$store.fileInfo.file respectively.

Here are the docs for Alpine.store: https://alpinejs.dev/globals/alpine-store

Refresh a table after upload file with Alpine js

1 Answers1