@veritone-ce/design-system 1.2.3 → 1.3.0

package/dist/components/FileUploader/FileUploader.stories.d.ts

@@ -0,0 +1,15 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import FileUploader from '.';
+declare const _default: ComponentMeta<({ uploadUrl, files, accept, multiple, onSuccess, onError, extensions, ...props }: {
+    'data-testid'?: string | undefined;
+    accept?: import("react-dropzone").Accept | undefined;
+    multiple?: boolean | undefined;
+    chunking?: boolean | undefined;
+    uploadUrl?: string | undefined;
+    extensions?: string[] | undefined;
+    files?: ((v: File[]) => void) | undefined;
+    onError?: ((v: Error) => void) | undefined;
+    onSuccess?: ((v: boolean) => void) | undefined;
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof FileUploader> | Story;

package/dist/components/FileUploader/FileUploader.stories.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import FileUploader from '.';
+export default {
+    title: 'Components/FileUploader',
+    component: FileUploader,
+    argTypes: {
+        extensions: {
+            defaultValue: ['.pdf', '.format']
+        }
+    }
+};
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return _jsx(FileUploader, Object.assign({}, args));
+};

package/dist/components/FileUploader/__tests__/FileUploader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FileUploader/__tests__/FileUploader.test.js

@@ -0,0 +1,253 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { fireEvent, screen, act, waitFor } from '@testing-library/react';
+import * as axios from 'axios';
+// import * as uploadFile from '../useUploadFile'
+import FileUploader from '..';
+jest.mock('axios');
+const mockedAxios = axios;
+describe('<FileUploader />', () => {
+    it('should render the FileUploader component', () => {
+        render(_jsx(FileUploader, {}));
+        expect(screen.getByTestId('file-uploader')).toBeInTheDocument();
+    });
+    it('should simulate a drop a file without upload link', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(FileUploader, {}));
+        const dropzone = screen.getByTestId('dropzone');
+        const exampleFile = new File(['file'], 'image.png', {
+            type: 'image/png'
+        });
+        Object.defineProperty(dropzone, 'files', {
+            value: [exampleFile]
+        });
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            fireEvent.drop(dropzone);
+        }));
+    }));
+    it('should simulate a drop a file with upload link and upload error', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onError = jest.fn();
+        render(_jsx(FileUploader, { uploadUrl: "testing", onError: onError }));
+        const dropzone = screen.getByTestId('dropzone');
+        const exampleFile = new File(['file'], 'image.png', {
+            type: 'image/png'
+        });
+        Object.defineProperty(dropzone, 'files', {
+            value: [exampleFile]
+        });
+        mockedAxios.default.mockImplementation(() => Promise.reject({}));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            fireEvent.drop(dropzone);
+        }));
+        yield waitFor(() => expect(screen.getAllByTestId('file-item')[0]).toBeInTheDocument());
+        expect(onError).toBeCalled();
+    }));
+    it('should simulate a drop a file without upload link and upload error', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onError = jest.fn();
+        render(_jsx(FileUploader, { onError: onError }));
+        const dropzone = screen.getByTestId('dropzone');
+        const exampleFile = new File(['file'], 'image.png', {
+            type: 'image/png'
+        });
+        Object.defineProperty(dropzone, 'files', {
+            value: [exampleFile]
+        });
+        mockedAxios.default.mockImplementation(() => Promise.reject({}));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            fireEvent.drop(dropzone);
+        }));
+        expect(onError).toBeCalled();
+    }));
+    it('should call onUploadProgress', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onSuccess = jest.fn();
+        render(_jsx(FileUploader, { uploadUrl: "testing", onSuccess: onSuccess }));
+        const dropzone = screen.getByTestId('dropzone');
+        const exampleFile = new File(['file'], 'image.png', {
+            type: 'image/png'
+        });
+        Object.defineProperty(dropzone, 'files', {
+            value: [exampleFile]
+        });
+        mockedAxios.default.mockImplementation(({ 
+        //@ts-ignore
+        onUploadProgress }) => {
+            onUploadProgress({ loaded: 0, total: 100 });
+            return Promise.resolve({});
+        });
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            fireEvent.drop(dropzone);
+        }));
+        yield waitFor(() => {
+            expect(screen.getAllByTestId('file-item')[0]).toBeInTheDocument();
+            expect(screen.getAllByTestId('file-progress-bar')[0]).toBeInTheDocument();
+            const progressStyles = getComputedStyle(screen.getAllByTestId('file-progress-bar')[0]);
+            expect(progressStyles.width).toBe('0%');
+        });
+        expect(onSuccess).toBeCalled();
+    }));
+    /*   it('should simulate a drop a file with upload link and upload success', async () => {
+      const onSuccess = jest.fn()
+      render(<FileUploader uploadUrl="testing" onSuccess={onSuccess} />)
+  
+      const dropzone = screen.getByTestId('dropzone')
+  
+      const exampleFile = new File(['file'], 'image.png', {
+        type: 'image/png'
+      })
+  
+      Object.defineProperty(dropzone, 'files', {
+        value: [exampleFile]
+      })
+  
+      jest.spyOn(uploadFile, 'uploadFile').mockImplementation(
+        jest.fn((_a, _b, setProgress) => {
+          setProgress(43)
+          return new Promise((resolve) => resolve({} as axios.AxiosResponse))
+        })
+      )
+  
+      await act(async () => {
+        fireEvent.drop(dropzone)
+      })
+  
+      await waitFor(() => {
+        expect(screen.getAllByTestId('file-item')[0]).toBeInTheDocument()
+  
+        expect(screen.getAllByTestId('file-progress-bar')[0]).toBeInTheDocument()
+      })
+  
+      await waitFor(() => {
+        const progressStyles = getComputedStyle(
+          screen.getAllByTestId('file-progress-bar')[0]
+        )
+        expect(progressStyles.width).toBe('43%')
+      })
+  
+      expect(onSuccess).toBeCalled()
+    })
+  
+    it('should call files function after drop files', async () => {
+      const files = jest.fn()
+      render(<FileUploader uploadUrl="testing" files={files} />)
+  
+      const dropzone = screen.getByTestId('dropzone')
+  
+      const exampleFile = new File(['file'], 'image.png', {
+        type: 'image/png'
+      })
+  
+      Object.defineProperty(dropzone, 'files', {
+        value: [exampleFile]
+      })
+  
+      jest.spyOn(uploadFile, 'uploadFile').mockImplementation(
+        jest.fn((_a, _b, setProgress) => {
+          setProgress(43)
+          return new Promise((resolve) => resolve({} as axios.AxiosResponse))
+        })
+      )
+  
+      await act(async () => {
+        fireEvent.drop(dropzone)
+      })
+  
+      await waitFor(() => {
+        expect(screen.getAllByTestId('file-item')[0]).toBeInTheDocument()
+  
+        expect(screen.getAllByTestId('file-progress-bar')[0]).toBeInTheDocument()
+      })
+  
+      await waitFor(() => {
+        const progressStyles = getComputedStyle(
+          screen.getAllByTestId('file-progress-bar')[0]
+        )
+        expect(progressStyles.width).toBe('43%')
+      })
+  
+      expect(files).toBeCalled()
+    })
+  
+    it('should list a uploaded file', async () => {
+      const files = jest.fn()
+      render(<FileUploader uploadUrl="testing" files={files} />)
+  
+      const dropzone = screen.getByTestId('dropzone')
+  
+      const exampleFile = new File(['file'], 'image.png', {
+        type: 'image/png'
+      })
+  
+      Object.defineProperty(dropzone, 'files', {
+        value: [exampleFile]
+      })
+  
+      jest.spyOn(uploadFile, 'uploadFile').mockImplementation(
+        jest.fn((_a, _b, setProgress) => {
+          setProgress(100)
+          return new Promise((resolve) => resolve({} as axios.AxiosResponse))
+        })
+      )
+  
+      await act(async () => {
+        fireEvent.drop(dropzone)
+      })
+  
+      await waitFor(() => {
+        expect(screen.getAllByTestId('file-item')[0]).toBeInTheDocument()
+  
+        expect(screen.getAllByTestId('file-item-size')[0]).toBeInTheDocument()
+      })
+  
+      expect(files).toBeCalled()
+    })
+  
+    it('should delete a file on list', async () => {
+      const files = jest.fn()
+      render(<FileUploader uploadUrl="testing" files={files} />)
+  
+      const dropzone = screen.getByTestId('dropzone')
+  
+      const exampleFile = new File(['file'], 'image.png', {
+        type: 'image/png'
+      })
+  
+      Object.defineProperty(dropzone, 'files', {
+        value: [exampleFile]
+      })
+  
+      jest.spyOn(uploadFile, 'uploadFile').mockImplementation(
+        jest.fn((_a, _b, setProgress) => {
+          setProgress(100)
+          return new Promise((resolve) => resolve({} as axios.AxiosResponse))
+        })
+      )
+  
+      await act(async () => {
+        fireEvent.drop(dropzone)
+      })
+  
+      await waitFor(() => {
+        expect(screen.getAllByTestId('file-item')[0]).toBeInTheDocument()
+  
+        expect(screen.getAllByTestId('file-item-size')[0]).toBeInTheDocument()
+      })
+  
+      expect(files).toBeCalled()
+  
+      await act(async () => {
+        fireEvent.click(screen.getAllByTestId('file-item-delete-button')[0])
+      })
+  
+      await waitFor(() => {
+        expect(screen.queryAllByTestId('file-item')).toHaveLength(0)
+      })
+    }) */
+});

package/dist/components/FileUploader/index.d.ts

@@ -0,0 +1,20 @@
+import { Accept } from 'react-dropzone';
+export interface FileData {
+    file: File;
+    uploadProgress: number;
+    isUploaded: boolean;
+    withError: boolean;
+}
+declare type FileUploaderProps = {
+    'data-testid'?: string;
+    accept?: Accept;
+    multiple?: boolean;
+    chunking?: boolean;
+    uploadUrl?: string;
+    extensions?: string[];
+    files?: (v: File[]) => void;
+    onError?: (v: Error) => void;
+    onSuccess?: (v: boolean) => void;
+};
+declare const FileUploader: ({ uploadUrl, files, accept, multiple, onSuccess, onError, extensions, ...props }: FileUploaderProps) => JSX.Element;
+export default FileUploader;

package/dist/components/FileUploader/index.js

@@ -0,0 +1,151 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useCallback, useEffect, useState } from 'react';
+import { Box } from '@mui/system';
+import { IconButton, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { useDropzone } from 'react-dropzone';
+import { useUploadFile } from './useUploadFile';
+const FileUploader = (_a) => {
+    var { uploadUrl, files, accept, multiple, onSuccess, onError, extensions = ['[format]', '[format]', '[format]'] } = _a, props = __rest(_a, ["uploadUrl", "files", "accept", "multiple", "onSuccess", "onError", "extensions"]);
+    const { palette } = useTheme();
+    const [fileList, setfileList] = useState([]);
+    const { onDrop } = useUploadFile(setfileList, uploadUrl, onSuccess, onError);
+    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
+        multiple,
+        accept,
+        onDrop
+    });
+    const handleDeleteFile = useCallback((fileIndex) => {
+        const nFileList = [...fileList];
+        nFileList.splice(fileIndex, 1);
+        setfileList(nFileList);
+    }, [fileList]);
+    useEffect(() => {
+        const fileArray = fileList.map(({ file }) => file);
+        files && files(fileArray);
+    }, [acceptedFiles, fileList, files]);
+    return (_jsxs(Box, Object.assign({ "data-testid": "file-uploader" }, props, { children: [_jsxs(Box, Object.assign({ "data-testid": "dropzone", sx: {
+                    maxWidth: '500px',
+                    height: '109px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '20px',
+                    paddingTop: '20px',
+                    paddingRight: '38px',
+                    paddingBottom: '19px',
+                    paddingLeft: '20px',
+                    width: '100%',
+                    boxSizing: 'border-box',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    outline: `1px solid ${palette.neutral.main}`
+                } }, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), _jsx(Box, Object.assign({ sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '70px',
+                            height: '70px',
+                            boxSizing: 'border-box',
+                            border: `6px solid ${palette.misc.altBackground}`,
+                            borderRadius: '50%'
+                        } }, { children: _jsx(CloudUploadOutlinedIcon, { sx: {
+                                fill: palette.text.tertiary,
+                                width: '30px',
+                                height: '30px'
+                            } }) })), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ sx: {
+                                    fontSize: '14px',
+                                    width: '352px',
+                                    fontWeight: 600,
+                                    lineHeight: '22px',
+                                    color: palette.text.primary
+                                } }, { children: [_jsx(Box, Object.assign({ component: "span", sx: {
+                                            marginRight: '4px',
+                                            textDecoration: 'underline',
+                                            color: palette.button.main
+                                        } }, { children: "Browse files" })), "from your computer or drag and drop here"] })), _jsxs(Typography, Object.assign({ sx: {
+                                    fontWeight: 600,
+                                    fontSize: '10px',
+                                    lineHeight: '16px',
+                                    color: palette.neutral.main
+                                } }, { children: ["Supported File Formats: ", extensions === null || extensions === void 0 ? void 0 : extensions.join(', ')] }))] })] })), fileList.map((file, index) => {
+                return (_jsxs(Box, Object.assign({ "data-testid": "file-item", sx: {
+                        height: '70px',
+                        maxWidth: '500px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '20px',
+                        padding: '15px',
+                        boxSizing: 'border-box',
+                        borderBottom: `1px solid rgba(42, 50, 60, 0.5)`
+                    } }, { children: [_jsx(Box, Object.assign({ sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                width: '40px',
+                                height: '40px',
+                                boxSizing: 'border-box',
+                                border: `3px solid ${palette.misc.altBackground}`,
+                                borderRadius: '50%'
+                            } }, { children: _jsx(InsertDriveFileIcon, { sx: {
+                                    width: '18px',
+                                    height: '18px',
+                                    fill: palette.text.tertiary
+                                } }) })), _jsxs(Box, Object.assign({ sx: { flex: 1 } }, { children: [_jsx(Typography, Object.assign({ sx: {
+                                        fontWeight: 600,
+                                        fontSize: '14px',
+                                        lineHeight: '19px',
+                                        color: palette.text.primary
+                                    } }, { children: file.file.name })), file.isUploaded ? (_jsx(_Fragment, { children: _jsx(Typography, Object.assign({ "data-testid": "file-item-size", sx: {
+                                            marginTop: '1px',
+                                            fontWeight: 400,
+                                            fontSize: '12px',
+                                            lineHeight: '16px',
+                                            color: palette.neutral.main
+                                        } }, { children: (file.file.size / (1024 * 1024)).toFixed(1) + ' MB' })) })) : file.withError ? (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ sx: {
+                                                width: '100%',
+                                                height: '4px',
+                                                marginTop: '5px',
+                                                marginBottom: '4px',
+                                                borderRadius: '20px',
+                                                background: palette.misc.altBackground
+                                            } }, { children: _jsx(Box, { sx: {
+                                                    width: '100%',
+                                                    height: '100%',
+                                                    borderRadius: '20px',
+                                                    background: palette.error.main
+                                                } }) })), _jsx(Typography, Object.assign({ sx: {
+                                                fontWeight: 600,
+                                                fontSize: '10px',
+                                                lineHeight: '14px',
+                                                color: palette.text.primary
+                                            } }, { children: "File upload error. Please try again." }))] })) : (_jsx(Box, Object.assign({ sx: {
+                                        width: '100%',
+                                        height: '4px',
+                                        marginTop: '5px',
+                                        marginBottom: '4px',
+                                        borderRadius: '20px',
+                                        background: palette.misc.altBackground
+                                    } }, { children: _jsx(Box, { "data-testid": "file-progress-bar", sx: {
+                                            width: `${file.uploadProgress}%`,
+                                            height: '100%',
+                                            borderRadius: '20px',
+                                            background: palette.success.main
+                                        } }) })))] })), _jsx(IconButton, Object.assign({ "data-testid": "file-item-delete-button", "aria-label": "delete", sx: { padding: 0 }, onClick: () => handleDeleteFile(index) }, { children: _jsx(DeleteOutlineIcon, { sx: { width: '18px', height: '18px' } }) }))] }), index));
+            })] })));
+};
+export default FileUploader;

package/dist/components/FileUploader/useUploadFile.d.ts

@@ -0,0 +1,5 @@
+import { FileData } from '.';
+export declare const useUploadFile: (setfileList: (v: FileData[]) => void, uploadUrl?: string, onSuccess?: ((v: boolean) => void) | undefined, onError?: ((v: Error) => void) | undefined) => {
+    onDrop: <T extends File>(acceptedFiles: T[]) => Promise<void>;
+};
+export declare const uploadFile: (uploadUrl: string, file: File, setProgress: (v: number) => void, method?: string) => Promise<import("axios").AxiosResponse<any, any>>;

package/dist/components/FileUploader/useUploadFile.js

@@ -0,0 +1,76 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var m = o[Symbol.asyncIterator], i;
+    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+};
+import axios from 'axios';
+import { useCallback } from 'react';
+export const useUploadFile = (setfileList, uploadUrl, onSuccess, onError) => {
+    const onDrop = useCallback((acceptedFiles) => __awaiter(void 0, void 0, void 0, function* () {
+        var e_1, _a;
+        if (!uploadUrl) {
+            onError && onError(new Error('upload url is required'));
+            return;
+        }
+        let newList = acceptedFiles.map((file) => ({
+            file,
+            isUploaded: false,
+            uploadProgress: 0,
+            withError: false
+        }));
+        setfileList(newList);
+        try {
+            for (var _b = __asyncValues(newList.entries()), _c; _c = yield _b.next(), !_c.done;) {
+                const [index, file] = _c.value;
+                try {
+                    yield uploadFile(uploadUrl, file.file, (progress) => {
+                        const nList = [...newList];
+                        nList.splice(index, 1, Object.assign(Object.assign({}, file), { isUploaded: progress === 100, uploadProgress: progress }));
+                        newList = nList;
+                        setfileList(nList);
+                    });
+                    onSuccess && onSuccess(true);
+                }
+                catch (error) {
+                    const nList = [...newList];
+                    nList.splice(index, 1, Object.assign(Object.assign({}, file), { isUploaded: false, uploadProgress: 0, withError: true }));
+                    newList = nList;
+                    setfileList(nList);
+                    onError && onError(error);
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) yield _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }), [onError, onSuccess, setfileList, uploadUrl]);
+    return { onDrop };
+};
+export const uploadFile = (uploadUrl, file, setProgress, method = 'POST') => {
+    const data = new FormData();
+    data.append('file', file);
+    return axios({
+        data,
+        method,
+        baseURL: uploadUrl,
+        onUploadProgress(progressEvent) {
+            const { loaded, total } = progressEvent;
+            total && setProgress(Math.round((loaded * 100) / total));
+        }
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": false,
   "scripts": {
     "start": "yarn storybook",
@@ -44,10 +44,12 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
+    "axios": "^1.2.1",
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^8.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"