Filepond

Libreria JS per il caricamento di file anche di grandi dimensioni splittandolo in blob più piccoli. Si dovrebbe configurare un endpoint lato server per gestire i blob e ricomporli quando filepond manda il segnale che ha finito.

Nella documentazione questo processo è spiegato in dettaglio. Sotto c’è un esempio di integrazione con Livewire.

Utilizzo

Base

Nella versione più semplice basta passare un inputElement e chiamare la funzione create

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);

Style

Espone delle variabili CSS da sovrascrivere. Doc.

Localizzazione

Alla funzione create si possono passare delle opzioni di configurazione, tra cui i labels da usare nelle varie parti dell’elemento. Si può usare l’html dentro i label.

Livewire

Se utilizzato dentro un componente Livewire, si può sfruttare la sua integrazione col js per far gestire il processo di upload a Livewire:

FilePond.create(inputElement, {
	[...],
	server: {
		url: null,
		process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
			@this.upload('var_name', file, load, error, progress)
		},
		revert: (filename, load) => {
			@this.removeUpload('var_name', filename, load)
		},
		patch: null,
		headers: {
			'X-CSRF-TOKEN': '{{ csrf_token() }}'
		}
	}
})