Level 63
It's probably possible to use the @entangle helper.
https://laravel-livewire.com/docs/2.x/alpine-js#sharing-state
Jul 31, 2023
13
Level 4
Send file from alpine to livewire
Hi hope somebody can help me, Im trying to send a file from alpine to a livewire function, Im not using livewire internal WithFileUploads
<input type="file" id="file_upload" x-ref="file_upload" x-on:change="onChangeFile($refs.file_upload.files[0])">
async onChangeFile(fileUploaded) {
var file = await this.toBase64(fileUploaded);
await this.$wire.uploadFile(file);
}
public function uploadFile($file){
ray('uploadFile', $file);
//$file = base64_decode(str_replace(' ','+', $file)); doesn't work
//upload in S3 code, I have this
return true;
}
Sending the file directly appears as null, and using base64 doesn't contain
Level 2
Hi @nam_co You could try with
$wire.upload(
'property',
file,
finishCallback = (uploadedFilename) => {},
errorCallback = () => {},
progressCallback = (event) => {}
)
1 like
Level 4
Hello, sorry for the late late late response, yes I tried @this.upload('currentFile', event.target.files[0], (uploadedFilename)... and it works saving the file in Livewire-tmp but for some reason that file is not available for Storage::get (tried all disks) also in livewire the #this->currentFile also doesn't work is a Livewire\Features\SupportFileUploads\TemporaryUploadedFile
1 like
Level 63
@nam_co It's probably possible to use the @entangle helper.
https://laravel-livewire.com/docs/2.x/alpine-js#sharing-state
Level 4
Hello @vincent15000 it seems it doesn't work for files, make sense, specially for large files
1 like
Level 122
why not use Livewire's upload ?
1 like
Level 4
Hello @Snapey , this component is mostly JS, it seems to work a lot faster, but I am using the
@this.upload('currentFile', fileX, (uploadedFilename) =>..
from https://livewire.laravel.com/docs/uploads#javascript-upload-api and it uploads the file just fine to livewire-tmp/ , but after that, I want to access the file from livewire to compress it, manipulate it, etc, but I just can't access it with a simple Storage::get I tried different disks, locations, I also tried saving again with php, and even getRealPath() with full path, nothing
1 like
Level 4
I also tried working with the $this->currentFile directly but no luck, appreciate any direction , thank you @snapey
1 like
Level 122
@nam_co the uploaded file needs to bound to a livewire property, which will then contain an instance of temporary upload object which you can work with. You shouldn't be trying to access the file directly.
1 like
Level 4
@Snapey thank you for the response, Im lost, ray('hello',$file); prints an empty $file
//MY JS
async galUploadFile(event) {
var fileX = event.target.files[0];
@this.upload('currentFile', fileX, (uploadedFilename) => {
var fileName = this.$wire.uploadFile(fileX.name);
console.log('response from wire',fileName);
}, () => {
}, (event) => {
console.log(event.detail.progress);
});
},
//MY LIVEWIRE
public function uploadFile($fileName)
{
$this->currentFile->storeAs('temp', $fileName, 'local');
$file = Storage::disk('local')->get('temp/', $fileName);
ray('hello',$file);
}
1 like
Level 4
but I can see the file in the finder
1 like
Level 4
Something strange is that this doesn't print in Ray, I can put ray('xxx') after and it prints, but not this one
$file = Storage::get('livewire-temp/xxxxxx.jpg');
ray('file: ',$file);
1 like
Level 4
Just in case anyone has a similar problem, maybe you solution is : $path = Storage::disk('local')->path('livewire-tmp/'.$this->currentFile->getFilename()); $file = new UploadedFile($path, $fileName); //this did the trick
Appreciate all that commented , thank you very much
1 like
Please or to participate in this conversation.