Upload File from Front-End to Back-End: Simple Instructions


 Upload File from Front-End to Back-End – A lot of you are still doing it wrong !!

Uploading files is an API (for the back-end), a feature (with the front-end) that almost every app has. This is also a sensitive feature that is easy to get wrong for new brothers.

Upload File from Front-End to Back-End: Simple Instructions

1. Client encode file (base64) and send to backend:

I have seen many backend developers ask the frontend to do the same. This way the downside is handling very heavy on both sides. Because the frontend must be encoded, the backend must also decode.
In this way if the backend does not decode to recreate the file but stores all the base64 string in the database, it would be a very serious mistake. DB was very heavy then because it contained the physical file. When accessing, it consumes a lot of CPU and bandwidth.
Obviously this is not a good solution.

2. Client uses API + Secret Key to upload directly to Cloud Storage

This is a quick solution, without the backend, BUT it is terrible. The reason is very simple is because secret keys are easily leaked with a simple trick: capture / debug request upload file.
Once a secret key has been revealed, the attacker has complete control over that key. Lightly, our storage is used for free. If heavy, then drag all files or delete all files on the storage (if the key has permission to delete).
If so, how to RIGHT? There are 2 ways you can refer:

C1. Intermediate upload via backend:

The client uploads the file to the backend but does not need to do base64 encode. We just need to use multipart form data. When the backend is finished receiving the file, you can choose to upload it to Cloud Storage or somewhere secure that only the backend knows.
Thus, the client does not need a secret key so they are not afraid to reveal it anymore. Backend, when needed, can be converted to Cloud services quickly.
However, this method has disadvantages:
– The client will wait significantly longer to receive a response from the backend. Because the backend must re-upload via Cloud.
– The bandwidth consumed in the backend will be double. For example, receiving 10MB files, uploading 10MB is 20MB of I / O bandwidth.

C2. Client uploads files to Cloud Storage BUT uses Presigned URL from backend.

To better solve the problem above, Cloud Storage operators have devised a solution to ensure security and the backend does not need to waste bandwidth. This is the Presigned URL.
Presigned URL is roughly a URL with security parameters, providing a temporary permission to read and create files on the Cloud. To successfully create the Presigned URL, we need the backend to do this. Again, I emphasize and recommend that we should not do this in Client / Frontend.
Clients can use this URL to upload files directly, so the backend doesn’t need to “transit” the file anymore. From there the bandwidth problem is solved. Resource has been released. The bill is also very light burden.
Hopefully, with the above sharing, the backend will make the standard file Upload API more refined.


Please enter your comment!
Please enter your name here