Skip to content

Commit 9db8ade

Browse files
brookslybrandMichaelDeBoey
authored andcommitted
docs: update file upload and server component documentation to use @remix-run packages
1 parent 59522ba commit 9db8ade

File tree

2 files changed

+14
-15
lines changed

2 files changed

+14
-15
lines changed

docs/how-to/file-uploads.md

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ title: File Uploads
99
<br/>
1010
<br/>
1111

12-
Handle file uploads in your React Router applications. This guide uses some packages from the [Remix The Web][remix-the-web] project to make file uploads easier.
13-
1412
_Thank you to David Adams for [writing an original guide](https://programmingarehard.com/2024/09/06/remix-file-uploads-updated.html/) on which this doc is based. You can refer to it for even more examples._
1513

1614
## Basic File Upload
@@ -38,7 +36,7 @@ export default [
3836
`form-data-parser` is a wrapper around `request.formData()` that provides streaming support for handling file uploads.
3937

4038
```shellscript
41-
npm i @mjackson/form-data-parser
39+
npm i @remix-run/form-data-parser
4240
```
4341

4442
[See the `form-data-parser` docs for more information][form-data-parser]
@@ -57,11 +55,13 @@ You must set the form's `enctype` to `multipart/form-data` for file uploads to w
5755
import {
5856
type FileUpload,
5957
parseFormData,
60-
} from "@mjackson/form-data-parser";
58+
} from "@remix-run/form-data-parser";
59+
60+
import type { Route } from "./+types/user-profile";
6161

6262
export async function action({
6363
request,
64-
}: ActionFunctionArgs) {
64+
}: Route.ActionArgs) {
6565
const uploadHandler = async (fileUpload: FileUpload) => {
6666
if (fileUpload.fieldName === "avatar") {
6767
// process the upload and return a File
@@ -93,7 +93,7 @@ export default function Component() {
9393
`file-storage` is a key/value interface for storing [File objects][file] in JavaScript. Similar to how `localStorage` allows you to store key/value pairs of strings in the browser, file-storage allows you to store key/value pairs of files on the server.
9494

9595
```shellscript
96-
npm i @mjackson/file-storage
96+
npm i @remix-run/file-storage
9797
```
9898

9999
[See the `file-storage` docs for more information][file-storage]
@@ -103,7 +103,7 @@ npm i @mjackson/file-storage
103103
Create a file that exports a `LocalFileStorage` instance to be used by different routes.
104104

105105
```ts filename=avatar-storage.server.ts
106-
import { LocalFileStorage } from "@mjackson/file-storage/local";
106+
import { LocalFileStorage } from "@remix-run/file-storage/local";
107107

108108
export const fileStorage = new LocalFileStorage(
109109
"./uploads/avatars",
@@ -122,7 +122,7 @@ Update the form's `action` to store files in the `fileStorage` instance.
122122
import {
123123
type FileUpload,
124124
parseFormData,
125-
} from "@mjackson/form-data-parser";
125+
} from "@remix-run/form-data-parser";
126126
import {
127127
fileStorage,
128128
getStorageKey,
@@ -212,8 +212,7 @@ export async function loader({ params }: Route.LoaderArgs) {
212212
}
213213
```
214214

215-
[remix-the-web]: https://github.com/mjackson/remix-the-web
216-
[form-data-parser]: https://github.com/mjackson/remix-the-web/tree/main/packages/form-data-parser
217-
[file-storage]: https://github.com/mjackson/remix-the-web/tree/main/packages/file-storage
215+
[form-data-parser]: https://www.npmjs.com/package/@remix-run/form-data-parser
216+
[file-storage]: https://www.npmjs.com/package/@remix-run/file-storage
218217
[file]: https://developer.mozilla.org/en-US/docs/Web/API/File
219218
[resource-route]: ../how-to/resource-routes

docs/how-to/react-server-components.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ The following naming conventions have been chosen for familiarity and simplicity
256256

257257
See the relevant bundler documentation below for specific code examples for each of the following entry points.
258258

259-
These examples all use [express][express] and [@mjackson/node-fetch-server][node-fetch-server] for the server and request handling.
259+
These examples all use [express][express] and [@remix-run/node-fetch-server][node-fetch-server] for the server and request handling.
260260

261261
**Routes**
262262

@@ -332,7 +332,7 @@ To configure Parcel, add the following to your `package.json`:
332332
"source": "src/entry.rsc.tsx",
333333
"scopeHoist": false,
334334
"includeNodeModules": {
335-
"@mjackson/node-fetch-server": false,
335+
"@remix-run/node-fetch-server": false,
336336
"compression": false,
337337
"express": false
338338
}
@@ -425,7 +425,7 @@ export async function generateHTML(
425425
The following is a simplified example of a Parcel RSC Server.
426426

427427
```tsx filename=src/entry.rsc.tsx
428-
import { createRequestListener } from "@mjackson/node-fetch-server";
428+
import { createRequestListener } from "@remix-run/node-fetch-server";
429429
import express from "express";
430430
import { unstable_matchRSCServerRequest as matchRSCServerRequest } from "react-router";
431431
import {
@@ -781,6 +781,6 @@ createFromReadableStream<RSCServerPayload>(
781781
[get-rsc-stream]: ../api/rsc/getRSCStream
782782
[rsc-hydrated-router]: ../api/rsc/RSCHydratedRouter
783783
[express]: https://expressjs.com/
784-
[node-fetch-server]: https://github.com/mjackson/remix-the-web/tree/main/packages/node-fetch-server
784+
[node-fetch-server]: https://www.npmjs.com/package/@remix-run/node-fetch-server
785785
[parcel-rsc-template]: https://github.com/remix-run/react-router-templates/tree/main/unstable_rsc-parcel
786786
[vite-rsc-template]: https://github.com/remix-run/react-router-templates/tree/main/unstable_rsc-vite

0 commit comments

Comments
 (0)