|
| 1 | +import MuxUploader from "@mux/mux-uploader-react"; |
| 2 | +import { type ActionFunctionArgs, json, redirect } from "@remix-run/node"; |
| 3 | +import { Form, useActionData, useLoaderData } from "@remix-run/react"; |
| 4 | +import { useState } from "react"; |
| 5 | + |
| 6 | +import mux from "~/lib/mux.server"; |
| 7 | + |
| 8 | +export const loader = async () => { |
| 9 | + // Create an endpoint for MuxUploader to upload to |
| 10 | + const upload = await mux.video.uploads.create({ |
| 11 | + new_asset_settings: { |
| 12 | + playback_policy: ["public"], |
| 13 | + encoding_tier: "baseline", |
| 14 | + }, |
| 15 | + // in production, you'll want to change this origin to your-domain.com |
| 16 | + cors_origin: "*", |
| 17 | + }); |
| 18 | + return json({ id: upload.id, url: upload.url }); |
| 19 | +}; |
| 20 | + |
| 21 | +export const action = async ({ request }: ActionFunctionArgs) => { |
| 22 | + const formData = await request.formData(); |
| 23 | + const uploadId = formData.get("uploadId"); |
| 24 | + if (typeof uploadId !== "string") { |
| 25 | + throw new Error("No uploadId found"); |
| 26 | + } |
| 27 | + |
| 28 | + // when the upload is complete, |
| 29 | + // the upload will have an assetId associated with it |
| 30 | + // we'll use that assetId to view the video status |
| 31 | + const upload = await mux.video.uploads.retrieve(uploadId); |
| 32 | + if (upload.asset_id) { |
| 33 | + return redirect(`/status/${upload.asset_id}`); |
| 34 | + } |
| 35 | + |
| 36 | + // while onSuccess is a strong indicator that Mux has received the file |
| 37 | + // and created the asset, this isn't a guarantee. |
| 38 | + // In production, you might write an api route |
| 39 | + // to listen for the`video.upload.asset_created` webhook |
| 40 | + // https://docs.mux.com/guides/listen-for-webhooks |
| 41 | + // However, to keep things simple here, |
| 42 | + // we'll just ask the user to push the button again. |
| 43 | + // This should rarely happen. |
| 44 | + return json({ message: "Upload has no asset yet. Try again." }); |
| 45 | +}; |
| 46 | + |
| 47 | +export default function UploadPage() { |
| 48 | + const loaderData = useLoaderData<typeof loader>(); |
| 49 | + const actionData = useActionData<typeof action>(); |
| 50 | + const [isUploadSuccess, setIsUploadSuccess] = useState(false); |
| 51 | + |
| 52 | + const { id, url } = loaderData; |
| 53 | + const { message } = actionData ?? {}; |
| 54 | + |
| 55 | + return ( |
| 56 | + <Form method="post"> |
| 57 | + <MuxUploader endpoint={url} onSuccess={() => setIsUploadSuccess(true)} /> |
| 58 | + <input type="hidden" name="uploadId" value={id} /> |
| 59 | + {/* |
| 60 | + you might have other fields here, like name and description, |
| 61 | + that you'll save in your CMS alongside the uploadId and assetId |
| 62 | + */} |
| 63 | + <button |
| 64 | + type="submit" |
| 65 | + disabled={!isUploadSuccess} |
| 66 | + > |
| 67 | + {isUploadSuccess ? "Watch video" : "Waiting for upload..."} |
| 68 | + </button> |
| 69 | + {message ? <p>{message}</p> : null} |
| 70 | + </Form> |
| 71 | + ); |
| 72 | +} |
0 commit comments