reactjs - react filepond と firebase storage を使用したファイルのアップロードと削除

Question

私はこれに慣れていません。そこで、ファイル ポンドを使用して Firebase ストレージにファイルをアップロードするこのサンプル コードを見つけました。ファイルをアップロードするときにうまく機能します。

import * as firebase from "firebase/app";
import "firebase/storage";
import shortid from "shortid";
import * as React from "react";
import { FilePond, registerPlugin } from "react-filepond";
import "filepond/dist/filepond.min.css";
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
import debug from "debug";

const log = debug("app:image");

registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

const storage = firebase.storage().ref();

export default function ImageUpload({
  onRequestSave,
  onRequestClear,
  defaultFiles = []
}) {
  const [files, setFiles] = React.useState(defaultFiles);
  const ref = React.useRef(null);

return (
    <FilePond
      files={files}
      ref={ref}
      allowMultiple={false}
      maxFiles={1}
      server={{
        process: (
          _fieldName,
          file,
          _metadata,
          load,
          error,
          progress,
          _abort
        ) => {
          const id = shortid.generate();
          const task = storage.child("images/" + id).put(file, {
            contentType: "image/jpeg"
          });

      task.on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        snap => {
          log("progress: %o", snap);
          progress(true, snap.bytesTransferred, snap.totalBytes);
        },
        err => {
          log("error: %o", err);
          error(err.message);
        },
        () => {
          log("DONE");
          load(id);
          //   onRequestSave(id);
        }
      );
    },
    load: (source, load, error, progress, abort) => {
      progress(true, 0, 1024);

      storage
        .child("images/" + source)
        .getDownloadURL()
        .then(url => {
          let xhr = new XMLHttpRequest();
          xhr.responseType = "blob";
          xhr.onload = function(event) {
            let blob = xhr.response;
            log("loaded URL: %s", url);
            load(blob);
          };
          xhr.open("GET", url);
          xhr.send();
        })
        .catch(err => {
          error(err.message);
          abort();
        });
    }
  }}
/>
  );
}

次の小道具を追加すると、:

instantUpload={false} 

その場合、FilePond は自動的にアップロードしません。しかし、私は3つの関数を書きたいです:

handleUpload、handleReadおよびhandleDelete:

ファイルを保存、表示、および削除します。誰かがそれを達成するために私を導くことができますか?