File Upload Handling: Secure and Scalable Uploads

File uploads require careful handling for security and scalability. This guide covers patterns for safe, efficient file processing.

Basic Upload with Multer#

import multer from 'multer';
import path from 'path';

// Configure storage
const storage = multer.diskStorage({
  destination: './uploads',
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + path.extname(file.originalname));
  },
});

// File filter
const fileFilter = (req, file, cb) => {
  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];

  if (allowedTypes.includes(file.mimetype)) {
    cb(null, true);
  } else {
    cb(new Error('Invalid file type'), false);
  }
};

const upload = multer({
  storage,
  fileFilter,
  limits: {
    fileSize: 5 * 1024 * 1024, // 5MB
    files: 5, // Max 5 files
  },
});

// Routes
app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ filename: req.file?.filename });
});

app.post('/upload-multiple', upload.array('files', 5), (req, res) => {
  res.json({ files: req.files?.map(f => f.filename) });
});

Upload to S3#

import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
import multer from 'multer';

const s3 = new S3Client({ region: process.env.AWS_REGION });

// Memory storage for S3 upload
const upload = multer({
  storage: multer.memoryStorage(),
  limits: { fileSize: 10 * 1024 * 1024 },
});

app.post('/upload', upload.single('file'), async (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: 'No file provided' });
  }

  const key = `uploads/${Date.now()}-${req.file.originalname}`;

  await s3.send(new PutObjectCommand({
    Bucket: process.env.S3_BUCKET,
    Key: key,
    Body: req.file.buffer,
    ContentType: req.file.mimetype,
  }));

  res.json({
    key,
    url: `https://${process.env.S3_BUCKET}.s3.amazonaws.com/${key}`,
  });
});

Presigned URLs for Direct Upload#

// Generate presigned URL for client-side upload
app.post('/upload/presign', async (req, res) => {
  const { filename, contentType } = req.body;

  const key = `uploads/${Date.now()}-${filename}`;

  const command = new PutObjectCommand({
    Bucket: process.env.S3_BUCKET,
    Key: key,
    ContentType: contentType,
  });

  const uploadUrl = await getSignedUrl(s3, command, { expiresIn: 3600 });

  res.json({
    uploadUrl,
    key,
    expiresIn: 3600,
  });
});

// Client-side direct upload
async function uploadFile(file: File) {
  // Get presigned URL
  const { uploadUrl, key } = await fetch('/upload/presign', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      filename: file.name,
      contentType: file.type,
    }),
  }).then(r => r.json());

  // Upload directly to S3
  await fetch(uploadUrl, {
    method: 'PUT',
    body: file,
    headers: { 'Content-Type': file.type },
  });

  return key;
}

File Validation#

import fileType from 'file-type';
import sharp from 'sharp';

async function validateImage(buffer: Buffer): Promise<void> {
  // Check magic bytes, not just extension
  const type = await fileType.fromBuffer(buffer);

  if (!type || !['image/jpeg', 'image/png', 'image/webp'].includes(type.mime)) {
    throw new Error('Invalid image type');
  }

  // Validate image dimensions
  const metadata = await sharp(buffer).metadata();

  if (!metadata.width || !metadata.height) {
    throw new Error('Invalid image');
  }

  if (metadata.width > 4096 || metadata.height > 4096) {
    throw new Error('Image too large (max 4096x4096)');
  }
}

// Virus scanning (using ClamAV)
import NodeClam from 'clamscan';

const clam = await new NodeClam().init({
  clamdscan: {
    host: 'localhost',
    port: 3310,
  },
});

async function scanFile(filePath: string): Promise<boolean> {
  const { isInfected } = await clam.scanFile(filePath);
  return !isInfected;
}

Image Processing#

import sharp from 'sharp';

async function processImage(buffer: Buffer): Promise<{
  original: Buffer;
  thumbnail: Buffer;
  medium: Buffer;
}> {
  const image = sharp(buffer);

  const [original, thumbnail, medium] = await Promise.all([
    // Optimize original
    image
      .clone()
      .webp({ quality: 85 })
      .toBuffer(),

    // Create thumbnail
    image
      .clone()
      .resize(150, 150, { fit: 'cover' })
      .webp({ quality: 80 })
      .toBuffer(),

    // Create medium size
    image
      .clone()
      .resize(800, 800, { fit: 'inside', withoutEnlargement: true })
      .webp({ quality: 85 })
      .toBuffer(),
  ]);

  return { original, thumbnail, medium };
}

app.post('/upload/image', upload.single('image'), async (req, res) => {
  const variants = await processImage(req.file.buffer);

  // Upload all variants
  const baseKey = `images/${Date.now()}`;

  await Promise.all([
    uploadToS3(`${baseKey}/original.webp`, variants.original),
    uploadToS3(`${baseKey}/thumbnail.webp`, variants.thumbnail),
    uploadToS3(`${baseKey}/medium.webp`, variants.medium),
  ]);

  res.json({
    original: `${baseKey}/original.webp`,
    thumbnail: `${baseKey}/thumbnail.webp`,
    medium: `${baseKey}/medium.webp`,
  });
});

Chunked Uploads#

// Initialize multipart upload
app.post('/upload/init', async (req, res) => {
  const { filename, contentType } = req.body;
  const key = `uploads/${Date.now()}-${filename}`;

  const { UploadId } = await s3.send(new CreateMultipartUploadCommand({
    Bucket: process.env.S3_BUCKET,
    Key: key,
    ContentType: contentType,
  }));

  res.json({ uploadId: UploadId, key });
});

// Upload chunk
app.post('/upload/chunk', async (req, res) => {
  const { uploadId, key, partNumber } = req.body;

  const command = new UploadPartCommand({
    Bucket: process.env.S3_BUCKET,
    Key: key,
    UploadId: uploadId,
    PartNumber: partNumber,
  });

  const presignedUrl = await getSignedUrl(s3, command, { expiresIn: 3600 });

  res.json({ presignedUrl });
});

// Complete upload
app.post('/upload/complete', async (req, res) => {
  const { uploadId, key, parts } = req.body;

  await s3.send(new CompleteMultipartUploadCommand({
    Bucket: process.env.S3_BUCKET,
    Key: key,
    UploadId: uploadId,
    MultipartUpload: { Parts: parts },
  }));

  res.json({ key });
});

Frontend Upload with Progress#

function FileUploader() {
  const [progress, setProgress] = useState(0);

  const uploadFile = async (file: File) => {
    const { uploadUrl, key } = await getPresignedUrl(file);

    await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();

      xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
          setProgress(Math.round((e.loaded / e.total) * 100));
        }
      });

      xhr.addEventListener('load', () => {
        if (xhr.status === 200) resolve(key);
        else reject(new Error('Upload failed'));
      });

      xhr.open('PUT', uploadUrl);
      xhr.setRequestHeader('Content-Type', file.type);
      xhr.send(file);
    });
  };

  return (
    <div>
      <input type="file" onChange={(e) => uploadFile(e.target.files[0])} />
      {progress > 0 && <ProgressBar value={progress} />}
    </div>
  );
}

Security Checklist#

✅ Validate file type by magic bytes, not extension
✅ Limit file size
✅ Generate random filenames
✅ Store files outside web root
✅ Scan for viruses
✅ Validate image dimensions
✅ Set proper content-type headers
✅ Use presigned URLs for direct upload

File uploads require validation, secure storage, and efficient processing. Use presigned URLs for large files, validate thoroughly before processing, and store files in object storage like S3 for scalability.