vandan's avatar
Level 13

i can't upload file using Alpine js

hello guys,

i m upload file using alpine js but in my output of dd is always my file is null means my file are not attach or intialize something i dnot why this issue is happen

here is my code

<input type="file" 
	x-init="$el._x_filepond = FilePond.create($el)"
			name="collateral_doc_file_1[]"
			class="doc-file" 
			data-valid-file="no"
			data-has-file="no"/>

here is my output is dd

"collateral_doc_file_1" => array:1 [▼
	0 => null
]
0 likes
7 replies
shariff's avatar

@vandan Did you initialize filePond correctly? Check your console Are you getting any console error.

vandan's avatar
Level 13

@shariff not not gettting any error i m correctly initialize the filepond

shariff's avatar

@vandan Did you try doing like this? Just to confirm you can able to add file or not.

FilePond.create(document.querySelector('input[type="file"]')).on('addfile', (error, file) => {
    if (error) {
        console.error('Error adding file', error);
        return;
    }
    console.log('File added', file);
});

If you are using form make sure you added enctype="multipart-form-data"

vandan's avatar
Level 13

@shariff yes i already put this code but still the file is i thiink not attach may be

shariff's avatar

@vandan hmmm. Can you show your filePond initialization and form submission?

vandan's avatar
Level 13

@shariff

<script>
	window.addEventListener("DOMContentLoaded", () => Alpine.start());	

	FilePond.create(document.querySelector('input[type="file"]')).on('addfile', (error, file) => {
	if (error) {
    	console.error('Error adding file', error);
    	return;
	}
	console.log('File added', file);
});

here is my form

{!! Form::open(array( 'id '=> 'add-collateral-form' , 'method' => 'post' ,  'files' => true ,  'url' => 'collateral/store' )) !!}

<input type="file" 
		x-init="$el._x_filepond = FilePond.create($el)"
		name="collateral_doc_file_1[]"
		class="doc-file" 
		data-valid-file="no"
		data-has-file="no"/> etc... remaing code
shariff's avatar

@vandan There is no enctype="multipart/form-data" in your form? Try adding that

Please or to participate in this conversation.