disable or fix fileupload validation

I need the accept attribute to be

image/*;capture=camera

image/*;capture=camera

since it's the only attribute combination that gives mobile devices an option to either click a photo, or choose one from files/documents (which is exactly what I need). But when I do that, I can't upload any images as it gives me error : file of invalid type. How can I fix this? code:

                             Forms\Components\FileUpload::make('product_ean_image_url')
                    ->label('Product EAN Image')
                    ->extraInputAttributes(['accept' => 'image/*; capture=camera'])

                             Forms\Components\FileUpload::make('product_ean_image_url')
                    ->label('Product EAN Image')
                    ->extraInputAttributes(['accept' => 'image/*; capture=camera'])

Solution:

Yes, I understood. capture="environment" says: Use the camera. So you only get camera option. <input type=“file” accept=“image/*;capture=camera”>...

Jump to solution

15 Replies

quantumleapsOP•2mo ago

bump

Dennis Koch•2mo ago

Capture is a separate attribute and not part of accept, right?

Dennis Koch•2mo ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture

MDN Web Docs

HTML attribute: capture - HTML: HyperText Markup Language | MDN

The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.

quantumleapsOP•2mo ago

it is a separate attribute, and not part of accept in the documentation. But when I use it as a separate attribute, it only gives option to click a picture on mobile devices. when used as a part of accept as the way I did, it gives option to either choose an existing picture or click one with camera

Dennis Koch•2mo ago

But when I use it as a separate attribute, it only gives option to click a picture on mobile devices

Click a picture = Take one with the camera? That's what your code says capture=camera

But when I use it as a separate attribute, it only gives option to click a picture on mobile devices

Isn't that the default? Btw. checking MDN again, there is no capture=camera value

quantumleapsOP•2mo ago

i think I didn't explain it properly there are 2 ways to upload an image 1) Pick from file manager 2) Click one from camera

<input type=“file” accept=“image/*;capture=camera”>

<input type=“file” accept=“image/*;capture=camera”>

Gives both option 1 & 2 if I use

<input type=“file” accept=“image/*" capture="environment”>

<input type=“file” accept=“image/*" capture="environment”>

Gives only option 2 I want both options you're right, it isn't mentioned anywhere in the docs, I found it in a stackoverflow solution. But it's the only way I found that gives both options

Solution

Dennis Koch•2mo ago

Yes, I understood. capture="environment" says: Use the camera. So you only get camera option. <input type=“file” accept=“image/*;capture=camera”> Is an invalid accept value and an empty capture. So just omit capture?

Dennis Koch•2mo ago

What happens with: <input type=“file” accept=“image/*”> ?

quantumleapsOP•2mo ago

only option 1, no choice for option 2

quantumleapsOP•2mo ago

So just omit capture?

if I omit capture it wouldn't give me options

Dennis Koch•2mo ago

Hm. That's weird. Maybe because of the image/* type? But that should be okay too

quantumleapsOP•2mo ago

i think it probably has something to do with how filament checks for file type/mimes with accept values (maybe it doesn't split the string properly, as it wouldn't expect ; in attribute value) i tried to look up if there's any way I can disable client side validation, and couldn't find it either

Dennis Koch•2mo ago

Shouldn't this disable it? ->extraInputAttributes(['accept' => '*'])

quantumleapsOP•2mo ago

doesn't work either

quantumleapsOP•2mo ago

nvm, just removed the field, final code :

                Forms\Components\FileUpload::make('product_ean_image_url')
                    ->label('Product EAN Image')
                    ->required()
                    ->rule([
                        'mimes:jpg,jpeg,png,gif'
                    ]),

                Forms\Components\FileUpload::make('product_ean_image_url')
                    ->label('Product EAN Image')
                    ->required()
                    ->rule([
                        'mimes:jpg,jpeg,png,gif'
                    ]),

Gaming

Programming

disable or fix fileupload validation