What are the pros and cons of Base64 file upload through JSON, as opposed to AJAX or jQuery upload?

Question

I was tasked to write image upload to remote server and save those images locally. It was quite easy to do it with Base64 transfer through JSON and storing with Node.js. However, is there a reason to not use this type of file upload, to use AJAX or other ways? (Other than the 30% bandwidth increase, which I know of. You can still include that in your answer in order for it to be full).

Answer 1

Data Encoding

Every data Encoding and Decoding can be used duo various reasons, which came up with benefits and downsides.

like:

Error-detection encodings : which can detect errors but increase data usage.
Encryption encodings: turns data to cipher which intruder wont decipher.

There are a lot of Encoding Algorithms which Alter Data in Which has some usefullness to do that.

but with

Base64 Encoding, its encode every 6-bit data into one character (8-bit) . 3 Byte to 4 Byte but it only includes alphanumeric(62 distinc) and 2 signs.

its benefits is it Dose not have special chars and signs

Base64 Purpose

it make possible to transfer Any Data with Channels Which Prohibits us to have:

special chars like ' " / \\ ...
non-printable Ascii like \\0 \\n \\r \\t \\a
8-bit Ascii codes (ascii with 1 MSB )

binary files usually includes any data which if turns in ascii can be any 8-bit character.

in some protocols and application there are I/O Interfaces Which Does only accepts a handful of chars (alphanumeric with a few of signs).

duo to:

prevent to code injection (ex: SQL injection or any prgramming-language-syntax-like characters ; )
or just some character has already has a meaning in their protocol (ex: in URI QueryString character & has a meaning and cannot be in any QueryString Value)
or maybe the input is not intended to accept non-alphanumerical values. (ex: it should accept only Human Names )

but with base64 encoding you can encode anything and transfer it with any channel you want.

Example:

you can encode an image or application and save it in DBMS with SQL
you can include some binary data in URI
you can send binary files in a protocol which has been designed to accepts only human chats as alphanumerical like IRC Channel

Answer 2

Base64 is a just a converting format that HTTP server cannot accept binary data in the contents except the HTTP Header type is binary or acceptable format defined by web-server.

As you might know, JSON can contain various formats and information; thus, you can contain such as

{
     IMG_FILENAME="HELLO",
     IMG_TYPE="IMG/JPEG", 
     DATA="~~~BASE64 ENCODED IMAGE~~~~" 
}

You can send JSON file through AJAX or other method. But, as I told you, HTTP server have various limitation because it should keep RFC2616 ( https://tools.ietf.org/html/rfc2616 ).

In short, Sending Through JSON can contain various data. AJAX is just a type of sending as other ways does.

Answer 3

I used same solution in one of my project.

The only concern is the request body size. If all your images are small, like a few M, then you should be fine.

My server is asp.net core, its maxAllowedContentLength value is 30000000, which is approximately 28.6MB. When the image size is over this, the request failed with error "request body too large".

I think node.js should have similar setting, make sure to adjust it to meet your need.

Please note that when the request size is too big, the possibility of request timeout increases accordingly due to the network traffic. This will be an issue especially for the requests from phones.

Answer 4

I think the use of base64 is valid.

The only doubt is the size of the request, but this can be circumvented if you divide this base64 in the frontend, if a 30mb file you could divide each request into 5mb and in the backend put the parts together, this is useful even to do the "keep downloading" "when you have a problem with the network and corrupt some part.

Hugs

Answer 5

Base64 converts your data to an ASCII representation of the binary data. It allows you to embed your data in text streams such as JSON for example. Base64 increases the size of the data transferred by 33%.

multipart/form-data is the standard way of transferring binary data in HTTP requests. It allows you to use specific encodings / content types for each part you'd like to transfer. In my opinion, you should stick to multipart uploads unless you have specific requirements or device/SDK capabilities.

Checkout these links

What is difference Between Base64 and Multipart?

Base64 image upload VS Binary image upload?

Answer 6

The idea of base64 encoding is to avoid binary data for protocols based on text. Outside this situation, it's I think always a bad idea.

Pros

Avoidance of binary data for protocols based on text, and independance from external files.
Avoidance of delimiter collision .

Cons

Time and space increased complexity; for space it's 33–36% (33% by the encoding itself, up to 3% more by the inserted line breaks).
API response payloads are larger/too large.
User Experience is negatively impacted, unless one invoke some lazy loading.

By including all image data together in one API response, the app must receive all data before drawing anything on screen. This means users will see on-screen loading states for longer and the app will appear sluggish as users wait.

This is however mitigated with Axios and some lazy loader such as react-lazyload or lazyload or so.

CDN caching is harder. Contrary to image files, the Base64 strings inside an API response cannot be delivered via a CDN cache. The whole API response must be delivered by CDN. (cf., Don't use Base64 encoded images on mobile and Why "optimizing" your images with Base64 is almost always a bad idea )
Image caching on the device is no longer possible.
Content management becomes harder on server side. Most content management tools handle images as binary files. But then when managing in binary, there is the time overhead of encoding/decoding.
No security gain and overhead in engineering to mitigate ( Sanitizing, Input Validation, Escaping ). Example of XSS attack: Preventing XSS with Base64 encoding: The False sense of web application security

The developers of that site might have opted to make the website appear more secure by having cryptic URLs and whatnot. However, that doesn't mean this is security by obscurity.

If their website is vulnerable to SQL injection and they try to hide that by encoding the URLs, then it's security by obscurity. If their website is well secured against SQL injection; XSS; CSRF; etc., and they deiced to encode the URLs like that, then it's just plain stupidity.

It does not help with text encoded images such as svg ( Probably Don't Base64 SVG )
Data URIs aren't supported on IE6 or IE7, nor on Opera before 7.2 ( Which browsers support data URIs and since which version? )

References

https://en.wikipedia.org/wiki/Base64

https://en.wikipedia.org/wiki/Delimiter#Delimiter_collision

SO: What is base 64 encoding used for?

https://medium.com/snapp-mobile/dont-use-base64-encoded-images-on-mobile-13ddeac89d7c

https://css-tricks.com/probably-dont-base64-svg/

https://security.stackexchange.com/questions/46362/purpose-of-using-base64-encoded-urls

https://bunnycdn.com/blog/why-optimizing-your-images-with-base64-is-almost-always-a-bad-idea/

https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/