Handling File Uploads with React and Node: Performance Issues on Large Files
I've been banging my head against this for hours. I'm stuck trying to I'm having a hard time understanding I've been banging my head against this for hours... Currently developing a feature that allows users to upload files within a React application. My backend is set up with Node.js and Express, and while testing, I've noticed significant performance issues when uploading large files. The client insists on supporting files up to 100MB, and during my tests, uploads exceeding 20MB take noticeably longer than expected, often leading to timeouts. I've implemented a basic file upload using FormData and axios, but I'm uncertain if I'm handling the file stream efficiently. Here’s a snippet of the React component: ```javascript import React, { useState } from 'react'; import axios from 'axios'; const FileUpload = () => { const [file, setFile] = useState(null); const handleFileChange = (e) => { setFile(e.target.files[0]); }; const handleUpload = async () => { const formData = new FormData(); formData.append('file', file); try { const response = await axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); console.log(response.data); } catch (error) { console.error('Error uploading file:', error); } }; return ( <div> <input type="file" onChange={handleFileChange} /> <button onClick={handleUpload}>Upload</button> </div> ); }; export default FileUpload; ``` On the server side, I’m using `multer` for handling multipart/form-data. My setup looks like this: ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('file'), (req, res) => { res.send({ message: 'File uploaded successfully' }); }); app.listen(3000, () => { console.log('Server running on port 3000'); }); ``` While this works for smaller files, I suspect I might need to implement streaming instead of buffering the entire file in memory. I've seen some configurations involving `busboy` or `streaming` with `multer`, but I'm not sure how to adapt my current implementation. What strategies or configurations should I consider to improve performance and reduce timeouts? Are there specific libraries or middleware that would enhance the experience for users uploading large files, particularly in a React and Node environment? Any insights or examples would be greatly appreciated. This is part of a larger application I'm building. Any ideas what could be causing this? For context: I'm using Javascript on CentOS. Has anyone else encountered this? My team is using Javascript for this web app. Is there a better approach?