aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-05 23:44:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: preview files comps, d&d component, uploading state tracking

Browse Source
This commit is contained in:
MTG2000
2022-08-25 15:57:59 +03:00
committed by Dolu
parent ebee3612dd
commit dbf391deff
8 changed files with 575 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
package-lock.json generated
View File

@@ -17,6 +17,10 @@
"@reduxjs/toolkit": "^1.8.1",
"@remirror/pm": "^1.0.16",
"@remirror/react": "^1.0.34",
"@rpldy/upload-button": "^1.0.1",
"@rpldy/upload-drop-zone": "^1.0.1",
"@rpldy/upload-preview": "^1.0.1",
"@rpldy/uploady": "^1.0.1",
"@shopify/react-web-worker": "^5.0.1",
"@szhsin/react-menu": "^3.0.2",
"@testing-library/jest-dom": "^5.16.4",
@@ -6937,6 +6941,156 @@
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
},
"node_modules/@rpldy/life-events": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/life-events/-/life-events-1.0.1.tgz",
"integrity": "sha512-z9b8Yi1jq4/Um0BQJVsKwwBps8jB+X6UMJXU3dG7Q4rHe7rIiAQw4fCjN5W3L4b9JF9jTs9yX+X7ouWvBLkPVw==",
"dependencies": {
"@rpldy/shared": "^1.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
}
},
"node_modules/@rpldy/sender": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/sender/-/sender-1.0.1.tgz",
"integrity": "sha512-5lGB2uPP22xESYhXdqzKKqZTtS03e0Gi9xx+1mu3XLEpUH7uu55dUMa8CT1cOzLM94JWwaS3fEQG+yB3n9Q7HQ==",
"dependencies": {
"@rpldy/shared": "^1.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
}
},
"node_modules/@rpldy/shared": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/shared/-/shared-1.0.1.tgz",
"integrity": "sha512-22R1ZI+J4vvD6JhHlevxYwn6PxSZ2eXmP1mHxkW/7MHgTWgcKD2xBhl2khfjub64rqnhhiU1KDumhAWEO3GoAw==",
"dependencies": {
"invariant": "^2.2.4",
"just-throttle": "^1.1.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
}
},
"node_modules/@rpldy/shared-ui": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/shared-ui/-/shared-ui-1.0.1.tgz",
"integrity": "sha512-pEKKifp4srk8vWyV7TAmpMRz5Dx66YcjOggP40ZZ7TV+CQfjY+b8TY1zx48ptakHqdpbG6Qzz0+OaA+VrOd3mA==",
"dependencies": {
"@rpldy/shared": "^1.0.1",
"@rpldy/uploader": "^1.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@rpldy/simple-state": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/simple-state/-/simple-state-1.0.1.tgz",
"integrity": "sha512-ku/WBl2RFCqMORGEL9/qklMTVN92mqaLbQAY7JtS+IhpG3hfIzwMEXh1eVAs8bpSU2nrsp2SeR1ykyxU8aFWiw==",
"dependencies": {
"@rpldy/shared": "^1.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
}
},
"node_modules/@rpldy/upload-button": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/upload-button/-/upload-button-1.0.1.tgz",
"integrity": "sha512-HuJuWlI9xljD7rQAmL5kEf40sOLZs8KF4VQCaj0y8+ErnEblmvjh/pSuRp+QgXVPT5NYrCq2YXSqOK9UYTBdsA==",
"dependencies": {
"@rpldy/shared-ui": "^1.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@rpldy/upload-drop-zone": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/upload-drop-zone/-/upload-drop-zone-1.0.1.tgz",
"integrity": "sha512-B6fhOuIrzCQhHKal+hoGkiubEVxjzFPja9RoYd5dOtaZ7aMwmTX5dtFgVyaL1hjit7H0npHkD6v27b4K6snCXw==",
"dependencies": {
"@rpldy/shared-ui": "^1.0.1",
"html-dir-content": "^0.3.2"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@rpldy/upload-preview": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/upload-preview/-/upload-preview-1.0.1.tgz",
"integrity": "sha512-Cq4+9fdgV2VRG4MsD9gnQ6AdRC4hMgPM4o88Iq7ifS5cDKNZa3hPVauSN39VpcoOZca1rDrdVslp9eStqmDTBg==",
"dependencies": {
"@rpldy/shared": "^1.0.1",
"@rpldy/shared-ui": "^1.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@rpldy/uploader": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/uploader/-/uploader-1.0.1.tgz",
"integrity": "sha512-QuFvKu/xdCtiQU8Szx/pH/3MIJvnTMtDlmN5P62GuHrgUJw9SypZCCv4hCLuq1LuHs7ZENplToPjvj3pscYFdA==",
"dependencies": {
"@rpldy/life-events": "^1.0.1",
"@rpldy/sender": "^1.0.1",
"@rpldy/shared": "^1.0.1",
"@rpldy/simple-state": "^1.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
}
},
"node_modules/@rpldy/uploady": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/uploady/-/uploady-1.0.1.tgz",
"integrity": "sha512-dwyNdYVy/wtioFfMUDsuAuHKKMi2/zMzKaiuOFGgPpx+3a9cVnbORNW/RcAMO6fVYLQgS4VxnqNSdnjS2m6buw==",
"dependencies": {
"@rpldy/life-events": "^1.0.1",
"@rpldy/shared": "^1.0.1",
"@rpldy/shared-ui": "^1.0.1",
"@rpldy/uploader": "^1.0.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-uploady"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@rushstack/eslint-patch": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
@@ -27165,6 +27319,11 @@
"safe-buffer": "~5.1.0"
}
},
"node_modules/html-dir-content": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/html-dir-content/-/html-dir-content-0.3.2.tgz",
"integrity": "sha512-a1EJZbvBGmmFwk9VxFhEgaHkyXUXKTkw0jr0FCvXKCqgzO1H0wbFQbbzRA6FhR3twxAyjqVc80bzGHEmKrYsSw=="
},
"node_modules/html-encoding-sniffer": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -27779,7 +27938,6 @@
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"dev": true,
"dependencies": {
"loose-envify": "^1.0.0"
}
@@ -30938,6 +31096,11 @@
"node": ">=8"
}
},
"node_modules/just-throttle": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/just-throttle/-/just-throttle-1.1.0.tgz",
"integrity": "sha512-iePC/13XYX1Tyn9C6jY+DG3UEejkDvrKsw5xxgGhtGUwYWmoJm4CoKexscBKELOu3FTyCDzjr21ZJ67AXnz+bg=="
},
"node_modules/jwa": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
@@ -75915,6 +76078,96 @@
}
}
},
"@rpldy/life-events": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/life-events/-/life-events-1.0.1.tgz",
"integrity": "sha512-z9b8Yi1jq4/Um0BQJVsKwwBps8jB+X6UMJXU3dG7Q4rHe7rIiAQw4fCjN5W3L4b9JF9jTs9yX+X7ouWvBLkPVw==",
"requires": {
"@rpldy/shared": "^1.0.1"
}
},
"@rpldy/sender": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/sender/-/sender-1.0.1.tgz",
"integrity": "sha512-5lGB2uPP22xESYhXdqzKKqZTtS03e0Gi9xx+1mu3XLEpUH7uu55dUMa8CT1cOzLM94JWwaS3fEQG+yB3n9Q7HQ==",
"requires": {
"@rpldy/shared": "^1.0.1"
}
},
"@rpldy/shared": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/shared/-/shared-1.0.1.tgz",
"integrity": "sha512-22R1ZI+J4vvD6JhHlevxYwn6PxSZ2eXmP1mHxkW/7MHgTWgcKD2xBhl2khfjub64rqnhhiU1KDumhAWEO3GoAw==",
"requires": {
"invariant": "^2.2.4",
"just-throttle": "^1.1.0"
}
},
"@rpldy/shared-ui": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/shared-ui/-/shared-ui-1.0.1.tgz",
"integrity": "sha512-pEKKifp4srk8vWyV7TAmpMRz5Dx66YcjOggP40ZZ7TV+CQfjY+b8TY1zx48ptakHqdpbG6Qzz0+OaA+VrOd3mA==",
"requires": {
"@rpldy/shared": "^1.0.1",
"@rpldy/uploader": "^1.0.1"
}
},
"@rpldy/simple-state": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/simple-state/-/simple-state-1.0.1.tgz",
"integrity": "sha512-ku/WBl2RFCqMORGEL9/qklMTVN92mqaLbQAY7JtS+IhpG3hfIzwMEXh1eVAs8bpSU2nrsp2SeR1ykyxU8aFWiw==",
"requires": {
"@rpldy/shared": "^1.0.1"
}
},
"@rpldy/upload-button": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/upload-button/-/upload-button-1.0.1.tgz",
"integrity": "sha512-HuJuWlI9xljD7rQAmL5kEf40sOLZs8KF4VQCaj0y8+ErnEblmvjh/pSuRp+QgXVPT5NYrCq2YXSqOK9UYTBdsA==",
"requires": {
"@rpldy/shared-ui": "^1.0.1"
}
},
"@rpldy/upload-drop-zone": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/upload-drop-zone/-/upload-drop-zone-1.0.1.tgz",
"integrity": "sha512-B6fhOuIrzCQhHKal+hoGkiubEVxjzFPja9RoYd5dOtaZ7aMwmTX5dtFgVyaL1hjit7H0npHkD6v27b4K6snCXw==",
"requires": {
"@rpldy/shared-ui": "^1.0.1",
"html-dir-content": "^0.3.2"
}
},
"@rpldy/upload-preview": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/upload-preview/-/upload-preview-1.0.1.tgz",
"integrity": "sha512-Cq4+9fdgV2VRG4MsD9gnQ6AdRC4hMgPM4o88Iq7ifS5cDKNZa3hPVauSN39VpcoOZca1rDrdVslp9eStqmDTBg==",
"requires": {
"@rpldy/shared": "^1.0.1",
"@rpldy/shared-ui": "^1.0.1"
}
},
"@rpldy/uploader": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/uploader/-/uploader-1.0.1.tgz",
"integrity": "sha512-QuFvKu/xdCtiQU8Szx/pH/3MIJvnTMtDlmN5P62GuHrgUJw9SypZCCv4hCLuq1LuHs7ZENplToPjvj3pscYFdA==",
"requires": {
"@rpldy/life-events": "^1.0.1",
"@rpldy/sender": "^1.0.1",
"@rpldy/shared": "^1.0.1",
"@rpldy/simple-state": "^1.0.1"
}
},
"@rpldy/uploady": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@rpldy/uploady/-/uploady-1.0.1.tgz",
"integrity": "sha512-dwyNdYVy/wtioFfMUDsuAuHKKMi2/zMzKaiuOFGgPpx+3a9cVnbORNW/RcAMO6fVYLQgS4VxnqNSdnjS2m6buw==",
"requires": {
"@rpldy/life-events": "^1.0.1",
"@rpldy/shared": "^1.0.1",
"@rpldy/shared-ui": "^1.0.1",
"@rpldy/uploader": "^1.0.1"
}
},
"@rushstack/eslint-patch": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
@@ -91882,6 +92135,11 @@
}
}
},
"html-dir-content": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/html-dir-content/-/html-dir-content-0.3.2.tgz",
"integrity": "sha512-a1EJZbvBGmmFwk9VxFhEgaHkyXUXKTkw0jr0FCvXKCqgzO1H0wbFQbbzRA6FhR3twxAyjqVc80bzGHEmKrYsSw=="
},
"html-encoding-sniffer": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -92331,7 +92589,6 @@
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
"dev": true,
"requires": {
"loose-envify": "^1.0.0"
}
@@ -94625,6 +94882,11 @@
"integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
"dev": true
},
"just-throttle": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/just-throttle/-/just-throttle-1.1.0.tgz",
"integrity": "sha512-iePC/13XYX1Tyn9C6jY+DG3UEejkDvrKsw5xxgGhtGUwYWmoJm4CoKexscBKELOu3FTyCDzjr21ZJ67AXnz+bg=="
},
"jwa": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",

4
package.json
View File

@@ -12,6 +12,10 @@
"@reduxjs/toolkit": "^1.8.1",
"@remirror/pm": "^1.0.16",
"@remirror/react": "^1.0.34",
"@rpldy/upload-button": "^1.0.1",
"@rpldy/upload-drop-zone": "^1.0.1",
"@rpldy/upload-preview": "^1.0.1",
"@rpldy/uploady": "^1.0.1",
"@shopify/react-web-worker": "^5.0.1",
"@szhsin/react-menu": "^3.0.2",
"@testing-library/jest-dom": "^5.16.4",

16
src/Components/Inputs/FileUploadInput/FileUploadInput.stories.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react';
import FileUploadInput from './FileUploadInput';
export default {
title: 'Shared/Inputs/File Upload Input',
component: FileUploadInput,
} as ComponentMeta<typeof FileUploadInput>;
const Template: ComponentStory<typeof FileUploadInput> = (args) => <FileUploadInput {...args} />
export const DefaultButton = Template.bind({});
DefaultButton.args = {
}

142
src/Components/Inputs/FileUploadInput/FileUploadInput.tsx Normal file
View File

@@ -0,0 +1,142 @@
import Uploady, { useUploady, useRequestPreSend, UPLOADER_EVENTS } from "@rpldy/uploady";
import { asUploadButton } from "@rpldy/upload-button";
import Button from "src/Components/Button/Button";
import { fetchUploadUrl } from "./fetch-upload-img-url";
import ImagePreviews from "./ImagePreviews";
import { FaImage } from "react-icons/fa";
import UploadDropZone from "@rpldy/upload-drop-zone";
import { forwardRef, useCallback } from "react";
import styles from './styles.module.scss'
import { MdFileUpload } from "react-icons/md";
import { AiOutlineCloudUpload } from "react-icons/ai";
import { motion } from "framer-motion";
interface Props {
url: string;
}
const UploadBtn = asUploadButton((props: any) => {
useRequestPreSend(async (data) => {
const filename = data.items?.[0].file.name ?? ''
const url = await fetchUploadUrl({ filename });
return {
options: {
destination: {
url
}
}
}
})
// const handleClick = async () => {
// // Make a request to get the url
// try {
// var bodyFormData = new FormData();
// bodyFormData.append('requireSignedURLs', "false");
// const res = await axios({
// url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload',
// method: 'POST',
// data: bodyFormData,
// headers: {
// "Authorization": "Bearer Xx2-CdsTliYkq6Ayz-1GX4CZubdQVxMwOSDbajP0",
// }
// })
// uploady.upload(res.data.result.uploadUrl, {
// destination: res.data.result.uploadUrl
// })
// } catch (error) {
// console.log(error);
// }
// // make the request with the files
// // uploady.upload()
// }
return <Button {...props} color='primary'>
Upload Image <FaImage className="ml-8 scale-125 align-middle" />
</Button>
});
const DropZone = forwardRef<any, any>((props, ref) => {
const { onClick, ...buttonProps } = props;
useRequestPreSend(async (data) => {
const filename = data.items?.[0].file.name ?? ''
const url = await fetchUploadUrl({ filename });
return {
options: {
destination: {
url
}
}
}
})
const onZoneClick = useCallback(
(e: any) => {
if (onClick) {
onClick(e);
}
},
[onClick]
);
return <UploadDropZone
{...buttonProps}
ref={ref}
onDragOverClassName={styles.active}
extraProps={{ onClick: onZoneClick }}
className={`${styles.zone} border-2 w-full min-h-[200px] rounded-16 flex flex-col justify-center items-center text text-body3`}
>
<div className={`${styles.idle_content} text-gray-600`}>
Drop your files here or <button className="font-bold underline">click to browse</button>
</div>
<motion.div
animate={{
y: 5,
}}
transition={{
duration: .5,
repeat: Infinity,
repeatType: 'mirror'
}}
className={`${styles.active_content} text-white font-bold`}>
Drop it to upload <AiOutlineCloudUpload className="scale-150 text-body1 ml-16" />
</motion.div>
</UploadDropZone>
})
const DropZoneButton = asUploadButton(DropZone);
export default function FileUploadInput(props: Props) {
return (
<Uploady
multiple={true}
inputFieldName='file'
grouped={false}
listeners={{
[UPLOADER_EVENTS.ITEM_FINISH]: (item) => {
const { id, filename, variants } = item?.uploadResponse?.data?.result ?? {}
if (id) {
console.log(id, filename, variants);
}
}
}}
>
<DropZoneButton />
{/* <UploadBtn /> */}
<ImagePreviews />
</Uploady>
)
}

92
src/Components/Inputs/FileUploadInput/ImagePreviews.tsx Normal file
View File

@@ -0,0 +1,92 @@
import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview'
import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady';
import React, { useState } from 'react'
import { RotatingLines } from 'react-loader-spinner';
export default function ImagePreviews() {
return (
<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-16 mt-24">
<UploadPreview PreviewComponent={CustomImagePreview} rememberPreviousBatches />
</div>
)
}
function CustomImagePreview({ id, url }: PreviewComponentProps) {
const [progress, setProgress] = useState<number>(0);
const [itemState, setItemState] = useState<string>(STATES.PROGRESS);
useItemProgressListener(item => {
if (item.completed > progress) {
setProgress(() => item.completed);
if (item.completed === 100) {
setItemState(STATES.DONE)
} else {
setItemState(STATES.PROGRESS)
}
}
}, id);
useItemAbortListener(item => {
setItemState(STATES.CANCELLED);
}, id);
useItemCancelListener(item => {
setItemState(STATES.CANCELLED);
}, id);
useItemErrorListener(item => {
setItemState(STATES.ERROR);
}, id);
return <div className="aspect-video relative rounded-12 md:rounded-16 overflow-hidden border-2 border-gray-200">
<img src={url}
className={`
w-full h-full object-cover
${itemState === STATES.PROGRESS && 'opacity-50'}
`}
alt="" />
<div className="text-body5 absolute inset-0"
>
</div>
{itemState === STATES.PROGRESS &&
<div
className="absolute inset-0 bg-gray-400 bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
>
<RotatingLines
strokeColor="#fff"
strokeWidth="3"
animationDuration="0.75"
width="48"
visible={true}
/>
</div>}
{itemState === STATES.ERROR &&
<div className="absolute inset-0 bg-red-400 bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
Failed...
</div>}
{itemState === STATES.CANCELLED &&
<div className="absolute inset-0 bg-red-400 bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
Cancelled
</div>}
</div>;
};
const STATES = {
PROGRESS: "PROGRESS",
DONE: "DONE",
CANCELLED: "CANCELLED",
ERROR: "ERROR"
};
const STATE_COLORS = {
[STATES.PROGRESS]: "#f4e4a4",
[STATES.DONE]: "#a5f7b3",
[STATES.CANCELLED]: "#f7cdcd",
[STATES.ERROR]: "#ee4c4c"
};

25
src/Components/Inputs/FileUploadInput/fetch-upload-img-url.tsx Normal file
View File

@@ -0,0 +1,25 @@
import axios from "axios";
import { NotificationsService } from "src/services";
export async function fetchUploadUrl(options?: Partial<{ filename: string }>) {
const { filename } = options ?? {}
try {
const bodyFormData = new FormData();
bodyFormData.append('requireSignedURLs', "false");
const res = await axios({
url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload',
method: 'POST',
data: bodyFormData,
headers: {
"Authorization": "Bearer Xx2-CdsTliYkq6Ayz-1GX4CZubdQVxMwOSDbajP0",
}
})
return res.data.result.uploadURL as string;
} catch (error) {
console.log(error);
NotificationsService.error("A network error happened.")
return "couldnt fetch upload url";
}
}

25
src/Components/Inputs/FileUploadInput/styles.module.scss Normal file
View File

@@ -0,0 +1,25 @@
.zone {
background-color: #f2f4f7;
border-color: #e4e7ec;
.active_content {
display: none;
}
.idle_content {
display: block;
}
&.active {
background-color: #b3a0ff;
border-color: #9e88ff;
.active_content {
display: block;
}
.idle_content {
display: none;
}
}
}

7
src/utils/storybook/decorators.tsx
View File

@@ -18,6 +18,8 @@ import { ApolloProvider } from '@apollo/client';
import { apolloClient } from '../apollo';
import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
import ModalsContainer from 'src/Components/Modals/ModalsContainer/ModalsContainer';
import { ToastContainer } from 'react-toastify';
import { NotificationsService } from 'src/services';
// Enable the Mocks Service Worker
@@ -63,6 +65,11 @@ export const WrapperDecorator: DecoratorFn = (Story, options) => {
effect='solid'
delayShow={1000}
/>
<ToastContainer
{...NotificationsService.defaultOptions}
newestOnTop={false}
limit={2}
/>
</>
);
}