Cloudinary is an end-to-end image and video management solution for websites and mobile apps, covering everything from image and video uploads, storage, manipulations, optimizations to delivery.
Installation:
-
Step 1: Go to the project directory and initialize the project using the below command in the terminal.
npm init -y
-
Step 2: Install the required npm packages using the following command.
npm install express multer cloudinary
-
Step 3: Create 2 files in the current project directory named index.js and public/index.html as shown in the below project directory.
Project Structure:
index.html: It basically contains 2 forms i.e single and multiple file upload.
<!DOCTYPE html> < body style = "padding: 30px;" >
< form method = "POST" action = "/profile-upload-single" enctype = "multipart/form-data" >
< div >
< label >Upload profile picture</ label >
< input type = "file" name = "profile-file" required/>
</ div >
< div >
< input type = "submit" value = "Upload" />
</ div >
</ form >
< br >< hr >< br >
< form method = "POST" action = "/profile-upload-multiple" enctype = "multipart/form-data" >
< div >
< label >Upload multiple profile picture</ label >
< input type = "file" name = "profile-files" required multiple />
</ div >
< div >
< input type = "submit" value = "Upload" />
</ div >
</ form >
</ body >
</ html >
|
index.js: Replace cloud_name, api_key, api_secret with your cloudinary credentials which you can find on cloudinary dashboard.
// Requiring module const express = require( "express" );
const multer = require( "multer" );
const port = 3000; const app = express(); const cloudinary = require( "cloudinary" ).v2;
const bodyParser = require( "body-parser" );
const fs = require( "fs" );
// Creating uploads folder if not already present // In "uploads" folder we will temporarily upload // image before uploading to cloudinary if (!fs.existsSync( "./uploads" )) {
fs.mkdirSync( "./uploads" );
} // Multer setup var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb( null , "./uploads" );
},
filename: function (req, file, cb) {
cb( null , file.originalname);
},
}); var upload = multer({ storage: storage });
// Body parser configuration app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname + "/public" ));
app.use( "/uploads" , express.static( "uploads" ));
// Cloudinary configuration cloudinary.config({ cloud_name: "YOUR_CLOUD_NAME" ,
api_key: "YOUR_API_NAME" ,
api_secret: "YOUR_API_SECRET" ,
}); async function uploadToCloudinary(locaFilePath) {
// locaFilePath: path of image which was just
// uploaded to "uploads" folder
var mainFolderName = "main" ;
// filePathOnCloudinary: path of image we want
// to set when it is uploaded to cloudinary
var filePathOnCloudinary =
mainFolderName + "/" + locaFilePath;
return cloudinary.uploader
.upload(locaFilePath, { public_id: filePathOnCloudinary })
.then((result) => {
// Image has been successfully uploaded on
// cloudinary So we dont need local image
// file anymore
// Remove file from local uploads folder
fs.unlinkSync(locaFilePath);
return {
message: "Success" ,
url: result.url,
};
})
. catch ((error) => {
// Remove file from local uploads folder
fs.unlinkSync(locaFilePath);
return { message: "Fail" };
});
} function buildSuccessMsg(urlList) {
// Building success msg to display on screen
var response = `<h1>
<a href= "/" >Click to go to Home page</a><br>
</h1><hr>`;
// Iterating over urls of images and creating basic
// html to render images on screen
for ( var i = 0; i < urlList.length; i++) {
response += "File uploaded successfully.<br><br>" ;
response += `FILE URL: <a href= "${urlList[i]}" >
${urlList[i]}</a>.<br><br>`;
response += `<img src= "${urlList[i]}" /><br><hr>`;
}
response += `<br>
<p>Now you can store this url in database or
// do anything with it based on use case.</p>
`; return response;
} app.post( "/profile-upload-single" ,
upload.single( "profile-file" ),
async (req, res, next) => {
// req.file is the `profile-file` file
// req.body will hold the text fields,
// if there were any
// req.file.path will have path of image
// stored in uploads folder
var locaFilePath = req.file.path;
// Upload the local image to Cloudinary
// and get image url as response
var result = await uploadToCloudinary(locaFilePath);
// Generate html to display images on web page.
var response = buildSuccessMsg([result.url]);
return res.send(response);
}
); app.post( "/profile-upload-multiple" ,
upload.array( "profile-files" , 12),
async (req, res, next) => {
// req.files is array of `profile-files` files
// req.body will contain the text fields,
// if there were any
var imageUrlList = [];
for ( var i = 0; i < req.files.length; i++) {
var locaFilePath = req.files[i].path;
// Upload the local image to Cloudinary
// and get image url as response
var result = await uploadToCloudinary(locaFilePath);
imageUrlList.push(result.url);
}
var response = buildSuccessMsg(imageUrlList);
return res.send(response);
}
); app.listen(port, () => { console.log(`Server running on port ${port}!
\nClick http: //localhost:3000/`);
}); |
Steps to run the program:
node index.js
Output: Open the browser and visit http://localhost:3000. You could now see the following 2 forms i.e single and multiple image upload as shown below.
References: https://cloudinary.com/documentation/node_integration.