Crud: [3.6][Bug] Image field type doesn't allow SVG files

Created on 30 Jun 2017 · 15Comments · Source: Laravel-Backpack/CRUD

When adding a field like this:

$this->crud->addField([
    'label'  => "Icon",
    'name'   => "icon-image",
    'type'   => "image",
    'fake'   => true,
]);

... the JavaScript in src/resources/views/fields/image.blade.php will run a test against the file that will fail when it shouldn't, and the JS will then do alert("Please choose an image file.");. (Several times, in fact, but that's a different issue.) SVGs should just work, like the other image types do.

The test should be modified to allow SVG images to work.

See my original comment here for my suggested solution.

Bug

Source

joshlewis

All 15 comments

My only fear with that, is the possibility of injections with allowing the + by default but will see what @tabacitu thinks. For now my suggestion would be to publish the view resources and edit it within your application to allow it.

AbbyJanke on 1 Jul 2017

I'm late to the party but why do we have a regex that stops stuff?

I could be barking up the wrong tree here, but if a user uploads a bung image, isn't that really an application (and not the framework) problem?

lloy0076 on 2 Jul 2017

That makes sense. Maybe a rule that is more specifically written to allow what it currently does, plus exactly image/svg+xml and nothing else. That'd be much more specific than just allowing any plus sign.

@lloy0076 I'm not certain of my guess, but I imagine this is only for the image uploader, so that a person doesn't try to upload a Word doc to an image field, or something nonsensical like that.

joshlewis on 2 Jul 2017

https://laravel.com/docs/5.4/validation#rule-image - we could just lean on the Laravel validators...

lloy0076 on 2 Jul 2017

👍1

In case it's helpful, there's a list of MIME types on the Mozilla Developer Network. The ones in that table are ones they call "important MIME types for the Web". The complete, exhaustive list is probably less relevant.

Anyway, you can see that there are currently five different MIME types with a plus sign in them on the ones Mozilla calls "important" for the Web. I think any web app MIME type validator, _if that's its purpose_, should recognize all of the ones in that list as valid MIME types.

If we're purposefully trying to restrict to images, then I'd agree with @lloy0076's comment above.

joshlewis on 7 Jul 2017

I think I agree with you guys - I see no reason to use another validation on top of Laravel. We can just instruct people to use the proper validation in the field documentation. This might be considered a breaking change, though - since some people might have used this as their only validation...

tabacitu on 18 Jul 2017

I am facing this issue. Is there a hack to get it to work?

packytagliaferro on 1 Sep 2017

@packytagliaferro I proposed a hack in a comment here that allowed me to copy vendor/backpack/crud/src/resources/views/fields/image.blade.php to resources/views/vendor/backpack/crud/fields/image.blade.php and change if (/^image\/\w+$/.test(file.type)) to if (/^image\/[\w\+]+$/.test(file.type)). I don't know that that's the best solution, but it works for me quite well, so if you're looking for a "hack", there you go.

joshlewis on 1 Sep 2017

👍1

PRs are welcome - the hack would work or even removing the validation completely?

Closing for the moment.

lloy0076 on 12 Feb 2018

Why close this if no fix has been made, and it's been acknowledged that this is a bug?

joshlewis on 28 Feb 2018

PRs are welcome.

lloy0076 on 28 Feb 2018

Yup, I think we should implement the simple solution - reopening.

tabacitu on 9 Mar 2018

Thank you for the suggestion @joshlewis

Just went through this again. I'm afraid cropperJS doesn't work with SVGs. Applying your regex would indeed allow you to _pick_ a SVG, but it wouldn't allow you to _crop_ the SVG. If you try it, the resulting file will be broken. Which makes sense now that I think about it - cropping bitmaps and cropping vector files should indeed be very different.

It looks like we can't support cropping SVGs right now. For SVGs the only good Backpack field types are upload or browse.

Sorry to bring bad news.
Cheers!

tabacitu on 20 Aug 2019

@tabacitu Actually, I just tried this out, and cropping SVGs works for me when I only apply @joshlewis' change..? cropper.js will convert it to base64-encoded png even when not tightening the cropping however, which could be improved upon, but basically I don't see why this shouldn't work.