cloudinary multiple file upload error nodejs

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
  }
]

John Herrera · Accepted Answer · 2022-10-03 23:27:20Z

0

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.

answered Oct 3, 2022 at 23:27

John Herrera

161 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

cloudinary multiple file upload error nodejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related