ousid's avatar
Level 3

Upload images with livewire and filepond

Hey, guys what's seems to be wrong. When the image uploaded successfully the image disappears automatically, and I'm using Image Preview plugin from filepond

here is my code

                <div
                    wire:ignore
                    class="m-3 border-dashed border-2"
                    x-data="{
                        initFilepond () {
                            const pond = FilePond.create(this.$refs.filepond, {
                                onprocessfile: (error, file) => {
                                    pond.removeFile(file.id)
                                },
                                allowRevert: false,
                                server: {
                                    process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                                        @this.upload('photo', file, load, error, progress)
                                    }
                                }
                            })
                        }
                    }"
                    x-init="initFilepond"
                >
                    <div>
                        <input type="file" x-ref="filepond">
                    </div>

Any help I'll be appreciated.

0 likes
5 replies
tykus's avatar

I'm using Image Preview plugin from filepond

But, did you register the plugin?

initFilepond () {
	Filepond.registerPlugin(FilePondPluginImagePreview);
	const pond = FilePond.create(this.$refs.filepond, {
	// ...
1 like
tykus's avatar

Where; it is not shown in the code you shared?

ousid's avatar
Level 3

It showed the first time when its load, but when the process was finished the image disappear

aarontharker's avatar

Did you ever find a fix for this as I'm having the same issue. It appears to be caused by cors preflight options but not sure how to solve it.

Please or to participate in this conversation.