Installation

Install via NPM:

1npm install @bassem97/upup

Or via YARN:

1yarn add @bassem97/upup

Usage

1 - Inside you component or App.tsx import UpupUploader and the types you need :

1// imports
2import {
3    BaseConfigs,
4    CloudStorageConfigs,
5    GoogleConfigs,
6    OneDriveConfigs,
7    Is3Configs,
8    UploadAdapter,
9    UpupUploader,
10} from '@bassem97/upup'

2 - Set your configurations keys from your .env file ( ex: .env.local ) :

1const space_secret = process.env.SPACE_SECRET
2const space_key = process.env.SPACE_KEY
3const space_endpoint = process.env.SPACE_ENDPOINT
4const space_region = process.env.SPACE_REGION
5const document_space = process.env.SPACE_DOCUMENTS
6const image_space = process.env.SPACE_IMAGES
7const onedrive_client_id = process.env.ONEDRIVE_CLIENT_ID
8const google_client_id = process.env.GOOGLE_CLIENT_ID
9const google_app_id = process.env.GOOGLE_APP_ID
10const google_api_key = process.env.GOOGLE_API_KEY

3 - Create 2 states one for key (which will be the final link of you file. ex: 'https://example-documents.nyc3.cdn.digitaloceanspaces.com/file.pdf') and another for canUpload ( which will be changed after uploading file and submitting )

1const [key, setKey] = useState('')
2const [canUpload, setCanUpload] = useState(false)

4 - initialize the configs from the provider you want to use ( ex: DigitalOceanSpaces, GoogleDriveUploader, OneDriveUploader, S3 )

1const s3Configs: S3Configs = {
2    region: space_region,
3    endpoint: space_endpoint,
4    credentials: {
5        accessKeyId: space_key,
6        secretAccessKey: space_secret,
7    },
8}
9
10const baseConfigs: BaseConfigs = {
11    canUpload: canUpload,
12    setKey: setKey,
13}
14
15const cloudStorageConfigs: CloudStorageConfigs = {
16    bucket: document_space,
17    s3Configs,
18}
19
20const googleConfigs: GoogleConfigs = {
21    google_api_key,
22    google_app_id,
23    google_client_id,
24}
25
26const oneDriveConfigs: OneDriveConfigs = {
27    onedrive_client_id,
28    multiSelect: false,
29}

4 - Render the UpupUploader component and pass the configs and the adapter you want to use :

1return (
2    <div>
3        <UpupUploader
4            baseConfigs={baseConfigs}
5            cloudStorageConfigs={cloudStorageConfigs}
6            googleConfigs={googleConfigs}
7            oneDriveConfigs={oneDriveConfigs}
8            uploadAdapters={[
9                UploadAdapter.INTERNAL,
10                UploadAdapter.GOOGLE_DRIVE,
11                UploadAdapter.ONE_DRIVE,
12            ]}
13        />
14        <button onClick={() => setCanUpload(true)}> upload </button>
15    </div>
16)

5 - You can also use the UpupUploader component with the default configs and adapter :

1return (
2    <div>
3        <UpupUploader
4            baseConfigs={baseConfigs}
5            cloudStorageConfigs={cloudStorageConfigs}
6            uploadAdapters={[UploadAdapter.internal]}
7        />
8        <button onClick={() => setCanUpload(true)}> upload </button>
9    </div>
10)

All done! 🎉

Contributions

Contributions to this project are welcome! Feel free to submit issues or pull requests on the GitHub repository.