Level 63
Perhaps you can show us your code so that we can better help you ?
Nov 29, 2022
18
Level 3
livewire wire bug? ( space not allowed)
Hi.
I just found uploading by livewire does not allow file name's space.
Actually it is automatically uploading by javascript when the file is selected .
But when I try to save it, it goes error.
Unable to retrieve the file_size for file at location: livewire-tmp/livewire-tmp.
How can I avoid this ?
Level 3
It is simple code. It is almost copied from livewire doc.
// app/Http/Livewire/Tools/GoodUpload.php
<?php
namespace App\Http\Livewire\Tools;
use Carbon\Carbon;
use Livewire\Component;
use Livewire\WithFileUploads;
class GoodUpload extends Component
{
use WithFileUploads;
public $myfile;
public function save()
{
$this->validate([
'myfile' => 'file|max:1024000', // 1000MB Max
]);
$name = Carbon::now()->format('Ymd-His') . '.' . $this->myfile->extension();
$this->myfile->storeAs('upload_files', $name, $disk = 'local');
}
public function render()
{
return view('livewire.tools.good-upload');
}
}
// resources/views/livewire/tools/good-upload.blade.php
<div>
<form wire:submit.prevent="save">
<input type="file" wire:model="myfile" onChange="fileChange(event)">
@error('myfile') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save file</button>
</form>
<script>
function fileChange(event) {
var files = event.target.files
var filename = files[0].name
var extension = files[0].type
}
document.addEventListener("livewire-upload-start", function(event) {
console.log('livewire-upload-start')
console.log(event)
});
document.addEventListener("livewire-upload-finish", function(event) {
console.log('livewire-upload-finish')
console.log(event)
});
document.addEventListener("livewire-upload-error", function(event) {
console.log('livewire-upload-error')
console.log(event)
});
document.addEventListener("livewire-upload-progress", function(event) {
console.log('livewire-upload-progress')
console.log(event.detail.progress)
});
</script>
</div>
Unable to retrieve the file_size for file at location: livewire-tmp/livewire-tmp.
1 like
Level 3
For sureness this is the part of conf file.
// ./config/livewire.php
;
'temporary_file_upload' => [
'disk' => 'local', // Example: 'local', 's3' Default: 'default'
'rules' => null, // Example: ['file', 'mimes:png,jpg'] Default: ['required', 'file', 'max:12288'] (12MB)
'directory' => 'livewire-tmp', // Example: 'tmp' Default 'livewire-tmp'
'middleware' => null, // Example: 'throttle:5,1' Default: 'throttle:60,1'
'preview_mimes' => [ // Supported file types for temporary pre-signed file URLs.
'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
'mov', 'avi', 'wmv', 'mp3', 'm4a',
'jpg', 'jpeg', 'mpga', 'webp', 'wma',
],
'max_upload_time' => 5, // Max duration (in minutes) before an upload gets invalidated.
],
p.s.
for sure it is edited as
'rules' => ['required', 'file', 'max:12288000'],
1 like
Level 63
@binggle I don't understand the namespace problem. What is the link with the file_size for example ?
But what I wonder is : have you really a Tools folder in your project ?
Other question : what type of file are you trying to upload ?
Level 3
"But what I wonder is : have you really a Tools folder in your project ?" => yes , I made it with
php artisan make:livewire Tools/GoodUpload
Tools folder exists.
I tried with 'html' , 'mp4', 'png',. maybe more than 2~30 times.
The error happens at ramdom as the file name, with/without spaces.
Without space, only english and numeric file name does not make errors.
With spaces, some files make error, some files does not make error.
I don't understand why this happens.
I will post here when I could explain why.
Thanks for concerns.
1 like
Level 122
@binggle hallmarks of your upload being truncated
1 like
Level 3
for sure, it is edited as
'rules' => ['required', 'file', 'max:12288000'],
1 like
Level 122
have you tried the same file with no space in the filename?
have you increased php max_post limit?
1 like
Level 3
yes.. with same file..
With the file which has long file name with some spaces , it failed to save .
So I removed 1~2 space from the file name , it was uploaded ok.
That file still has spaces..
I think it is not problem about '.', ''' , '[', characters..
With those characters, files are uploaded successfully
p.s.
my max_post limit or any file upload limit is more than 10GB, in php.ini and nginx.conf.
1 like
Level 122
@binggle you have confirmed this with php_info() ?
1 like
Level 3
Yes.. these are my confs.
// /etc/php/8.1/fpm/php.ini
upload_max_filesize = 19G
post_max_size = 20G
memory_limit = 2048M
..
// /etc/nginx/sites-enabled/my.conf
server {
;
client_max_body_size 20G;
}
``
https://imgur.com/FCyhw5e
https://imgur.com/CFXPoWa
https://imgur.com/4MmDu5e
1 like
Level 63
@binggle Perhaps something wrong with the livewire-tmp folder rights ?
Level 3
@vincent15000 Whenever I make project and install livewire, because of livewire-tmp folder, I run this.
sudo chgrp -Rf www-data storage bootstrap/cache
sudo chmod -Rf ug+rwx storage bootstrap/cache
sudo chgrp -Rf www-data storage bootstrap/cache
sudo chmod -Rf 775 storage/ bootstrap/
I think I never failed with this permission on storage / livewire-tmp folder.
1 like
Level 3
I think I found why.
I found that if the file name string exceed over 150 with strlen(), it vomit errors.
And I found it does not matter with space.
It just matters with the length of file name.
I am not sure if it is about livewire / laravel or linux file system's limit.
And because I have to deal with an Asian language which takes two times more length in one letter of english or numeric numbers, the file name's length looked short enough for upload.
Anyway I think I can handle with this.
I could confirm my code and configurations with your help, and could get a tip.
Thank you guys for your concerns very much.
4 likes
Level 1
@binggle good catch regarding filename length!
Encountered the same issue and inspired your comment, I've tried different filename lengths and found that 160 chars (all latin, including spaces and extension) is the limit. 161 fails. Will continue the investigation.
1 like
Level 1
Hi Guys, I encountered this same error.
See the file name that failed to upload. "DALL·E 2024-08-28 12.38.01 - A set of 5 diverse profile pictures for testing software applications, featuring a variety of people with different ethnic backgrounds, ages, and gend.webp"
Has anyone found a way to resolve this?
1 like
Level 1
I am working on a project where Image upload is required , I used FileUpload from filamentPHP and encountered the same error whenever the uploaded file name length exceeds 155 characters (156 throws an error).
file name tested : farming-agriculture-field-with-copy-space-blue-sky-overgrown-grass-fenced-isolated-farming-area-farm-with-lush-trees-yellow-green-grass-looks-beautifussssas.png
error :
League\Flysystem\UnableToRetrieveMetadata
Unable to retrieve the file_size for file at location: livewire-tmp/livewire-tmp.
PHP 8.3.8 — Laravel 11.21.0
Will continue the investigation.
1 like
Level 1
after some investigation about the 'unable to retrieve the file_size for file at location: livewire-tmp/livewire-tmp.' error related to FileUpload component in the filamentphp. I found the following :
if one of these two functions is called and set ( ->minSize(0) or ->maxSize(10024)) they work as intended unless if the file name characters length is more than 155 then the error is thrown .
I used the rule function to manually validate the content of the FileUpload and to my surprise it does run before the error is thrown which is a good news meaning I can manupilate the file content and prevent the error from showing or even show an error message to the user.
the code :
->rule(static function (Forms\Get $get, Forms\Components\Component $component): Closure { return static function (string $attribute, $value, Closure $fail) use ($get, $component) { $signage_images = $get('signage_images'); \dd($signage_images); }; })
and after inspecting the $signage_images variable I found that the corrputed file (has a name with more than 155 characters ) its content is as follow :
"d08a8793-f7e9-451d-84ec-fe9ad1f6076f" =>
Livewire\Features\SupportFileUploads
TemporaryUploadedFile {#1908 ▼
-test: false
-originalName: "livewire-tmp"
-mimeType: "application/octet-stream"
-error: 0
-originalPath: "livewire-tmp/livewire-tmp"
#hashName: null
#disk: "local"
#storage:
Illuminate\Filesystem
FilesystemAdapter {#1916 ▶}
#path: "livewire-tmp/livewire-tmp"
path: "C:\Users\LENOVO 8 EME\Desktop\Source\storage\app\livewire-tmp"
filename: "livewire-tmp"
basename: "php931B.tmp"
pathname: "C:\Users\LENOVO 8 EME\Desktop\Source\storage\app\livewire-tmp/livewire-tmp"
extension: "tmp"
realPath: "C:\Users\LENOVO 8 EME\Desktop\Source\storage\app\livewire-tmp/livewire-tmp"
writable: false
readable: false
executable: false
file: false
dir: false
link: false
}*
and in comparison with a file with no issues (doesnt have a name with more than 155 characters) :
"2c152e43-bb71-4de6-a0c8-35b00a994847" =>
Livewire\Features\SupportFileUploads
TemporaryUploadedFile {#1974 ▼
-test: false
-originalName: "X5yH07mYs9XBf2XnnIlPE2ccecn95Y-metaZml4ZWQuUE5H-.PNG"
-mimeType: "application/octet-stream"
-error: 0
-originalPath: "livewire-tmp/X5yH07mYs9XBf2XnnIlPE2ccecn95Y-metaZml4ZWQuUE5H-.PNG"
#hashName: null
#disk: "local"
#storage:
Illuminate\Filesystem
FilesystemAdapter {#1916 ▶}
#path: "livewire-tmp/X5yH07mYs9XBf2XnnIlPE2ccecn95Y-metaZml4ZWQuUE5H-.PNG"
path: "C:\Users\LENOVO 8 EME\Desktop\Source\storage\app\livewire-tmp"
filename: "X5yH07mYs9XBf2XnnIlPE2ccecn95Y-metaZml4ZWQuUE5H-.PNG"
basename: "php931C.tmp"
pathname: "C:\Users\LENOVO 8 EME\Desktop\Source\storage\app\livewire-tmp/X5yH07mYs9XBf2XnnIlPE2ccecn95Y-metaZml4ZWQuUE5H-.PNG"
extension: "tmp"
realPath: "C:\Users\LENOVO 8 EME\Desktop\Source\storage\app\livewire-tmp/X5yH07mYs9XBf2XnnIlPE2ccecn95Y-metaZml4ZWQuUE5H-.PNG"
size: 1547
writable: false
readable: false
executable: false
file: false
dir: false
link: false
}
we can see that the corrupted file does not have an original name or original path and most importantly the size field which is what I believe is throwing the error (because some code internally is trying to get the size of the file ) .
and this is the final code I used in my project :
->rule( static function (Forms\Get $get, Forms\Components\Component $component): Closure {
return static function (string $attribute, $value, Closure $fail) use ($get, $component) {
$signage_images = $get('signage_images');
foreach ($signage_images as $index => $file) {
try {
$maxSizeInBytes = 10 * 1024 * 1024; // 10MB in bytes
if (gettype($file) == "string") { // (on edit) file is a string so no need to procced with validation otherwise will throw an error
continue;
}
$fileSize = $file->getSize();
// validate size
if ($fileSize > $maxSizeInBytes) {
if (count($signage_images) > 1) {
return $fail("One of the files is too large. It should not exceed 10MB.");
} else {
return $fail("The file is too large. It should not exceed 10MB.");
}
}
// validate file mime type
$fileType = $file->getMimeType();
$validTypes = ['image/jpeg', 'image/png', 'image/bmp', 'image/webp'];
$isValidType = in_array($fileType, $validTypes);
if (!$isValidType) {
if (count($signage_images) > 1) {
return $fail("One of the files has an invalid file type. Allowed types are: jpeg, png, bmp, webp.");
} else {
return $fail("The file has an invalid file type. Allowed types are: jpeg, png, bmp, webp.");
}
}
} catch (\Exception $e) {
if (count($signage_images) > 1) {
return $fail('One of the uploaded files is corrupted or exceeds name length limit. please use a shorter name');
} else {
return $fail('file corrupted or exceeds name length limit. please use a shorter name');
}
}
}
};
})
2 likes
Please or to participate in this conversation.