I am looking for a way to batch upload several images from an HTML page to a nodejs server, where I can then rename and

Exploring the world of nodejs, I am seeking guidance on updating multiple images from HTML to node js. Specifically, how can I rename each image differently and save them to a directory? Alternatively, is there another solution that would better suit my needs?

My attempts with multer have proven unsuccessful as the files cannot be renamed with unique identifiers.

<form method="post" id='picForm' enctype="multipart/form-data" action='/test.html'>
  <input id="imgInpZero" type="file" name="avatar"/>
  <input id="imgInpOne" type="file" name="avatar"/>
  <button type="submit">Submit</button>
</form>

Within my node js code:

var multer = require('multer');
var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'image')
  },
  filename: function(req, file, cb) {
    cb(null, "123.jpg");
  }
});

var upload = multer({
  storage: storage
});

app.post("/test.html", upload.array('avatar'), function(req, res, next) {});

It is my desire for each of the two images to possess distinct names.

Answer №1

To achieve the desired outcome, the only modification required is in the JavaScript code provided below.

var multer = require('multer');
var path = require('path');
var img=0;
var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'image')
  },
  filename: function(req, file, cb) {
    img+=1;
    var name='img'+ img + path.extname(file.originalname);
    cb(null, name);
  }
});

var upload = multer({
  storage: storage
});

app.post("/test.html", upload.array('avatar'), function(req, res, next) {});

Simply install the Path module to handle image extensions by running npm install path

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Vue component should trigger the display of data in a Bootstrap modal based on the row of the button that was

Here is a sample code snippet demonstrating how data is fetched from the database: <table class="table table-bordered"> <thead> <tr><th>User ID</th><th>Account Number</th><th>Accou ...

Having trouble with npm installation: "npm error! code ERR_SSL_WRONG_VERSION_NUMBER"

Encountering issues while trying to install modules for my react app. When running npm i, the following warnings and errors are displayed: npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generate ...

Having trouble installing the npm package html2json on Windows due to encountering an error during the installation process

I've recently updated npm and node, but I'm still encountering issues. I've tried searching for a solution, but haven't been successful. Can anyone assist me in resolving this problem? I have already attempted the following steps: npm ...

Mapping JSON data from an array with multiple properties

Here is a JSON object that I have: obj = { "api": "1.0.0", "info": { "title": "Events", "version": "v1", "description": "Set of events" }, "topics": { "cust.created.v1": { "subscribe": { ...

The background image on my CSS is not showing up

I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...

How do you go about installing the most recent version of a module through Private NPM?

When using a private npm registry, I have noticed that some common commands do not seem to be functioning properly: npm install without specifying a specific @version :: issue npm outdated :: issue npm update :: issue npm view <private-packag ...

When querying for a specific document in mongoose using findById,

I am currently working on a task management application where I have encountered an issue. When trying to move a task from the to-do list to the done list, the methods "columnId" and "findById" are returning null values. Can you offer any insight into wh ...

What are the steps to switch multiple CSS styles for creating a dark mode?

I'm currently using a combination of HTML, CSS, and JavaScript to construct my website. One feature I'd like to implement is a Darkmode switch button that toggles between Dark and Light mode when clicked. However, the issue I'm facing is tha ...

Managing the clearance of an absolutely positioned div with CSS

I'm encountering an issue where my page contains divs that are 250px x 250px and positioned absolutely. When one of these divs is opened, an ajax call expands the div to display all its contents. These divs have a maximum width of 600px but can vary i ...

What could be the reason for my Express server returning a 404 error for all files other than index.html?

Currently, I am delving into Node.js with Express in order to set up a small server for educational purposes. Strangely, every request made to files linked within my index.html file, such as the .css, .js, and image files, results in a response code 404. ...

Looking to confirm client-side text in NodeJS?

As I work on constructing a to-do list, one challenge I am encountering is confirming that the correct task has been checked off. While considering using unique IDs for each individual task may seem like a solution, there is still the risk of users manipul ...

What is the best way to organize controls on my website?

My web page controls need to be organized in the specific layout below: Header Left Content - Main Content - Right Content Footer Is there a control available that can assist me with achieving this layout? I prefer not to use a table since it may not b ...

Issue encountering with flex-wrap to shift to the next row once reaching the 5th element

Recently, I've been experimenting with creating an image gallery using flexbox and incorporating a flex-basis transition to control the growth and shrinkage of elements upon hover. However, I'm encountering difficulties in adjusting the gallery t ...

Webpack resolve.alias is not properly identified by Typescript

In the Webpack configuration, I have set up the following: usersAlias: path.resolve(__dirname, '../src/pages/users'), In my tsconfig.json, you can find: "baseUrl": ".", "paths": { "usersAlias/*": ["src/pages/users/*"], } This is how the cod ...

I'm having trouble getting rid of this stubborn loader on the website

I am currently utilizing the following template: . My objective is to eliminate the preloader progress bar that displays the loading progress of the page in percentage. The files associated with this preloader are as follows: Loader CSS File - www[dot]the ...

Can you identify the language of this HTML include code snippet?

Recently, I came across some .html files that include tags in a different format: [% INCLUDE '/path/to/footer.html' %] This bracket-and-percent-sign tag is unfamiliar to me. Does anyone know what it is used for? ...

Troubleshooting jQuery click event listeners and AJAX requests: Issue with second listener not functioning properly

There are two click listeners implemented on a page, one for a sub-navigation menu (which dynamically changes the list items in the menu) and another for a main menu (which dynamically changes the content in another section). <nav class="sub-nav"> ...

use triple quotes for python variable declaration

I am looking to extract information from an HTML file that contains elements with the class name "link". My challenge is to read each line into a variable and then parse it, all while using triple quotation marks. How can I create a string variable that ad ...

Having trouble uploading images using ReactJS on the web platform

I am currently in the process of developing a portfolio website using react js, but I'm experiencing an issue where the image I intended to display is not showing up on the live site. Despite thoroughly checking my code, I can't seem to identify ...

Using JQuery to specify an attribute as "required" along with a value does not function as expected

Something seems off with this: $("#elementId").attr("required", "true"); In Chrome and Firefox, the DOM either displays required as the attribute (with no value) or required="" (empty value). Interestingly, it doesn't make a difference what value w ...