Not recognized a Base64 DataURI string with mime-type "image/svg+xml" with directly upload from the browser

Follow

Mockup

• February 02, 2021 03:33

If I upload base64 string with mime-type "image/png" directly from the browser as described here, then it's work correct

- code:

 

uploaded image:

 

 

If I upload svg image with cloudinary js library directly from the browser as file, then it's work correct:

Uploaded svg image with transformation to png:

https://res.cloudinary.com/mockup/image/upload/v1612230565/wed/qv5ttky7hkrty9l52orf.png 

 

 

But if I upload previous svg file as Base64 DataURI string with mime-type "image/svg+xml", then type of file not recognized

- code:

 

- uploaded image:

 

uploaded svg image with transformation to png not working:

https://res.cloudinary.com/mockup/raw/upload/v1612232120/wed/bm6wa7ksyfsvbkczytay.png 

 

If I download file and add ".svg" extension manually, then it looks as normal svg image

 

 

1

• 

  Aleksandar Kostadinov

  • February 02, 2021 18:43

  Hi,

  Thanks for sharing that. The reason you can't apply a transformation is that the SVG which was uploaded via Base64 seems to be recognised as a "raw" file rather than "image" and you can't apply transformations on raw files. I will do some tests on our side and provide more information, but if you are going to be uploading images specifically, then for the meantime and as a workaround, you can change the upload API endpoint from `.../auto/upload` to `.../image/upload` and that should handle the SVG Base64 upload correctly. For example, you may be able to do that by running:

  $('.cloudinary_fileupload').fileupload('option', 'url', 'https://api.cloudinary.com/v1_1/mockup/image/upload');

  Let me know if that works for you for the meantime.

  1

  Comment actions Permalink
• 

  guntur hakim

  • February 03, 2021 03:27

  Hi, Aleksandar Kostadinov

  thanks for advice, finally I can solve this with my developer at my company roomme. and image appear more faster look up to my user

  0

  Comment actions Permalink
• 

  Mockup

  • February 03, 2021 05:09

  Hi,

  That works. Thank you very much!

  0

  Comment actions Permalink
• 

  Aleksandar Kostadinov

  • November 14, 2021 15:48

  Hi all,

  Updating this thread following a somewhat recent addition to the upload() API parameters - called "filename_override". It serves the purpose of overwriting the name of the file. For example, if you're uploading a local file called sample.jpg then that will be the filename metadata stored on Cloudinary. If you use the fl_attatchment transformation to download the asset, then we will use that filename when returning the file for download. If you use "filename_override" then you can override this with a custom name and in this case, with Base64 uploads, those will be without a filename by default. That said, if you pass a filename ending with .svg extension (such as test.svg) then the file will be stored as an image rather than a raw file even when using "/auto/upload".

  0

  Comment actions Permalink

Please sign in to leave a comment.