Level 102
No need for third party libs :) https://sinnbeck.dev/posts/making-a-complete-file-uploader-with-progressbar-using-livewire-and-alpinejs
1 like
Aug 29, 2022
29
Level 4
Filepond in livewire with alpine.js
I integrated filepond in my project, am getting a problem when I upload a file it doesn't show its progress from 1 % to 100% but other things work well and the image view also with no problem.
livewire/filepond.blade.js
<div class="row">
<div class="col-md-12">
<div
wire:ignore
x-data
x-init="
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.setOptions({
AllowMultiple: 'multiple' ? 'true' : 'false',
server: {
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
@this.upload('uploadedFiles', file, load, error, progress)
},
revert: (filename, load) => {
@this.removeUpload('uploadedFiles', filename, load)
},
},
});
FilePond.create($refs.input);
"
>
<label>File Upload</label>
<input type="file" x-ref="input" wire:mode="uploadedFiles" multiple>
</div>
</div>
</div>
I got all this from this video: https://laravel-livewire.com/screencasts/s5-integrating-with-filepond
Level 4
@Sinnbeck I try your demo but it's not working
Level 102
@vainway Ah dang. I will fix it as soon as I have a chance. Thanks for the info :)
Level 102
Fixed :)
Level 4
@Sinnbeck your demo is working now but I need to use filepond and features like pintura image editors and your demo is cool too I can use it in my next project, help me solve this one
Level 102
@vainway ok. I have never used it, but maybe the progress function you are passing isn't doing it the correct way?
Level 4
@Sinnbeck before integrating it with livewire the progress function was working well
Level 102
@vainway But does it use the exact same method?
Level 4
@Sinnbeck yes try to look on this link https://laravel-livewire.com/screencasts/s5-integrating-with-filepond I use the same methods according to the tutorial
Level 102
@vainway Sorry I am not a sponsor
Level 4
@Sinnbeck if you not a sponsor you're only allowed to watch it once not twice but still watch it am not a sponsor too.
Level 13
Hi @vainway did you succeed in what you were trying to achieve, i am getting a same issue like yours.
Level 4
@mufarooq3 nope am still working on it
Level 31
@vainway Two things:
First - you mentioned livewire/filepond.blade.js, was that a spelling error or is that your actual file?
Second - you have a spelling error by model
<input type="file" x-ref="input" wire:mode="uploadedFiles" multiple>
Level 4
@migsAV this livewire/filepond.blade.js it's only the file location
Level 31
@vainway why does it end in js
Should it not be php
Level 4
@migsAV bro its just a typo I wrote while posting I didn't have a look at it well that's why but it has nothing to do withit
Level 31
@vainway I understand but if we are giving wrong information we cannot always help
Level 31
@vainway does it not show in both local and production environments?
Level 4
@migsAV what are you trying to say on local and production environment am getting confused about it
and <input type="file" x-ref="input" wire:mode="uploadedFiles" multiple> was just a typo I made by posting I changed it a long time ago
Level 31
@vainway I'm asking because your code showed the progress percentage on my side and then I tested a slower connection and then it did not show, I cannot explain why.
I tested it by going to the browser's dev tool and then going to Network, and chose a slower connection.
Level 4
@migsAV so you mean am having a slower connection only there is no problem behind it except my connection
but I kinda agree with u like my forms be working too slow every time I add a wire:model on every input
and I did my research on it, they be saying : didn't have a local mysql server, instead had a sql server hosted externally on a server on the other side of the world 😬 this the comment I got on the problem of livewire being too slow but I have no idea on how to change or I install a new xampp to fix it
Level 31
@vainway it seems that it is the connection causing the issue.
Try adding defer to your inputs, except the uploadedFiles input. This could help but is not guaranteed
<input type="text" wire:model.defer="uploadedFiles" />
https://laravel-livewire.com/docs/2.x/properties#deferred-updating
Level 4
@migsAV I used it but nothing changed
Level 31
@vainway I am not sure how you would go about fixing it.
Level 28
I found this.
Level 4
@shaungbhone I tried using what's in the link you gave me but his method is on working for me
<div
wire:ignore
x-data
x-init="() => {
const post = FilePond.create($refs.input);
post.setOptions({
server: {
process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
@this.upload('{{ $attributes->whereStartsWith('wire:model')->first() }}', file, load, error, progress)
},
}
});
}"
>
<input type="file" x-ref="input" wire:model="uploadedFiles" />
</div>
am getting this error
Error
Call to a member function whereStartsWith() on null (View:
Level 28
Level 4
@shaungbhone I have never used attributes before so it's like reading a newspaper to me reading that laravel doc, each time I use {{ $attributes }} I get errors
Please or to participate in this conversation.