Uploading file with express-fileupload to cloudinary

File uploading is one of the common feature your website will need to have, today we will see how to Upload a file. What we will be doing is uploading a file to our cloudinary after that we will receive the a link to the file from coudinary with that link we can add it to our database schema or do what ever we want with it. This will be a simple process. First let me tell you a little about some the tools we will use.

1.Cloudinary - is a SaaS technology company headquartered in Santa Clara, California, with an office in Israel. The company provides a cloud-based image and video management services. It enables users to upload, store, manage, manipulate, and deliver images and video for websites and app Cloudinary.com

2.express fileupload - is a simple express middleware for uploading express-fileupload

Step 1

Make a directory where we will be doing all the work of file uploading. you will need to initialize npm.

mkdir express-file-upload

cd express-file-upload

npm init

Step 2

We will need to install some dependencies.

npm install cloudinary express express-fileupload

Step 3

We will make the server.js file where we will be doing most of the work. inside the server.js file we will require the dependencies we installed and make a route for testing.

const express = require('express');

const cloudinary = require('cloudinary');

const fileUpload = require('express-fileupload');

const app = express();

 app.get('/',(req,res)=>{

    res.send('hello world');

    });

  const PORT= 3000;

app.listen(PORT,()=>{

 console.log('server started on port 3000');

 });

I will be using postman to check if its working or not After adding the code run your server by typing the code below in your command prompt node server.js

This is great it means our server is up and running so now we will move to the important part of Uploading our file.👍👍

Step 4

We will add a post route where the file will be uploaded. Then store the file in a temp folder. here is where we will use the express-fileupload dependency we installed Type the following code.

//this will enable the file to be stored on a temp folder

 app.use(fileUpload({               
      useTempFiles : true
              }));

 app.post('/uploadfile',(req,res)=>{

  const squirtleImage = req.files.pokemon; 

    res.send(squirtleImage);

});

Step 5

Now that we have our file in the temp folder we can upload it to cloudinary. First we will need to register on cloudinary and get our credintial codes its totally free after that we will need to configure cloudinary on our side by adding our api and secret keys. ###### stands for your own api and secret key. Type the following code

 cloudinary.config({
    cloud_name :'##########',
    api_key:'##########',
    api_secret:'###########' 
    });

 //updated post function

 app.post('/uploadfile', async(req,res)=>{

 const squirtleImage = req.files.pokemon;

// this function will upload to cloudinary   
  function uploader(){ 

 return new Promise(function(resolve, reject) {  

 cloudinary.uploader.upload(squirtleImage.tempFilePath,function(result,err){

    if(err){console.log(err);}

        resolve(result);

             });

         });

     } 

 var data = await uploader();

 res.send(data)

        });

This will give us the link of the image uploaded Now if you are working with a database you can attach the link to your preferred data.🎈🎉

Key points

Cloudinary only accepts image and pdf but with configuration can accept other files
If you have multiple files that are not all required we suggest you use multer
If you are using a form make sure you have enctype="multipart/form-data" in your form tag

Agon's tips