Node.js Upload Files

Last modified on: October 19, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="44a51938-6a08-4697-835c-cfb33175146f" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Node.js File Upload: A Comprehensive Guide</h3>
<p>Uploading files is a common requirement in web applications, and Node.js makes it straightforward to handle file uploads using various middleware. This guide will walk you through the steps to set up file uploading in a Node.js application using the popular <strong>Multer</strong> middleware.</p>
<hr />
<h3>What is Multer?</h3>
<p><strong>Multer</strong> is a middleware for Node.js that makes it easy to handle multipart/form-data, which is primarily used for uploading files. It stores the files on the server and provides access to the uploaded files in the request object.</p>
<hr />
<h3>Setting Up a Node.js Project</h3>
<p>To get started, you need to set up a Node.js project. Follow these steps:</p>
<ol>
<li>
<p><strong>Create a new directory for your project</strong>:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">bash</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary">
<pre class="language-javascript"><code>mkdir file-upload
cd file-upload</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Initialize a new Node.js project</strong>:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">bash</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary">
<pre class="language-javascript"><code>npm init -y</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Install necessary packages</strong>:</p>
<p>You will need to install Express and Multer. Run the following command:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">bash</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary">
<pre class="language-javascript"><code>npm install express multer</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<hr />
<h3>Creating the File Upload Server</h3>
<p>Next, create a simple server that can handle file uploads. Follow these steps:</p>
<ol>
<li>
<p><strong>Create a new file named <code>server.js</code></strong>:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">bash</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary">
<pre class="language-javascript"><code>touch server.js</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Open <code>server.js</code> and add the following code</strong>:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary">
<pre class="language-javascript"><code>const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// Set up storage using multer's diskStorage
const storage = multer.diskStorage({
    destination: (req, file, cb) =&gt; {
        cb(null, 'uploads/'); // Specify the folder to store uploaded files
    },
    filename: (req, file, cb) =&gt; {
        cb(null, Date.now() + path.extname(file.originalname)); // Append timestamp to filename
    }
});

// Initialize multer with the storage configuration
const upload = multer({ storage: storage });

// Create an uploads directory
const fs = require('fs');
const dir = './uploads';

if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);
}

// Set up a POST route to handle file uploads
app.post('/upload', upload.single('file'), (req, res) =&gt; {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    res.send(`File uploaded successfully: ${req.file.filename}`);
});

// Serve a simple HTML form for file upload
app.get('/', (req, res) =&gt; {
    res.send(`
        &lt;form action="/upload" method="post" enctype="multipart/form-data"&gt;
            &lt;input type="file" name="file" /&gt;
            &lt;button type="submit"&gt;Upload&lt;/button&gt;
        &lt;/form&gt;
    `);
});

// Start the server
app.listen(PORT, () =&gt; {
    console.log(`Server running on http://localhost:${PORT}`);
});</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Multer Configuration</strong>: We configure Multer to store uploaded files in a directory called <code>uploads/</code>. The <code>filename</code> function appends a timestamp to the original file name to ensure uniqueness.</li>
<li><strong>Directory Check</strong>: Before starting the server, we check if the <code>uploads/</code> directory exists; if not, we create it to store uploaded files.</li>
<li><strong>File Upload Route</strong>: The <code>/upload</code> route handles file uploads using the <code>upload.single('file')</code> middleware, where <code>'file'</code> corresponds to the name attribute in the HTML form.</li>
<li><strong>HTML Form</strong>: The root route serves a simple HTML form that allows users to select a file and upload it.</li>
</ul>
<hr />
<h3>Testing the File Upload</h3>
<ol>
<li>
<p><strong>Run the server</strong>:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">bash</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary">
<pre class="language-javascript"><code>node server.js</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>Open your web browser</strong> and navigate to <code>http://localhost:3000</code>. You should see the file upload form.</p>
</li>
<li>
<p><strong>Select a file</strong> and click the "Upload" button. If successful, you should see a message indicating that the file was uploaded successfully, and the file will be stored in the <code>uploads/</code> directory.</p>
</li>
</ol>
<hr />
<h3>Handling Multiple File Uploads</h3>
<p>If you want to allow users to upload multiple files at once, you can modify the upload route and the HTML form.</p>
<h4>Update the Server Code for Multiple Files</h4>
<p>Modify the existing <code>/upload</code> route:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary">
<pre class="language-javascript"><code>app.post('/upload', upload.array('files', 10), (req, res) =&gt; {
    if (!req.files || req.files.length === 0) {
        return res.status(400).send('No files uploaded.');
    }
    const filenames = req.files.map(file =&gt; file.filename);
    res.send(`Files uploaded successfully: ${filenames.join(', ')}`);
});</code></pre>
</div>
</div>
</div>
</div>
<h4>Update the HTML Form</h4>
<p>Modify the form to allow multiple file selection:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-main-surface-secondary px-2 font-sans text-xs text-token-text-secondary">
<pre class="language-javascript"><code>&lt;form action="/upload" method="post" enctype="multipart/form-data"&gt;
    &lt;input type="file" name="files" multiple /&gt;
    &lt;button type="submit"&gt;Upload&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Conclusion</h3>
<p>In this guide, we covered how to set up a basic file upload feature using Node.js and Multer. By following these steps, you can easily allow users to upload files to your application.</p>
<p>You learned about:</p>
<ul>
<li>Setting up an Express server.</li>
<li>Configuring Multer for file uploads.</li>
<li>Creating an HTML form for file input.</li>
<li>Handling single and multiple file uploads.</li>
</ul>
<p>With this knowledge, you can expand your Node.js applications to include robust file handling capabilities.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More