3

I am new into this. So i found this example code to upload files to firebase storage using file pond. It works great when uploading the file.

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();
        });
    }
  }}
/>
  );
}

If i add the following prop,:

instantUpload={false} 

then FilePond will not automatically upload. But I want to write three functions:

handleUpload, handleRead and handleDelete :

to save, view and delete files. Can someone guide me into achieving that?

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
user36043
  • 43
  • 2

0 Answers0