fix: upload handler issue related to new react-router api#2194
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
There was a problem hiding this comment.
Pull request overview
This PR fixes an upload handler issue related to changes in the React Router API's file upload handling. The new React Router version (via @remix-run/form-data-parser) changed the structure of the upload handler parameter, which previously provided destructured file, type, and name properties, but now provides a different object shape that needs to be normalized.
Key changes:
- Added import for Node.js
Readablestream to handle stream conversions - Refactored
parseFileFormDataupload handler to handle multiple possible API shapes from the form parser - Added
normalizeToAsyncIterablefunction to convert various file formats (Blob, Buffer, Readable streams, async iterables) into a consistent AsyncIterable format that Sharp can process - Refactored anonymous generator function in
uploadImageFromUrlto a named function for consistency
Reviewed changes
Copilot reviewed 1 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| package-lock.json | Routine dependency updates including Vue, lodash types, msw, and various other packages |
| app/utils/storage.server.ts | Fixed upload handler to support new React Router API by normalizing file upload parameter shapes and converting to AsyncIterable format |
Comments suppressed due to low confidence (1)
app/utils/storage.server.ts:272
- Corrected spelling of 'Supoabase' to 'Supabase'.
* Logs an error that occurred during image upload to Supoabase
| async function normalizeToAsyncIterable( | ||
| file: | ||
| | AsyncIterable<Uint8Array> | ||
| | Readable | ||
| | Buffer | ||
| | Blob | ||
| | { stream?: () => any; arrayBuffer?: () => Promise<ArrayBuffer> } | ||
| | null | ||
| | undefined | ||
| ): Promise<AsyncIterable<Uint8Array> | null> { |
There was a problem hiding this comment.
The function parameter type includes { stream?: () => any; arrayBuffer?: () => Promise<ArrayBuffer> } but the JSDoc comment only mentions Blob, File, Buffer, Node streams, and async iterables. Consider updating the JSDoc to explicitly mention this object shape or clarifying what it represents (likely the undici File polyfill mentioned in line 321).
No description provided.