Hello, welcome to a practical guide for implementing the upload of multiple files along with metadata in modern applications using React on the frontend and Node.js with Express and Multer on the backend.
What you will build: a form that allows uploading up to 5 files in PDF, DOC, and DOCX formats, capturing text fields such as employmentType and salaryRange, and sending everything in a single request so the server processes both the files and the metadata.
Frontend with React: collect files and text data with React Hook Form and use FormData to combine both types of data. Create a FormData object and perform operations like formData.append(name, value) for simple fields and formData.append(files, file) for each selected file.
Practical tip: when adding arrays or objects to FormData, convert those values with JSON.stringify before appending so the backend can parse them correctly.
Preparing the files: in the file input, use the multiple attribute to allow several files and limit the selection on the client to accepted types PDF, DOC, DOCX. In the onChange handler, save the File objects in state and validate the number of files and the maximum size per file.
Sending from React: with Axios or React Query, you can upload the FormData indicating the multipart form data header. For example, from a React Query mutation, pass the FormData directly to the HTTP client and let the browser add the appropriate multipart form data header.
Backend with Node.js and Multer: use Multer to process multipart form data. Configure a temporary disk storage destination or use in-memory storage if you plan to upload the files to the cloud immediately.
Disk storage: create an upload folder if it does not exist and configure multer diskStorage with destination pointing to that folder and filename preserving or adapting the original name to avoid collisions.
File filter: implement a fileFilter function that only allows application/pdf and Word MIME types for DOC and DOCX. Reject other types by returning an error and protect your API against malicious or unexpected uploads.
Final Multer configuration: limit the maximum file size, for example to 5 megabytes, and restrict the number of files to 5 using array with the files field and limit 5. This ensures resource control and a better user experience.
Routes and controller: in the POST route, apply the Multer middleware, and in the controller, read the metadata from req.body and the files from req.files. Use JSON.parse on any field that comes stringified, such as arrays or objects, and validate the number of files on the server for additional security.
Example flow in the controller: extract fields like name, about, jobLocation, employmentType, salaryRange from req.body, parse admins, inviteAdmins, and twilioNumbers if they come as JSON strings, and process files from req.files as an array of Multer File objects.
Delete temporary files: if you use disk storage and then upload the files to a cloud service like AWS S3 or Azure Blob Storage, delete the local copies with fs.unlink to keep the server clean and optimize disk usage.
Deployment tips: if your project scales, consider processing files in memory or uploading directly to the cloud from the frontend using pre-signed URLs to reduce server load. Implement size limits and validations both on the client and server, and log events for auditing and debugging.
Advantages of this pattern: you handle structured metadata and multiple files in a single request, which simplifies interfaces, reduces server calls, and keeps business logic centralized. It is ideal for job posting forms, templates, resumes, and other use cases where documents and associated data are required.
About Q2BSTUDIO: we are Q2BSTUDIO, a company specialized in custom software development and custom applications. We offer comprehensive solutions that include artificial intelligence, cybersecurity, AWS and Azure cloud services, business intelligence services, and Power BI. We specialize in AI for businesses, AI agents, and custom developments that integrate AI models with secure and scalable business workflows.
Keywords and positioning: custom applications, custom software, artificial intelligence, cybersecurity, AWS and Azure cloud services, business intelligence services, AI for businesses, AI agents, Power BI. Integrate these capabilities with your forms and processing pipelines to offer robust and competitive solutions in the market.
Conclusion: with React and FormData on the frontend and Node.js Express with Multer on the backend, you can build a secure and efficient flow to upload multiple documents along with metadata. If you need support to design or implement this architecture, Q2BSTUDIO can help you from consulting to delivering the complete solution, including upload security, cloud management, and analysis with Power BI to extract value from your data.
If you want a concrete example or code adapted to your stack, contact Q2BSTUDIO to receive a personalized proposal and take your application to production with good security, scalability, and performance practices.
