Comments (3)
how do you get the video? a camera recording, a file from the disc?
from form-data.
Without streaming, the entire video content needs to be loaded before it can be sent to the backend, which can cause performance issues for large files. You mentioned that you are trying to implement streaming using FormData on the client-side and Busboy on the server-side.
You also mentioned that you are using Browserify to generate a bundle of form_data.js, but you are encountering issues because the native FormData is already available and not the one from form-data. It seems like the native FormData does not support streaming from the client-side, such as arraybuffer or readablestream.
There are alternative libraries that you can use to achieve your goal of streaming large video files from the client-side to the server-side. One popular library is called axios, which supports streaming using axios.post() with a stream option. Another library is fetch, which also supports streaming using fetch(). You can use these libraries in conjunction with a streaming solution on the server-side, such as Busboy.
Here's an example of how you can use axios to stream a large video file from the client-side to the server-side:
`
// Client-side code
const axios = require('axios');
const file = document.getElementById('file-input').files[0];
axios.post('/upload', file, {
headers: {
'Content-Type': file.type,
'Content-Length': file.size
},
maxContentLength: Infinity,
maxBodyLength: Infinity,
stream: true // enable streaming
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
// Server-side code
const Busboy = require('busboy');
app.post('/upload', (req, res) => {
const busboy = new Busboy({ headers: req.headers });
busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
console.log(File ${fieldname} started streaming
);
file.on('data', (data) => {
// Handle file data
});
file.on('end', () => {
console.log(File ${fieldname} finished streaming
);
});
});
busboy.on('finish', () => {
console.log('Busboy finished parsing');
res.sendStatus(200);
});
req.pipe(busboy);
});
`
I using the axios.post() with the stream option to enable streaming, and Busboy on the server-side to handle the streaming. You can modify this code to suit your specific needs, such as adding error handling and progress tracking
from form-data.
On the client side you are uploading a file with raw bytes.
you have not encoded the file in any way such as it's in a multipart/form-data
(aka formdata)
So busboy will not be able to detect any such payload.
axios don't have any streaming functionality on the client side.
so setting stream: true
is pointless? so is setting a content-length and a content-type. why may you ask? b/c when you send a file with either xhr or fetch then it will automatically append content-length + content-type for you when you upload a file or a blob. it dose this for everything that you send, URLSearchParams, FormData, Blob, File, and even strings, TypedArrays and ArrayBuffer unless you explicity need to set custom content-type yourself, which you don't do.
So all you really need is:
const file = document.getElementById('file-input').files[0];
axios.post('/upload', file).then(sucfn, errfn)
but i would not even use axios...
it's better to use fetch instead.
const [file] = document.getElementById('file-input').files
const result = await fetch('/upload', { method: 'POST', body: file }).then(res => res.arrayBuffer())
No dependencies needed...
then the hole req will be the file's stream. so no need for serializer such as busboy is even needed.
app.post('/upload', (req, res) => {
req.pipe(dest)
})
oh... and fetch have streaming upload support now: https://docs.google.com/document/d/e/2PACX-1vQ26giyHPPhxrgVorNtkVSsJPOWecc6c6wHFLFbbl27r0BIBEgRwahh2b37Uk7HfXvZoW1Cu_ed-bRm/pub
from form-data.
Related Issues (20)
- Doesn't play nice with node v18 undici fetch HOT 3
- getHeaders should add content length if known HOT 1
- Passing Uint8Array or Buffer leads to "source.on is not a function" error under Node 18 HOT 1
- Final nail in the coffin HOT 1
- Is there a place to report security issues? HOT 2
- From Data HOT 1
- Is this Library Dead? HOT 2
- "form-data" is vulnerable to request tampering via a crafted filename HOT 1
- FormData is undefind
- FormData is undefind
- FormData class is confused with native FormData class in Chrome HOT 1
- Doesn't work well in node version 18 HOT 3
- any option to Read all the key and value from formdata HOT 1
- How to send an array of pdf files using form-data HOT 5
- How do I get upload progress when I submit??? HOT 1
- Mark package with sideEffects: false
- how to upload multiple files with fields at once with formdata
- Is it possible to cancel a fileupload?
- 【formData】“Error: Unexpected end of form” after multiple post file formdata, and then hang up after multiple error happening HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from form-data.