cloudinary multiple file upload error nodejs - node.js

Question

I am trying to do a multiple file upload using Cloudinary, but for some reason, it only picks the last file I upload and not all 4 of the files, it returns only one file in the array.
Here are the files
Multer.js
const path = require("path");
//setting the storage engine
const storage = multer.diskStorage({
filename: function (req, file, cb) {
cb(
null,
file.fieldname + "-" + Date.now() + path.extname(file.originalname)
);
},
});
// Check File Type
function checkFileType(file, cb) {
// Allowed extension format
const filetypes = /jpeg|jpg|png|pdf/;
// Check the extension format
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
// Check mime
const mimetype = filetypes.test(file.mimetype);
if (mimetype && extname) {
return cb(null, true);
} else {
req.flash("error", "Invalid File");
cb("ERROR: Please upload a valid filetype");
return res.redirect("back");
}
}
//initialize the file uplaod
const upload = multer({
storage: storage,
//limits file size
fileFilter: function (req, file, cb) {
checkFileType(file, cb);
},
});
module.exports = { upload };
cloudinary.js
const { CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET } =
process.env;
const cloudinarySetup = async () => {
cloudinary.config({
cloud_name: CLOUDINARY_CLOUD_NAME,
api_key: CLOUDINARY_API_KEY,
api_secret: CLOUDINARY_API_SECRET,
});
};
// cloudinary upload method
const cloudinaryMediaUpload = async (file, folder) => {
await cloudinarySetup();
return new Promise((resolve) => {
cloudinary.uploader.upload(
file,
{
resource_type: "auto",
folder: folder,
},
(err, result) => {
if (err) throw err;
resolve({
url: result.secure_url,
id: result.public_id,
});
}
);
});
};
module.exports = { cloudinaryMediaUpload };
defaultController.js
const { Business } = require("../models/business");
const { cloudinaryMediaUpload } = require(".././config/cloudinary");
module.exports = {
indexGet: (req, res) => {
let pageTitle = "Home";
res.render("default/index", { pageTitle });
},
aboutGet: (req, res) => {
let pageTitle = "About";
res.render("default/about", { pageTitle });
},
contactGet: (req, res) => {
let pageTitle = "Contact";
res.render("default/contact", { pageTitle });
},
registerGet: (req, res) => {
let pageTitle = "Register";
const { businessName, businessAddress, businessPhone } = req.body;
res.render("default/register", {
pageTitle,
businessName,
businessAddress,
businessPhone,
});
},
registerPost: async (req, res) => {
const { businessName, businessAddress, businessPhone, businessCategory } =
req.body;
// console.log(req.body);
console.log(req.files);
let errors = [];
// Checking Required Field
if (
!businessName ||
!businessAddress ||
!businessPhone ||
!businessCategory
) {
errors.push({ msg: "All fields are required" });
}
let validatePhone = validatePhoneNumberSync(businessPhone);
if (!validatePhone.isValid === true) {
errors.push({ msg: "Invalid phone number" });
}
if (errors.length > 0) {
let pageTitle = "Register";
res.render("default/register", {
pageTitle,
businessName,
businessAddress,
businessPhone,
errors,
});
} else {
Business.findOne({ businessName }).then(async (buss) => {
if (buss) {
errors.push({
msg: "A business with this name is already registered",
});
let pageTitle = "Register";
res.render("default/register", {
pageTitle,
businessName,
businessAddress,
businessPhone,
errors,
});
} else {
// uploading files to cloud
const uploader = async (path) => {
const folderName = businessName
.trim()
.toLowerCase()
.replace(/^[^A-Z0-9]+/gi, function (match) {
return arguments[2].toUpperCase();
});
console.log(folderName);
await cloudinaryMediaUpload(path, "folderName");
};
const urls = [];
const files = req.files;
for (const file of files) {
const { path } = file;
const cloudPath = await uploader(path);
urls.push(cloudPath);
}
const newBusiness = new Business({
businessName,
businessAddress,
businessPhone,
businessCategory,
});
newBusiness.save();
req.flash("success_msg", "Business successfully registered");
res.redirect("/");
}
});
}
},
};
register.ejs
<%- include("../partials/default/header") %>
<div class="form_wrapper">
<div class="form_container">
<div class="title_container">
<h2 style="color: #65b54a;">Business Registration</h2>
</div>
<div class="row clearfix">
<div class="">
<%- include ("../partials/messages"); %>
<form action="/register" enctype="multipart/form-data" method="POST">
<div class="row clearfix">
<div class="col_half">
<div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
<input type="text" name="businessName" placeholder="Business Name" required
value="<%= businessName || '' %>" />
</div>
</div>
<div class="col_half">
<div class="input_field"> <span><i aria-hidden="true" class="fa fa-map-marker"></i></span>
<input type="text" name="businessAddress" placeholder="Business Address" required
value="<%= businessAddress || '' %>" />
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half">
<div class="input_field"> <span><i aria-hidden="true" class="fa fa-phone"></i></span>
<input type="text" name="businessPhone" placeholder="Business Phone Number" required
value="<%= businessPhone || '' %>" />
</div>
</div>
<div class="col_half">
<div class="input_field select_option">
<select name="businessCategory">
<option selected disabled>Business Category</option>
<option>Technology</option>
<option>Agriculture</option>
<option>Fashion</option>
<option>Entertainment</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
</div>
<!-------------------------Files upload section---------------->
<div class="row clearfix">
<div class="col_half">
<div class="input_field d-flex justify-content-around">
<input type="file" name="bussFile" multiple accept=".pdf, .png, .jpg, .jpeg" id="img"
style="display:none;" />
<label for="img" class="btn btn-success"><span class="d-none d-md-inline mr-2"><i aria-hidden="true"
class="fas fa-upload"></i></span>Upload Incorporation Document</label>
</div>
</div>
<div class="col_half">
<div class="input_field d-flex justify-content-around">
<input type="file" name="bussFile" multiple accept=".pdf, .png, .jpg, .jpeg" id="img"
style="display:none;" />
<label for="img" class="btn btn-success"><span class="d-none d-md-inline mr-2"><i aria-hidden="true"
class="fas fa-upload"></i></span>Upload Company's Profile</label>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col_half">
<div class="input_field d-flex justify-content-around">
<input type="file" name="bussFile" multiple accept=".pdf, .png, .jpg, .jpeg" id="img"
style="display:none;" />
<label for="img" class="btn btn-success"><span class="d-none d-md-inline mr-2"><i aria-hidden="true"
class="fas fa-upload"></i></span>Upload Financial Statements</label>
</div>
</div>
<div class="col_half">
<div class="input_field d-flex justify-content-around">
<input type="file" name="bussFile" multiple accept=".pdf, .png, .jpg, .jpeg" id="img"
style="display:none;" />
<label for="img" class="btn btn-success"><span class="d-none d-md-inline mr-2"><i aria-hidden="true"
class="fas fa-upload"></i></span>Upload Investment Pitch Deck</label>
</div>
</div>
</div>
<input class="button" type="submit" value="Register" />
<!-- <button type="submit" class="btn btn-info">
Register
</button> -->
</form>
</div>
</div>
</div>
</div>
<%- include("../partials/default/footer") %>
And this happens to be the array I get back when I submit. Only the last file upload was picked and not all 4 of the uploads
[
{
fieldname: 'bussFile',
originalname: 'tab.png',
encoding: '7bit',
mimetype: 'image/png',
destination: 'C:\\Users\\HP\\AppData\\Local\\Temp',
filename: 'bussFile-1664784129792.png',
path: 'C:\\Users\\HP\\AppData\\Local\\Temp\\bussFile-1664784129792.png',
size: 68329
}
]

Answer 1

When I check out the documentation here -
It looks like only a single "file" is supported at one time.
https://cloudinary.com/documentation/image_upload_api_reference#upload_required_parameters
Details about how to upload more in parallel here:
https://support.cloudinary.com/hc/en-us/articles/202520662-How-can-I-bulk-upload-my-images-#:~:text=Cloudinary's%20upload%20API%20supports%20a,files%20in%20a%20short%20term.