Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Flight] Fix File Upload in Node.js #26700

Merged
merged 2 commits into from
Apr 22, 2023
Merged

Conversation

sebmarkbage
Copy link
Collaborator

Use the Blob constructor + append with filename instead of File constructor. Node.js doesn't expose a global File constructor but does support it in this form.

Queue fields until we get the 'end' event from the previous file. We rely on previous files being available by the time a field is resolved. However, since the 'end' event in Readable is fired after two micro-tasks, these are not resolved in order.

I use a queue of the fields while we're still waiting on files to finish. This still doesn't resolve files and fields in order relative to each other but that doesn't matter for our usage.

…ructor

Node.js doesn't expose a global File constructor but does support it
in this form.
We rely on previous files being available by the time a field is resolved.
However, since the 'end' event in Readable is fired after two microtasks,
these are not resolved in order.

I use a queue of the fields while we're still waiting on files to finish.

This still doesn't resolve files and fields in order relative to each other
but that doesn't matter for our usage.
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Apr 22, 2023
@react-sizebot
Copy link

Comparing: 967d46c...8c12629

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 163.96 kB 163.96 kB = 51.67 kB 51.67 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 168.30 kB 168.30 kB = 52.93 kB 52.93 kB
facebook-www/ReactDOM-prod.classic.js = 567.77 kB 567.77 kB = 100.57 kB 100.57 kB
facebook-www/ReactDOM-prod.modern.js = 551.50 kB 551.50 kB = 97.90 kB 97.90 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.96% 86.58 kB 87.42 kB +1.31% 20.99 kB 21.26 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.96% 86.58 kB 87.42 kB +1.31% 20.99 kB 21.26 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.96% 86.58 kB 87.42 kB +1.31% 20.99 kB 21.26 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.94% 88.90 kB 89.73 kB +1.28% 21.66 kB 21.93 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.94% 88.90 kB 89.73 kB +1.28% 21.66 kB 21.93 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.94% 88.90 kB 89.73 kB +1.28% 21.66 kB 21.93 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js +0.59% 20.80 kB 20.93 kB +0.65% 7.49 kB 7.54 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js +0.59% 20.80 kB 20.93 kB +0.65% 7.49 kB 7.54 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js +0.59% 20.80 kB 20.93 kB +0.65% 7.49 kB 7.54 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js +0.57% 21.37 kB 21.49 kB +0.65% 7.68 kB 7.73 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js +0.57% 21.37 kB 21.49 kB +0.65% 7.68 kB 7.73 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js +0.57% 21.37 kB 21.49 kB +0.65% 7.68 kB 7.73 kB

Generated by 🚫 dangerJS against 8c12629

Copy link
Collaborator

@sophiebits sophiebits left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"fun"

resolveField(response, queuedFields[i], queuedFields[i + 1]);
}
queuedFields.length = 0;
}
});
});
busboyStream.on('finish', () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wait do we need to delay this close on pendingFiles too?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No because busboy has a similar built in queuing strategy to delay this call but not for fields.

@sebmarkbage sebmarkbage merged commit a21d147 into facebook:main Apr 22, 2023
@Jarred-Sumner
Copy link
Contributor

Jarred-Sumner commented Apr 26, 2023

Bun has the same constraints currently. No global File constructor, but FormData with append accepts file name

EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Use the Blob constructor + append with filename instead of File
constructor. Node.js doesn't expose a global File constructor but does
support it in this form.

Queue fields until we get the 'end' event from the previous file. We
rely on previous files being available by the time a field is resolved.
However, since the 'end' event in Readable is fired after two
micro-tasks, these are not resolved in order.

I use a queue of the fields while we're still waiting on files to
finish. This still doesn't resolve files and fields in order relative to
each other but that doesn't matter for our usage.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
Use the Blob constructor + append with filename instead of File
constructor. Node.js doesn't expose a global File constructor but does
support it in this form.

Queue fields until we get the 'end' event from the previous file. We
rely on previous files being available by the time a field is resolved.
However, since the 'end' event in Readable is fired after two
micro-tasks, these are not resolved in order.

I use a queue of the fields while we're still waiting on files to
finish. This still doesn't resolve files and fields in order relative to
each other but that doesn't matter for our usage.

DiffTrain build for commit a21d147.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants