Refresh a table after upload file with Alpine js

user_11084559 0
Viewed 207

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

filepond alpine.js laravel
1 Answers

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

user_54929970
Related