When you think of uploading file to the server side, multer.js will come first to your mind. The extension of multer to upload files to google-cloud-service (GCS) is available as multer-google-storage package. However, multer-google-storage still lacks of functions for manipulating uploading image(s). In fact, we do not want to store high quality and high resolution images, since they are costly for the cloud storage service and heavy for loading back to the web application. As a solution, jimp package, which is specialize in manipulating image, has been chosen to handle the image files before uploading to GCS. In this article, we will modify the multer-google-storage package by injecting jimp functionalities before uploading to the storage.
The multer-google-storage main functionality is located in index.js file in ./node-modules/multer-google-storage folder. The modification is focus on the function MulterGoogleCloudStorage(opts). At the time of writing this, the code is as below:
 |
| Fig. 1 - multer-google-cloud |
As we have seen in the code above, the "file" parameter is the file stream that we have retrieved from the upload form. So, we will work on manipulating the 'file' parameter before streaming it onto the cloud storage. Consequently, the result is as in the following code:
 |
| Fig.2 - multer-google-cloud with jimp for image manipulation |
In Fig. 2, we added an array variable "buff" on line 13 to received the file stream. Next, the event 'data' triggered on receiving stream on line 14 will push each chunk into the "buff" array. Once the stream is finish, the event 'end' is triggered and we created a 'buffer' variable on line 16 for storing the finalized image buffer. Next, we used jimp to read the buffer and manipulate the image as we want before converting the buffer back to stream on line 19 to 21. Finally, we pipe the file stream to the g-cloud write stream.
It took me a few days to figure this out and I am glad to share the trick. Hopefully, it helps.
Author: Michael Devel
Published: 07 Nov 2017
Great article...
ReplyDeleteI don't know programming languages so for me it is all new and maybe I will learn them in time. At the moment I am learning to use native applications in cloud computing and I like this topic the most. If you want to read more about here, you'll also learn a lot more than on other sites.
ReplyDeleteFor many web applications that let users share papers, photos, and other types of material, file uploads are a necessary functionality. Multer is a well-liked middleware used for Handling file uploads in Node.js using Multer middleware.in the Node.js environment to effectively handle file uploads. We’ll look at how to use Multer to create file uploads in Node.js in this in-depth tutorial, which covers everything like Multer typescript, Multer javascript from set up to save the configuration, and how to use Multer in node js, Multer GitHub and Step-by-step guide for file uploads with Multer in Node.js and how to implement file uploads in node.js using Multer?
ReplyDelete