@ docflow/ react-活性存储器提供器

[注]
这是叉子 react-activestorage-provider,在TypeScript和现代React(支持回放18)中重写.

有关 uploads 包含已完成上传的数组,参见 变动情况。 。 。 .

除此之外,这个软件包还提取了 DirectUploadProvider 换入新钩子 useDirectUpload 用于跳过渲染函数。 余等同为相.

ActiveStorage是 Rails 5.2 的一个惊人的添加, 并且与往常一样, 这个组件旨在使它同样容易从React中被使用.

ActiveStorage Provider处理将文件直接上传到ActiveStorage服务,并将该文件附加到您的模型上. 它使用渲染道具模式来构建自己的上传部件.

安装

npm install --save @docflow/react-activestorage-provider

使用量

ActiveStorage Provider使得简单上传按钮容易被添加. 当你打电话 handleUpload 带有 FileList 或数组 Files,此组件创建 Blob 记录,将文件直接上传到您的存储服务,然后点击您的 Rails 控制器将 blob 附加到您的模型中. (如果你想自己处理附件,例如,提供其他属性, 见下一层 DirectUploadProvider. ) (中文(简体) )

import ActiveStorageProvider from "@docflow/react-activestorage-provider";

// ...

return (
  <ActiveStorageProvider
    endpoint={{
      path: "/profile",
      model: "User",
      attribute: "avatar",
      method: "PUT",
    }}
    onSubmit={(user) => this.setState({ avatar: user.avatar })}
    render={({ handleUpload, uploads, ready }) => (
      <div>
        <input
          type="file"
          disabled={!ready}
          onChange={(e) => handleUpload(e.currentTarget.files)}
        />

        {uploads.map((upload) => {
          switch (upload.state) {
            case "waiting":
              return (
                <p key={upload.id}>Waiting to upload {upload.file.name}</p>
              );
            case "uploading":
              return (
                <p key={upload.id}>
                  Uploading {upload.file.name}: {upload.progress}%
                </p>
              );
            case "error":
              return (
                <p key={upload.id}>
                  Error uploading {upload.file.name}: {upload.error}
                </p>
              );
            case "finished":
              return (
                <p key={upload.id}>Finished uploading {upload.file.name}</p>
              );
          }
        })}
      </div>
    )}
  />
);

ActiveStorageProvider 道具

这些是您配置 ActiveStorage Provider 的选项 .

RenderProps

这是调用您渲染函数的参数类型 .

export type RenderProps = {
  /** false while any file is uploading */
  ready: boolean;
  /** uploads in progress */
  uploads: ActiveStorageFileUpload[];
  /** call to initiate an upload */
  handleUpload: (files: FileList | File[]) => unknown;

  /* or, if you want more granular control... */

  /** call to set list of files to be uploaded */
  handleChooseFiles: (files: FileList | File[]) => unknown;
  /** begin the upload of the files in the list */
  handleBeginUpload: () => unknown;
};

export type CustomHeaders = Record<string, string>;

DirectUploadProvider

ActiveStorage Provider通过同时照顾上传和附加文件, 使得快速添加“上载”按钮变得简单, 如果你想处理第二步, 附加你的 Blob 记录到您的模型,你自己, 你可以使用低级 DirectUploadProvider它创建了blob记录,并将用户的文件直接上传到您的存储服务,然后用这些blobs的签名ID打给你。 之后,您可以根据需要创建或更新您的模型.

function PostForm() {
  function handleAttachment(signedIds) {
    const body = JSON.stringify({ post: { title: ..., images: signedIds }})
    fetch('/posts.json', { method: 'POST', body })
  }

  return (
    <DirectUploadProvider onSuccess={handleAttachment} render={...} />
  )
}

DirectUploadProvider 是名导出, 所以

import { DirectUploadProvider } from "@docflow/react-activestorage-provider";

并使用以下道具:

useDirectUpload

如果您想要使用 DirectUploadProvider 使用这个钩子。 它的道具都一样 DirectUploadProvider时,除 render,并返回与渲染函数接受为参数的同物.

import { useDirectUpload } from "@docflow/react-activestorage-provider";

function Uploader() {
  const { handleUpload } = useDirectUpload({
    onSuccess: (signedIds) => console.log(signedIds),
  });

  return (
    <input
      type="file"
      onChange={(e) => e.target.files && handleUpload(e.target.files)}
    />
  );
}