I am building a dynamic form in Next.js (App Router) where users can add multiple folders and upload files for each folder. Each folder section contains:

• A text input for the folder name

• A file input (multiple) for uploading o ne or more files

• The number of folder/file input groups is controlled dynamically
  using React state.

What the form currently does

Uses useState to dynamically add new folder + file input pairs

Collects all input values using the FormData API on submit

File inputs are generated dynamically based on the state array Problem

When I try to submit large files (videos / PDFs), the upload fails due to Next.js API request size limits (default ~10MB).

I understand that uploading large files through a Next.js API route is not recommended, but I’m unsure how to adapt this dynamic form to upload files directly to cloud storage.

Questions

1. What is the best practice to upload large files from a dynamic form in Next.js?
2. How can I upload files directly to Cloudinary / S3 / UploadThing instead of sending them through an API route?
3. How do I associate each uploaded file with its corresponding folder name, given that inputs are generated dynamically?
4. Should the form submit metadata only (folder names + uploaded file URLs)?

"use client";

import { useState } from "react";

export default function AddForm() {
  const [form, setForm] = useState([
    { folderName: "folder0", fileName: "file0" },
  ]);

  const addFolder = () => {
    setForm([
      ...form,
      {
        folderName: `folder${form.length}`,
        fileName: `file${form.length}`,
      },
    ]);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const target = e.currentTarget;
    const formData = new FormData(target);

    // Contains text inputs and File objects
    console.log([...formData.entries()]);
  };

  return (
    

      {form.map((value, index) => (
        

          

          
        
      ))}

      
        Add Folder
      

      
        Submit
      
    
  );
}