uploading and deleting files using react filepond and firebase storage - reactjs

Question

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?