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'])
No description
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
quantumleaps
quantumleapsOP3w ago
bump
Dennis Koch
Dennis Koch3w ago
Capture is a separate attribute and not part of accept, right?
Dennis Koch
Dennis Koch3w ago
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.
quantumleaps
quantumleapsOP3w 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
Dennis Koch3w 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
quantumleaps
quantumleapsOP3w 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
Dennis Koch3w 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
Dennis Koch3w ago
What happens with: <input type=“file” accept=“image/*”> ?
quantumleaps
quantumleapsOP3w ago
only option 1, no choice for option 2
quantumleaps
quantumleapsOP3w ago
So just omit capture?
if I omit capture it wouldn't give me options
No description
No description
Dennis Koch
Dennis Koch3w ago
Hm. That's weird. Maybe because of the image/* type? But that should be okay too
quantumleaps
quantumleapsOP3w 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
Dennis Koch3w ago
Shouldn't this disable it? ->extraInputAttributes(['accept' => '*'])
quantumleaps
quantumleapsOP3w ago
doesn't work either
No description
quantumleaps
quantumleapsOP3w 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'
]),
Want results from more Discord servers?
Add your server