Uploading files to image server using ImageKit and Multer in MERN stack

Daniel Adesanya — Fri, 07 Oct 2022 12:34:55 +0000

So, you're a fair beginner in backend development and it's common knowledge that hosting images on your server can be pretty dangerous and annoying to your end users especially when your project/solution is content-intensive (e.g. social app, e-commerce etc.) because it'll cause it to load slowly. Your solution? Giving the content heavy-lifting to dedicated server.

Well, this was my case as I already had a functioning REST API for my social app built with ExpressJS on NodeJS.

We'll be using Multer to handle file uploads on our server and imagekit will do all our media heavy lifting. I chose these tools because I just found them easier to use and the latter has a very elaborate documentation (and a free tier too 😋).

My approach to solving this since I already had my tools were to upload to the file to the imageKit server then get the URL of the uploaded media and then save it to my DB.

Let's get to work

We'll start by setting up an account on the imagekit website and then going ahead to install the necessary libraries:

`npm i imagekit multer`

Now we'll need to get some credentials from our imageKit account i.e., urlEndPoint, publicKey and privateKey(this is needed because we'll be doing server-side upload). The keys can be gotten from our imageKit account and the default urlEndPoint is usually something like this: https://ik.imagekit.io/{your_imageKit_ID}

Let's grab all of that and put it in our '.env' file (that's what I did for security's sake), so we have something like

IMAGEKIT_PUBLIC_KEY="your_public_key_here"
IMAGEKIT_PRIVATE_KEY="your_private_key_here"
IMAGEKIT_URL_ENDPOINT="your_urlEndPoint_here"

Next, we initialize our imageKit library (I did this in a separate file) with our details gotten from our '.env' file

const ImageKit = require("imagekit")
require("dotenv").config()

const imageKit = new ImageKit({
    publicKey: process.env.IMAGEKIT_PUBLIC_KEY,
    privateKey: process.env.IMAGEKIT_PRIVATE_KEY,
    urlEndpoint: process.env.IMAGEKIT_URL_ENDPOINT,
})

module.exports = imageKit

Now that we have all of that out of the way let's set Multer up!

Multer handles file uploads to our server, depending on how you set it, by appending a 'file' property to our API's 'req' object (pretty much like a middleware). So, to set it up we have to initialize its storage type like so:

const Multer = require("multer");

const storage = Multer.memoryStorage()

const multer = Multer({ storage })

module.exports = multer

Multer has two basic types of storage which is the disk storage and the memory storage like we're using since we won't be storing the files on our server (which is entirely what we're trying to avoid.). Also notice that the initiated Multer setup is exported too(I just like to think long-term maintenance).

To use our 'multer' instance, we will import it in the routes of the API we want to use it in:

//express router
const router = require('express').Router();

// our example controller(creating posts)
const postController = require('../controllers/postController');

// our multer instance
const multer = require("_pathToMulterInstance_");

router.post("/create", upload.single("file"), postController.createPost);

Multer has some functions used to determine what type of file(s) to expect from the API request. Here we have used the 'multer.single("file")' function to let multer know that we're expecting a single file. (The full multer documentation can be found here).

Now for the Fun part, THE LOGIC!!!

We move to where we have our controller

If we send a request to our API now with a file, we should see our file details in the 'req' object.

Note the 'buffer' property of the file object? this is there because of the type of storage we set while setting up multer. It would've been something different (or even absent) if we had used disk storage.

We should have our imageKit object instance imported into the file we have our controller 'cause this is where we would be using it. We would be using the 'upload()' function of the imageKit class which takes two parameters:

The upload options which requires two necessary properties
- file: the file to be uploaded(base64)
- file: the name to give the uploaded file(string)
The callback function to trigger when the file upload is done which carries two parameters
- error: if there is any and null if there isn't
- response: which carries the whole necessary information of the file uploaded. (full imageKit docs can be found here)

For now, we'll only need the url from the image response and I'm sure you already know how this ends.

The image below shows the full implementation of the ImageKit file Upload for my scenario (creating posts with images so I just send the image URL with the other post details to the backend).

In the image above, I made a checking to see if there are images and uploads just like that if there are no images. In the upload Options object, I specified the folder which the images uploaded from this API be saved to on the image server. It can be set differently based on your own settings. After necessary processing and saving, it sends a response of the new post which will now include the url of the image that has been saved in the database.

End Note: You can take the viewing of the images further the the imageKit frontend libraries because it'll give total control over how the images are viewed and scaled.

Finally, I'd like to know what you would've done differently and any other of your thoughts on this.

STAY CURIOUS!!!!

I quit!...Or should I?

Daniel Adesanya — Mon, 03 Oct 2022 23:09:06 +0000

to future readers(incase anyone even finds this): this is obviously my first post and I'm clearly venting/planning out my next line of action so get what you can and/or just enjoy this piece

=====================================================================================

It's few minutes past 11pm and the day hasn't been so good. I was glued to my screens both phone and laptop, switching between apps LinkedIn, Twitter, Facebook, Gmail hoping to come across or receive a news that'll make me feel very happy. Either a job or some sort of invitation to build something really cool.

I work on a daily basis sometimes from home, sometimes from the office but it has become quite stale. Same old process, same project, same technologies. I saw this as a problem but how do I fix this? I have to leave. How then do I make money to live? Get a job. How? I could either freelance or work for a more fun organization outside the country of course 'cause we got to factor in gaining completely new experience while earning the big bucks (that's why most of us are in this field, right? Not me though! Y'all be safe).

Well it's not been a smooth ride either way. I was told with my number of years of experience, it'd be difficult (not impossible though). Really, I feel the No. of years of experience shouldn't really count because what if someone started as a Junior/Intern in a startup and had a shit ton load of work and experience throughout the person's 1-year there and another person got a job to only maintain or build minor features for an already existing product. Crazy Right?!...Well, I've gotten in at least more than 5 Tests and interviews altogether. Not good numbers honestly but I'm staying hopeful.

Since I have identified this as a primary problem, I need to get to working on solving it. How?

Start writing : I have a very interesting mind but I don't interact much with people. It'd be nice to build a community of some sort of people with likewise controversial thoughts especially about tech.
Reach out to more people : This pains me to write cause it's almost just too hard for me to randomly reach out to people(Strangers!! Especially when our parent has told us not to talk to them😪)
Build more useful real-life projects : This is probably the most easiest on this list cause I do this practically everyday. Turns out Coding is only but a small fraction of the actual work.
Building a social presence(LinkedIn, Twitter) : Probably not that important but it'll create awareness on what I do and keep my DMs flowing with Jobs and opportunities(Or so they say).
GOD FIRST : The most important to me, I guess. I may not be too spiritual but I damn well believe God is real and he works wonders so it'd be foolish to depend solely on my works and not bring him in.

This is my plan to turn a new leaf and not quit until I get a new and interesting offer. Hopefully, it works.

STAY CURIOUS!!!

DEV Community: Daniel Adesanya

Uploading files to image server using ImageKit and Multer in MERN stack

Let's get to work

I quit!...Or should I?