app/components/admin/media-upload-actions.tsx

Functions

Imports

It imports app/components/admin/media-drop-anywhere.tsx, app/components/admin/overflow-menu.tsx, app/lib/media/upload-contract.mjs. Imported by app/routes/admin.media._index.tsx.

Source

1import { useRef } from "react";
2import { Form } from "react-router";
3
4import { DropAnywhere } from "~/components/admin/media-drop-anywhere";
5import { OverflowMenu } from "~/components/admin/overflow-menu";
6import { ACCEPT_ATTRIBUTE, UPLOAD_FORM_INTENT } from "~/lib/media/upload-contract.mjs";
7
8/** The upload form: one file, loaded by browsing or by dropping anywhere on the page. */
9export function MediaUploadForm() {
10  const fileRef = useRef<HTMLInputElement>(null);
11
12  return (
13      <>
14      {/* The hidden `intent` alone selects the upload redirect branch. Images only. */}
15      <Form
16        method="post"
17        action="/admin/media/upload"
18        encType="multipart/form-data"
19        className="app-actions"
20      >
21        <label className="cap-field-label" htmlFor="media-file">
22          Drop files anywhere, or browse
23        </label>
24        <input
25          ref={fileRef}
26          id="media-file"
27          className="cap-input"
28          type="file"
29          name="file"
30          accept={ACCEPT_ATTRIBUTE}
31        />
32        <button
33          type="submit"
34          name="intent"
35          value={UPLOAD_FORM_INTENT}
36          className="cap-btn"
37          data-variant="primary"
38        >
39          Upload
40        </button>
41        <DropAnywhere inputRef={fileRef} />
42      </Form>
43      </>
44  );
45}
46
47/** The maintenance menu, in the page head. */
48export function MediaMaintenance() {
49  return (
50    <>
51      <OverflowMenu label="Maintenance">
52        <Form method="post">
53          <button type="submit" name="intent" value="rebuild" className="cap-option" data-menu-item>
54            <span className="cap-option-label">Rebuild media index</span>
55            <span className="cap-option-hint">
56              Re-derive every row from R2 and the repo, preserving alt and captions
57            </span>
58          </button>
59        </Form>
60      </OverflowMenu>
61    </>
62  );
63}