0

We have frontend as Google PWA application and REST API on backend. We need to send some really big images selected by our PWA users to backend (dozens megabyte size). Currently, PWA user selects an image from cell phone file system (as a result he can see it on the cell phone screen in PWA UI) and then press "Upload" button to send it to backend via REST API.

Initially to implement this functionality really quick we sent image data in base64 format through network and store it in the same format in DB field as a string.

Now we decided to get rid from base64 encoding file sending and on the backend I've implemented multipart/form-data receiving in binary format as was advised on this site many times and store it in DB field with bytea type. Excellent!

However, for some reason our frontend dev told me he can't simple get binary image data as PWA UI translate it to base64 itself after loading from file system. And UI DOM model keep image in <img> element just in this format. So to sending data from UI to backend he needs to do base64 decoding beforehand.

My question is how to either show images in binary format in UI without base64 encoding or how to avoid keeping both base64 and binary data at frontend at the same time (remember our images have size of dozens megabytes)?

Andriy Kryvtsun
  • 3,220
  • 3
  • 27
  • 41
  • Well, once you get the bytes on the back-end you need to store them in a file that's accessible to the front-end. The front-end would then simply use an `img` tag where the `src` points to the file that was uploaded. There should be no need to use Base64 encoding/decoding explicitly – gabriel.hayes Nov 05 '19 at 17:38
  • @user1538301 incorrect. The source of image files is frontend. Backend just receiving images from frontend and store them in DB for future requests. Before sending image to backend user needs ability to see it on his PWA UI which enforces base64 encoding. – Andriy Kryvtsun Nov 05 '19 at 17:42
  • Why would you store them in a database and not as files? They are files. Your front-end developer is having trouble because browsers aren't meant to simply render arbitrary byte arrays. I mean, you could surely use a canvas, but why would you do that when a browser renders an image just fine on its own? – gabriel.hayes Nov 05 '19 at 17:46
  • @user1538301 we store all kind of our data in PostgresSQL (we need to do complex queries to reach needed data. And images too). Moreover, for security reasons backend exposes only REST API endpoints. No direct access to backend file system or so. – Andriy Kryvtsun Nov 05 '19 at 17:54
  • Well, I mean there is direct access to your back-end file system. You're serving up JavaScript and HTML. If it's really that necessary for it to be in your database, I'd store it in both mediums.. it's going to be a rather massive headache trying to render massive binary streams in plain JS. A browser already exposes mechanisms written in native code to render large images/videos. Your front-end developer will essentially have to rewrite that same mechanism in JS to do what you're asking – gabriel.hayes Nov 05 '19 at 17:56
  • @user1538301 no. I don't serve JS and HTML on my backend. PWA application is a completely independent client (actually, prototype of Android or iOS read mobile clients in the future) – Andriy Kryvtsun Nov 05 '19 at 18:43
  • 1
    base64 is not mandatory, you can work with binary images on the client, see e.g. https://stackoverflow.com/questions/36067767/how-do-i-upload-a-file-with-the-js-fetch-api and https://stackoverflow.com/questions/9463981/displaying-a-byte-array-as-an-image-using-javascript/57606260#57606260 – georg Nov 05 '19 at 19:08
  • @georg thanks for the links! The first link has helped us to upload binary data successfully! Unfortunately, the second link hasn't helped :( We still can't correct base64 encode binary image data received from backend :( – Andriy Kryvtsun Nov 06 '19 at 11:35
  • @AndriyKryvtsun: could you post a minimal example of what doesn't work? Because the second snippet does exactly that: request an image from the backend and display it. – georg Nov 06 '19 at 12:09
  • @georg just created separate question for this problem with code and data examples https://stackoverflow.com/q/58730240/2313177 – Andriy Kryvtsun Nov 06 '19 at 12:34

0 Answers0