canner storage

Canner supports several Storages implementation for users to upload their files or images to the their storage.

Interface

The interface of a storage is quite simple:

type UploadResult = {link: string};
type UploadOptions = {
  filename: string
}
type ProgressEvent = {
  percent: number,
}
type OnProgressType = (e: ProgressEvent) => void;

interface Storage {
  upload(file: File, options: UploadOptions, onProgress: OnProgressType): Promise<UploadResult>
}

Working in Canner

There are two kinds of storages in Canner, they are imageStorage and fileStorage, their interfaces are some as above. User can declare their storages on the <root> tag.

const imageStorage = new ImgurStorage(...);
const fileStorage = new FirebaseStorage(...);
<root imageStorage={imageStorage} fileStorage={fileStorage}>
  // ...ignore
</root>

Every component in Canner gets the storages from this.props, so it can easy upload the file no matter where the user what to upload to, just call imageStorage.upload(...) or fileStorage.upload(...), check out the [source] (https://github.com/Canner/antd-canner-components/blob/canary/packages/antd-object-image/src/index.js#L113-L115) of image component.