In this article, I will describe the small, but useful enhancement for user system. It helps to create new users signed up with social networks more effective.

Core of task

The task is to implement the ability to store user profile images. This is about users who sign up with social networks. For example Google or Facebook.

Possible solutions

There are multiple ways to solve this subtask.

Solution 1. The easiest one is to store user image URL provided by the social network into your database. This is easy to implement a solution, but it has a lot of side effects. First of all storing of an external link is not the best solution, because of link can be changed outside your app, and stored before in your app link becomes invalid.

Solution 2. Other one way to solve this task is storing not only the link but storing image provided with this link. Storing images on the server machine are not the best idea, much better to use special file storage service. Most popular in my practice is AWS S3 (Simple Storage Service).

Image uploaded to s3 bucket become available with public link (After some additional files access configurations). The link provided by S3 will be stored in the database and sent to a client in the necessary points.

Looks almost like solution 1, but we got one huge difference — reliability. No one except S3 storage owner can remove a file or change the link to file. So the stored link will be the actual whole time.

So the algorithm of storing image process looks next:

Fetch User image URL from the social network while signing up process

Store Image from URL to a server file system

Upload image to S3 storage

Sore S3 image link to a database

Remove the temporary image from the file system

This approach is not bad, but not the best solution. The next solution describes how to do the same a little bit correctly and a little bit faster.

Solution 3. This is almost the same algorithm from the previous step with one key difference — I will not store image to a server file system. The idea of enhancement is store image file into a temporary buffer and then upload it to S3 storage from this buffer.

Why this way should work faster? — Because of file operations is time-consuming. So if I avoid them, I can avoid some additional time costs.

So it looks nice in theory, let's move ahead with a practice in the next section.

Practice

So I separate implementation of this approach into three functions.

First “loadImageFromUrlToBuffer” — accepts file URL, download it into a buffer and return buffer with a file as a result of its execution.

The second one “storeBufferedImageToS3” — accepts file buffer, upload data to S3 and returns the S3 file link.

The third one “storeSocialNetworkImageToS3” — is just wrapper and provides interaction between two previous functions.

All implementation in a single code sample

For this functionality, I use two additional npm packages which simplify a lot of efforts for a programmer=)

“aws-sdk” — The official AWS SDK for JavaScript.

“request” — simple and powerful HTTP client for js.

In addition, the buffered file also can be preprocessed, resized, compressed or some other actions before uploading to S3.

Conclusions

In this article, I describe an interesting and optimized way to perform a common task for the user system for a node application while sign up process.

It also can be modified for specific requirements, I just share the core idea.

If this article was interesting or useful for you, feel free to leave some claps in the left-hand panel.