From dc7d8ccd66428d5654877a8cd4729d42a19143a6 Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Wed, 7 Jul 2021 23:47:40 +0300
Subject: [PATCH 1/4] refactor: rename fileinput

---
 .../file-input/src/{FileInput.ts => FileInput.Filestack.ts}   | 4 ++--
 packages/file-input/src/index.ts                              | 2 +-
 .../{index.test.tsx => FileInput.Filestack.test.tsx}          | 0
 ...{index.test.tsx.snap => FileInput.Filestack.test.tsx.snap} | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/file-input/src/{FileInput.ts => FileInput.Filestack.ts} (97%)
 rename packages/file-input/test/__tests__/{index.test.tsx => FileInput.Filestack.test.tsx} (100%)
 rename packages/file-input/test/__tests__/__snapshots__/{index.test.tsx.snap => FileInput.Filestack.test.tsx.snap} (100%)

diff --git a/packages/file-input/src/FileInput.ts b/packages/file-input/src/FileInput.Filestack.ts
similarity index 97%
rename from packages/file-input/src/FileInput.ts
rename to packages/file-input/src/FileInput.Filestack.ts
index 84f4dd5..b94b3a9 100644
--- a/packages/file-input/src/FileInput.ts
+++ b/packages/file-input/src/FileInput.Filestack.ts
@@ -16,7 +16,7 @@ const FILE_UPLOAD_INFO_QUERY = gql`
   }
 `;
 
-const FileInput: React.ComponentType<FileInputProps> = withApollo(
+const FileInputFilestack: React.ComponentType<FileInputProps> = withApollo(
   // @ts-ignore
   class FileInput extends React.Component<WithApolloClient<FileInputProps>, FileInputState> {
     public static defaultProps = {
@@ -169,4 +169,4 @@ const FileInput: React.ComponentType<FileInputProps> = withApollo(
   },
 );
 
-export { FileInput };
+export { FileInputFilestack };
diff --git a/packages/file-input/src/index.ts b/packages/file-input/src/index.ts
index eca4452..209e201 100644
--- a/packages/file-input/src/index.ts
+++ b/packages/file-input/src/index.ts
@@ -1,2 +1,2 @@
-export { FileInput } from './FileInput';
+export { FileInput } from './FileInput.Filestack';
 export * from './types';
diff --git a/packages/file-input/test/__tests__/index.test.tsx b/packages/file-input/test/__tests__/FileInput.Filestack.test.tsx
similarity index 100%
rename from packages/file-input/test/__tests__/index.test.tsx
rename to packages/file-input/test/__tests__/FileInput.Filestack.test.tsx
diff --git a/packages/file-input/test/__tests__/__snapshots__/index.test.tsx.snap b/packages/file-input/test/__tests__/__snapshots__/FileInput.Filestack.test.tsx.snap
similarity index 100%
rename from packages/file-input/test/__tests__/__snapshots__/index.test.tsx.snap
rename to packages/file-input/test/__tests__/__snapshots__/FileInput.Filestack.test.tsx.snap

From a13e92c7801527e7065cb8e22c2f462326a657f9 Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Wed, 7 Jul 2021 23:48:33 +0300
Subject: [PATCH 2/4] refactor: replace filestack fileinput

---
 .../src/{ => components/filestack}/FileInput.Filestack.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename packages/file-input/src/{ => components/filestack}/FileInput.Filestack.ts (98%)

diff --git a/packages/file-input/src/FileInput.Filestack.ts b/packages/file-input/src/components/filestack/FileInput.Filestack.ts
similarity index 98%
rename from packages/file-input/src/FileInput.Filestack.ts
rename to packages/file-input/src/components/filestack/FileInput.Filestack.ts
index b94b3a9..8eb76bc 100644
--- a/packages/file-input/src/FileInput.Filestack.ts
+++ b/packages/file-input/src/components/filestack/FileInput.Filestack.ts
@@ -3,7 +3,7 @@ import { withApollo, WithApolloClient } from 'react-apollo';
 import { ApolloClient } from 'apollo-client';
 import * as filestack from 'filestack-js';
 import gql from 'graphql-tag';
-import { FileInputProps, FileInputState } from './types';
+import { FileInputProps, FileInputState } from '../../types';
 
 const FILE_UPLOAD_INFO_QUERY = gql`
   query FileUploadInfo {

From 62d57084e3e06b09fd18be7f73fa293847744f09 Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Thu, 8 Jul 2021 00:00:29 +0300
Subject: [PATCH 3/4] wip

---
 packages/file-input/src/components/FileInput.ts | 8 ++++++++
 packages/file-input/src/index.ts                | 2 +-
 packages/file-input/src/types.ts                | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 packages/file-input/src/components/FileInput.ts

diff --git a/packages/file-input/src/components/FileInput.ts b/packages/file-input/src/components/FileInput.ts
new file mode 100644
index 0000000..3e63ea4
--- /dev/null
+++ b/packages/file-input/src/components/FileInput.ts
@@ -0,0 +1,8 @@
+import React from 'react';
+import { FileInputProps, FileInputState } from '../types';
+import { FileInputFilestack } from '../components/filestack/FileInput.Filestack';
+
+export const FileInput: React.FC<FileInputProps> = (props) => {
+
+  return <FileInputFilestack {...props} />;
+}
\ No newline at end of file
diff --git a/packages/file-input/src/index.ts b/packages/file-input/src/index.ts
index 209e201..eca4452 100644
--- a/packages/file-input/src/index.ts
+++ b/packages/file-input/src/index.ts
@@ -1,2 +1,2 @@
-export { FileInput } from './FileInput.Filestack';
+export { FileInput } from './FileInput';
 export * from './types';
diff --git a/packages/file-input/src/types.ts b/packages/file-input/src/types.ts
index 995301e..fd3decb 100644
--- a/packages/file-input/src/types.ts
+++ b/packages/file-input/src/types.ts
@@ -19,7 +19,7 @@ export type FileInputProps = {
     value: FileInputValue | null;
     originalFile: OriginalFileInputValue | null;
     error: object | null;
-  }) => React.ReactNode;
+  }) => JSX.Element;
   public?: boolean;
   fetchPolicy?: FetchPolicy;
   maxFiles?: number;

From 5640b247572e620bf3159890d41d5b970a2c291f Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Fri, 13 Aug 2021 15:59:24 +0300
Subject: [PATCH 4/4] wip

---
 examples/guest-app/public/index.html          |   1 +
 examples/guest-app/src/App.js                 |  72 ++---
 packages/file-input/package.json              |   4 +-
 packages/file-input/src/FileInput.aws.tsx     | 135 ++++++++++
 ...ut.Filestack.ts => FileInput.filestack.ts} |   5 +-
 packages/file-input/src/FileInput.tsx         |  71 +++++
 .../file-input/src/components/FileInput.ts    |   8 -
 .../FilePicker/FilePicker.constants.ts        |   8 +
 .../src/components/FilePicker/index.ts        |   1 +
 .../components/FilePicker/view/CloseIcon.tsx  |  22 ++
 .../components/FilePicker/view/FileIcon.tsx   |  16 ++
 .../FilePicker/view/FilePicker.content.tsx    | 151 +++++++++++
 .../FilePicker/view/FilePicker.dropzone.tsx   |  20 ++
 .../view/FilePicker.filePreview.tsx           |  48 ++++
 .../FilePicker/view/FilePicker.styles.ts      | 186 +++++++++++++
 .../src/components/Modal/Modal.style.ts       |  37 +++
 .../file-input/src/components/Modal/Modal.tsx |  60 +++++
 .../file-input/src/components/Modal/index.ts  |   1 +
 packages/file-input/src/components/index.ts   |   2 +
 packages/file-input/src/hooks/index.ts        |   2 +
 .../src/hooks/useFilePicker.constants.ts      |   8 +
 .../file-input/src/hooks/useFilePicker.gql.ts |  15 ++
 .../file-input/src/hooks/useFilePicker.ts     | 240 +++++++++++++++++
 .../src/hooks/useFilePicker.types.ts          |  30 +++
 packages/file-input/src/index.ts              |   2 +-
 packages/file-input/src/types.ts              |  39 ++-
 packages/file-input/src/utils/index.ts        |  77 ++++++
 yarn.lock                                     | 253 +++++++++++++++++-
 28 files changed, 1458 insertions(+), 56 deletions(-)
 create mode 100644 packages/file-input/src/FileInput.aws.tsx
 rename packages/file-input/src/{components/filestack/FileInput.Filestack.ts => FileInput.filestack.ts} (95%)
 create mode 100644 packages/file-input/src/FileInput.tsx
 delete mode 100644 packages/file-input/src/components/FileInput.ts
 create mode 100644 packages/file-input/src/components/FilePicker/FilePicker.constants.ts
 create mode 100644 packages/file-input/src/components/FilePicker/index.ts
 create mode 100644 packages/file-input/src/components/FilePicker/view/CloseIcon.tsx
 create mode 100644 packages/file-input/src/components/FilePicker/view/FileIcon.tsx
 create mode 100644 packages/file-input/src/components/FilePicker/view/FilePicker.content.tsx
 create mode 100644 packages/file-input/src/components/FilePicker/view/FilePicker.dropzone.tsx
 create mode 100644 packages/file-input/src/components/FilePicker/view/FilePicker.filePreview.tsx
 create mode 100644 packages/file-input/src/components/FilePicker/view/FilePicker.styles.ts
 create mode 100644 packages/file-input/src/components/Modal/Modal.style.ts
 create mode 100644 packages/file-input/src/components/Modal/Modal.tsx
 create mode 100644 packages/file-input/src/components/Modal/index.ts
 create mode 100644 packages/file-input/src/components/index.ts
 create mode 100644 packages/file-input/src/hooks/index.ts
 create mode 100644 packages/file-input/src/hooks/useFilePicker.constants.ts
 create mode 100644 packages/file-input/src/hooks/useFilePicker.gql.ts
 create mode 100644 packages/file-input/src/hooks/useFilePicker.ts
 create mode 100644 packages/file-input/src/hooks/useFilePicker.types.ts
 create mode 100644 packages/file-input/src/utils/index.ts

diff --git a/examples/guest-app/public/index.html b/examples/guest-app/public/index.html
index dd1ccfd..cf4a584 100644
--- a/examples/guest-app/public/index.html
+++ b/examples/guest-app/public/index.html
@@ -24,6 +24,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="__filepicker"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/examples/guest-app/src/App.js b/examples/guest-app/src/App.js
index f991fda..4f1e0f9 100644
--- a/examples/guest-app/src/App.js
+++ b/examples/guest-app/src/App.js
@@ -1,41 +1,33 @@
 import React from 'react';
-import { AppProvider, gql } from '8base-react-sdk';
-import { Query } from 'react-apollo';
+import { AppProvider, FileInput } from '8base-react-sdk';
+import { ApolloLink } from 'apollo-link';
 
 // 8base api endpoint
-const API_ENDPOINT_URI = 'https://api.8base.com/cjxotvdpv006501l68k94dz80';
-
-// Guest can query specific tables if he is allowed 
-const CAT_BREEDS_LIST_QUERY = gql`
-  query CatBreedsList {
-    catBreedsList {
-      items {
-        id
-        name
-      }
-    }
-  }
-`;
-
-const CatBreeds = ({ loading, data }) => {
-  if (loading) {
-    return <p>Loading...</p>;
-  }
-
-  return (
-    <div>
-      <h2>Cat breeds</h2>
-      <ul>
-        { data.catBreedsList.items.map(
-          ({ id, name }) => <li><p key={ id }>{ name }</p></li>
-        ) }
-      </ul>
-    </div>
-  );
-};
+// const API_ENDPOINT_URI = 'https://api.8base.com/cjxotvdpv006501l68k94dz80';
+// AWS
+const API_ENDPOINT_URI = 'https://staging-api.8basedev.com/ckol7pw34004008k174kfhmt4';
+const TOKENT = '83cd5898-0b2e-42df-a3ff-3139d435758b';
+
+// FILESTACK
+// const API_ENDPOINT_URI = 'https://staging-api.8basedev.com/ckpcn6bqx092g08mihor93cru';
+// const TOKENT = '1e3493c8-0ce6-4c5e-88e0-f6ca195f8cc1';
+
+
+const muLink = new ApolloLink((operation, forward) => {
+  operation.setContext(({ headers = {} }) => {
+      return {
+        headers: {
+          ...headers,
+          authorization: TOKENT,
+        },
+      };
+  });
+
+  return forward && forward(operation);
+});
 
 const App = () => (
-  <AppProvider uri={ API_ENDPOINT_URI }>
+  <AppProvider uri={ API_ENDPOINT_URI } extendLinks={(links) => [muLink, ...links,]} >
     { ({ loading }) => {
       if (loading) {
         return <p>Loading...</p>;
@@ -44,9 +36,19 @@ const App = () => (
       return (
         <React.Fragment>
           <h1>Guest App</h1>
-          <Query query={ CAT_BREEDS_LIST_QUERY }>
+          {/* <Query query={ CAT_BREEDS_LIST_QUERY }>
             { ({ loading, data }) => <CatBreeds loading={ loading } data={ data } /> }
-          </Query>
+          </Query> */}
+          <FileInput onUploadDone={(val) => console.log('onUploadDone', val)} >
+            {({pick, value}) => (
+              <>
+              <button onClick={() => pick({})}>CLICK</button>
+              <pre>
+              {Array.isArray(value) ? value.map(el => <div><a href={el.downloadUrl} >{el.filename}</a></div>) : value && <a href={value.downloadUrl} >{value.filename}</a>}
+              </pre>
+              </>
+            )}
+          </FileInput>
         </React.Fragment>
       );
     } }
diff --git a/packages/file-input/package.json b/packages/file-input/package.json
index ecdff4b..8625113 100644
--- a/packages/file-input/package.json
+++ b/packages/file-input/package.json
@@ -19,8 +19,10 @@
     "react-dom": "^16.8.6"
   },
   "dependencies": {
+    "@emotion/css": "^11.1.3",
     "filestack-js": "3.7.0",
-    "graphql-tag": "^2.10.0"
+    "graphql-tag": "^2.10.0",
+    "react-dropzone": "^11.3.4"
   },
   "devDependencies": {
     "@babel/core": "^7.4.3",
diff --git a/packages/file-input/src/FileInput.aws.tsx b/packages/file-input/src/FileInput.aws.tsx
new file mode 100644
index 0000000..1ac674d
--- /dev/null
+++ b/packages/file-input/src/FileInput.aws.tsx
@@ -0,0 +1,135 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { PickerOptions } from 'filestack-js';
+
+import { AWSFileInputProps } from 'src/types';
+
+import { Modal, FilePickerContent } from './components';
+import { useFilePicker } from './hooks';
+
+const UNSUPPORTED_OPTIONS = [
+  'allowManualRetry',
+  'fromSources',
+  'container',
+  'cleanupImageExif',
+  'customAuthText',
+  'displayMode', // may be implemented in the future
+  'customSourceContainer',
+  'customSourcePath',
+  'customSourceName',
+  'customText',
+  'disableStorageKey',
+  'disableTransformer', // true by default
+  'disableThumbnails', // false by default, may be implemented in the future
+  'dropPane',
+  'exposeOriginalFile',
+  'globalDropZone',
+  'hideModalWhenUploading', // may be implemented in the future
+  'imageDim',
+  'imageMax',
+  'imageMin',
+  'lang', // may be implemented in the future
+  'viewType', // may be implemented in the future
+  'errorsTimeout',
+  'modalSize', // may be implemented in the future
+  'rootId',
+  'startUploadingWhenMaxFilesReached', // may be implemented in the future
+  'storeTo',
+  'transformations', // may be implemented in the future
+  'uploadConfig',
+  'uploadInBackground', // may be implemented in the future
+  'videoResolution', // may be implemented in the future
+  'minFiles', // may be implemented in the future
+];
+
+const warnAboutOptions = (options: PickerOptions = {}) => {
+  if ('maxFiles' in options) {
+    console.warn('@8base-react/file-input: Specify "maxFiles" as a prop for FileInput component');
+  }
+
+  if ('onUploadDone' in options) {
+    console.warn(
+      '@8base-react/file-input: Specify "onUploadDone" as a prop for FileInput component',
+    );
+  }
+
+  setTimeout(() => {
+    UNSUPPORTED_OPTIONS.forEach(optionKey => {
+      if (optionKey in options) {
+        console.warn(`@8base-react/file-input: ${optionKey} option is not supported yet`);
+      }
+    });
+  }, 0);
+};
+
+export const FileInputAws: React.FC<AWSFileInputProps> = ({
+  children,
+  maxFiles,
+  fallbackOptions,
+  value: controlledValue = null,
+  onUploadDone: uploadCallback,
+  onChange,
+}) => {
+  const [calledFallback, setCalledFallback] = useState<boolean>(false);
+  const {
+    fileList,
+    fileProgressList,
+    isOpen,
+    hideFilePicker,
+    showFilePicker,
+    addFiles,
+    removeFile,
+    step,
+    setUploadMoreStep,
+    setUploadStep,
+    upload,
+    getRootProps,
+    getInputProps,
+    options,
+    value,
+    originalFile,
+    error,
+  } = useFilePicker({ uploadCallback, controlledValue, onChange });
+
+  const pick = useCallback(
+    (pickerOptions: PickerOptions = {}) => {
+      warnAboutOptions(options);
+      showFilePicker({ ...pickerOptions, maxFiles });
+    },
+    [showFilePicker, maxFiles, options],
+  );
+
+  useEffect(() => {
+    if (calledFallback) {
+      return;
+    }
+
+    if (fallbackOptions) {
+      pick(fallbackOptions);
+    }
+
+    setCalledFallback(true);
+  }, [fallbackOptions, calledFallback, pick]);
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={hideFilePicker}>
+        <FilePickerContent
+          step={step}
+          hideFilePicker={hideFilePicker}
+          addFiles={addFiles}
+          fileList={fileList}
+          setUploadStep={setUploadStep}
+          removeFile={removeFile}
+          setUploadMoreStep={setUploadMoreStep}
+          upload={upload}
+          fileProgressList={fileProgressList}
+          getInputProps={getInputProps}
+          getRootProps={getRootProps}
+          options={options}
+        />
+      </Modal>
+      {children({ pick, value, originalFile, error })}
+    </>
+  );
+};
diff --git a/packages/file-input/src/components/filestack/FileInput.Filestack.ts b/packages/file-input/src/FileInput.filestack.ts
similarity index 95%
rename from packages/file-input/src/components/filestack/FileInput.Filestack.ts
rename to packages/file-input/src/FileInput.filestack.ts
index 8eb76bc..4ba3f6f 100644
--- a/packages/file-input/src/components/filestack/FileInput.Filestack.ts
+++ b/packages/file-input/src/FileInput.filestack.ts
@@ -3,7 +3,7 @@ import { withApollo, WithApolloClient } from 'react-apollo';
 import { ApolloClient } from 'apollo-client';
 import * as filestack from 'filestack-js';
 import gql from 'graphql-tag';
-import { FileInputProps, FileInputState } from '../../types';
+import { FilestackFileInputProps as FileInputProps, FileInputState } from './types';
 
 const FILE_UPLOAD_INFO_QUERY = gql`
   query FileUploadInfo {
@@ -51,6 +51,9 @@ const FileInputFilestack: React.ComponentType<FileInputProps> = withApollo(
 
     public componentDidMount() {
       this.filestackPromise = this.initFilestack();
+      if (this.props.fallbackOptions) {
+        this.pick(this.props.fallbackOptions);
+      }
     }
 
     public async initFilestack() {
diff --git a/packages/file-input/src/FileInput.tsx b/packages/file-input/src/FileInput.tsx
new file mode 100644
index 0000000..94f436b
--- /dev/null
+++ b/packages/file-input/src/FileInput.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+
+import { PickerOptions } from 'filestack-js';
+import gql from 'graphql-tag';
+import { useQuery } from 'react-apollo';
+
+import { FileInputAws } from './FileInput.aws';
+import { FileInputFilestack } from './FileInput.filestack';
+import { AWSFileInputProps, CommonFileInputProps, RenderPropType } from './types';
+
+type FileManagementProviderResponse = {
+  system: {
+    environmentSettings: {
+      fileManagementProvider: string;
+    };
+  };
+};
+
+const FALLBACK_PROPS = {
+  value: null,
+  originalFile: null,
+  error: null,
+  loading: true,
+};
+
+const FILE_MANAGEMENT_PROVIDER_QUERY = gql`
+  query FileManagementProvider {
+    system {
+      environmentSettings {
+        fileManagementProvider
+      }
+    }
+  }
+`;
+
+const AWS_PROVIDER_NAME = 'aws';
+
+const checkAWSProvider = (data: FileManagementProviderResponse | undefined) => {
+  const provider =
+    data &&
+    data.system &&
+    data.system.environmentSettings &&
+    data.system.environmentSettings.fileManagementProvider;
+  return provider === AWS_PROVIDER_NAME;
+};
+
+/**
+ * This component check the workspace file provider
+ * and selects which type of filepicker to use - filestack or 8base
+ */
+export const FileInput: React.FC<CommonFileInputProps | AWSFileInputProps> = props => {
+  // need to open picker after finish query
+  const [fallbackOptions, setFallbackOptions] = useState<PickerOptions | undefined>();
+  const { data, loading } = useQuery<FileManagementProviderResponse>(
+    FILE_MANAGEMENT_PROVIDER_QUERY,
+    { fetchPolicy: props.fetchPolicy },
+  );
+
+  if (loading) {
+    return props.children({
+      ...FALLBACK_PROPS,
+      pick: setFallbackOptions as RenderPropType['pick'],
+    });
+  }
+
+  if (checkAWSProvider(data)) {
+    return <FileInputAws {...(props as AWSFileInputProps)} fallbackOptions={fallbackOptions} />;
+  }
+
+  return <FileInputFilestack {...props} fallbackOptions={fallbackOptions} />;
+};
diff --git a/packages/file-input/src/components/FileInput.ts b/packages/file-input/src/components/FileInput.ts
deleted file mode 100644
index 3e63ea4..0000000
--- a/packages/file-input/src/components/FileInput.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { FileInputProps, FileInputState } from '../types';
-import { FileInputFilestack } from '../components/filestack/FileInput.Filestack';
-
-export const FileInput: React.FC<FileInputProps> = (props) => {
-
-  return <FileInputFilestack {...props} />;
-}
\ No newline at end of file
diff --git a/packages/file-input/src/components/FilePicker/FilePicker.constants.ts b/packages/file-input/src/components/FilePicker/FilePicker.constants.ts
new file mode 100644
index 0000000..0e6f0b5
--- /dev/null
+++ b/packages/file-input/src/components/FilePicker/FilePicker.constants.ts
@@ -0,0 +1,8 @@
+export const STEPS = {
+  select: 'select',
+  upload: 'upload',
+  uploadMore: 'uploadMore',
+  uploading: 'uploading',
+} as const;
+
+export type StepType = keyof typeof STEPS;
diff --git a/packages/file-input/src/components/FilePicker/index.ts b/packages/file-input/src/components/FilePicker/index.ts
new file mode 100644
index 0000000..5982c53
--- /dev/null
+++ b/packages/file-input/src/components/FilePicker/index.ts
@@ -0,0 +1 @@
+export { FilePickerContent } from './view/FilePicker.content'
\ No newline at end of file
diff --git a/packages/file-input/src/components/FilePicker/view/CloseIcon.tsx b/packages/file-input/src/components/FilePicker/view/CloseIcon.tsx
new file mode 100644
index 0000000..0d0b846
--- /dev/null
+++ b/packages/file-input/src/components/FilePicker/view/CloseIcon.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { css } from '@emotion/css';
+
+const closeIconCss = css`
+  width: 24px;
+  height: 24px;
+  display: block;
+`;
+
+export const CloseIcon = () => (
+  <i className={closeIconCss}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <path
+        d="m23.542371 10.62753-1.491936-1.4919365-5.914843 5.9148425-5.914843-5.9148425-1.4919365 1.4919365 5.9148425 5.914843-5.9148425 5.914843 1.4919365 1.491936 5.914843-5.914842 5.914843 5.914842 1.491936-1.491936-5.914842-5.914843z"
+        fill="#656565"
+        fillRule="evenodd"
+        strokeWidth="1.058111"
+      />
+    </svg>
+  </i>
+);
diff --git a/packages/file-input/src/components/FilePicker/view/FileIcon.tsx b/packages/file-input/src/components/FilePicker/view/FileIcon.tsx
new file mode 100644
index 0000000..f02f7b4
--- /dev/null
+++ b/packages/file-input/src/components/FilePicker/view/FileIcon.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const IconDocument = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="26" height="30" viewBox="0 0 54 72">
+    <g fill="none" fillRule="evenodd" transform="translate(.5)">
+      <path
+        fill="#4DA1FF"
+        d="M4.99947565,72 C2.23834149,72 8.06466005e-13,69.759345 8.06466005e-13,67.0064996 L8.06466005e-13,18.6666667 L18.6666667,-7.10542736e-15 L47.8943715,-7.10542736e-15 C50.6527673,-7.10542736e-15 52.8888889,2.23376942 52.8888889,5.00573628 L52.8888889,66.9942637 C52.8888889,69.7588555 50.6501007,72 47.8894132,72 L4.99947565,72 Z"
+      />
+      <path
+        fill="#DBECFF"
+        d="M2.42472709e-12,18.6666667 L13.6643426,18.6666667 C16.4270499,18.6666667 18.6666667,16.4335717 18.6666667,13.6643426 L18.6666667,8.8817842e-15"
+      />
+    </g>
+  </svg>
+);
diff --git a/packages/file-input/src/components/FilePicker/view/FilePicker.content.tsx b/packages/file-input/src/components/FilePicker/view/FilePicker.content.tsx
new file mode 100644
index 0000000..27c5a32
--- /dev/null
+++ b/packages/file-input/src/components/FilePicker/view/FilePicker.content.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+
+import { FilePickerState } from 'src/hooks';
+
+import { STEPS } from '../FilePicker.constants';
+
+import { CloseIcon } from './CloseIcon';
+import { FilePickerDropZone, FilePickerDropZoneProps } from './FilePicker.dropzone';
+import { FilePreview } from './FilePicker.filePreview';
+import { COMMON_STYLES, CONTENT_STYLES } from './FilePicker.styles';
+
+type FilePickerContentProps = FilePickerDropZoneProps &
+  Pick<
+  FilePickerState,
+    | 'step'
+    | 'hideFilePicker'
+    | 'addFiles'
+    | 'fileList'
+    | 'setUploadStep'
+    | 'removeFile'
+    | 'setUploadMoreStep'
+    | 'upload'
+    | 'fileProgressList'
+    | 'options'
+  >;
+
+const shouldShowUploadMoreBtn = (options: FilePickerContentProps['options'], length: number) => {
+  if (options && options.maxFiles) {
+    return length < options.maxFiles;
+  }
+
+  return true;
+};
+
+const shouldShowUploadBtn = (options: FilePickerContentProps['options'], length: number) => {
+  if (options && options.minFiles) {
+    return length >= options.minFiles;
+  }
+
+  return true;
+};
+
+export const FilePickerContent = ({
+  step,
+  hideFilePicker,
+  fileList,
+  setUploadStep,
+  removeFile,
+  setUploadMoreStep,
+  upload,
+  fileProgressList,
+  getRootProps,
+  getInputProps,
+  options,
+}: FilePickerContentProps) => {
+  switch (step) {
+    case STEPS.select: {
+      return (
+        <>
+          <div className={CONTENT_STYLES.header}>
+            <div className={CONTENT_STYLES.closeWrapper} onClick={hideFilePicker}>
+              <CloseIcon />
+            </div>
+          </div>
+          <FilePickerDropZone getRootProps={getRootProps} getInputProps={getInputProps} />
+        </>
+      );
+    }
+
+    case STEPS.uploadMore: {
+      return (
+        <>
+          <div className={CONTENT_STYLES.header}>
+            <div className={CONTENT_STYLES.closeWrapper} onClick={hideFilePicker}>
+              <CloseIcon />
+            </div>
+          </div>
+          <FilePickerDropZone getRootProps={getRootProps} getInputProps={getInputProps} />
+          <div className={CONTENT_STYLES.footer}>
+            <span className={CONTENT_STYLES.footerDetails}>Selected Files: {fileList.length}</span>
+            <button className={COMMON_STYLES.button} onClick={setUploadStep}>
+              View Selected
+            </button>
+          </div>
+        </>
+      );
+    }
+
+    case STEPS.upload: {
+      return (
+        <>
+          <div className={CONTENT_STYLES.header}>
+            <div className={CONTENT_STYLES.headerTitle}>Selected Files</div>
+            <div className={CONTENT_STYLES.closeWrapper} onClick={hideFilePicker}>
+              <CloseIcon />
+            </div>
+          </div>
+          <div className={CONTENT_STYLES.listWrapper}>
+            {fileList.map((el, index) => (
+              <FilePreview
+                key={`${el.name}_${index}`}
+                size={el.size}
+                name={el.name}
+                src={el.localPath}
+                onRemoveClick={removeFile(el)}
+              />
+            ))}
+          </div>
+          <div className={CONTENT_STYLES.footer}>
+            {shouldShowUploadMoreBtn(options, fileList.length) && (
+              <button className={COMMON_STYLES.button} onClick={setUploadMoreStep}>
+                Upload more
+              </button>
+            )}
+            {shouldShowUploadBtn(options, fileList.length) && (
+              <button className={COMMON_STYLES.button} onClick={upload}>
+                Upload
+              </button>
+            )}
+          </div>
+        </>
+      );
+    }
+
+    case STEPS.uploading: {
+      return (
+        <>
+          <div className={CONTENT_STYLES.header}>
+            <span className={CONTENT_STYLES.headerTitle}>Selected Files</span>
+          </div>
+          <div className={CONTENT_STYLES.listWrapper}>
+            {fileList.map((el, index) => (
+              <FilePreview
+                key={`${el.name}_${index}`}
+                size={el.size}
+                name={el.name}
+                src={el.localPath}
+                isUploading
+                progress={fileProgressList[index]}
+              />
+            ))}
+          </div>
+        </>
+      );
+    }
+
+    default: {
+      return null;
+    }
+  }
+};
diff --git a/packages/file-input/src/components/FilePicker/view/FilePicker.dropzone.tsx b/packages/file-input/src/components/FilePicker/view/FilePicker.dropzone.tsx
new file mode 100644
index 0000000..746be7f
--- /dev/null
+++ b/packages/file-input/src/components/FilePicker/view/FilePicker.dropzone.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { DropzoneState } from 'react-dropzone';
+
+import { DROPZONE_STYLES } from './FilePicker.styles';
+
+export type FilePickerDropZoneProps = {
+  getRootProps: DropzoneState['getRootProps'];
+  getInputProps: DropzoneState['getInputProps'];
+};
+
+export const FilePickerDropZone = ({ getRootProps, getInputProps }: FilePickerDropZoneProps) => {
+  return (
+    <div className={DROPZONE_STYLES.wrapper} {...getRootProps()}>
+      <input {...getInputProps()} />
+      <div className={DROPZONE_STYLES.title}>Select Files to Upload</div>
+      <div className={DROPZONE_STYLES.description}>or Drag and Drop, Copy and Paste Files </div>
+    </div>
+  );
+};
diff --git a/packages/file-input/src/components/FilePicker/view/FilePicker.filePreview.tsx b/packages/file-input/src/components/FilePicker/view/FilePicker.filePreview.tsx
new file mode 100644
index 0000000..a321a9c
--- /dev/null
+++ b/packages/file-input/src/components/FilePicker/view/FilePicker.filePreview.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { formatFileSize } from '../../../utils';
+
+import { CloseIcon } from './CloseIcon';
+import { IconDocument } from './FileIcon';
+import { FILE_PREVIEW_STYLES } from './FilePicker.styles';
+
+type FilePreviewProps = {
+  name: string;
+  src?: string;
+  size: number;
+  isUploading?: boolean;
+  progress?: number;
+  onRemoveClick?: () => void;
+};
+
+export const FilePreview = ({
+  name,
+  src,
+  size,
+  onRemoveClick,
+  isUploading,
+  progress = 0,
+}: FilePreviewProps) => {
+  const progressString = formatFileSize(progress);
+  const sizeString = formatFileSize(size);
+  return (
+    <div className={FILE_PREVIEW_STYLES.itemWrapper}>
+      {src ? (
+        <img className={FILE_PREVIEW_STYLES.image} src={src} />
+      ): (
+        <div className={FILE_PREVIEW_STYLES.image}>
+          <IconDocument />
+        </div>
+      )}
+      <div className={FILE_PREVIEW_STYLES.details}>
+        <span>{name}</span>
+        <span>{isUploading ? `${progressString} / ${sizeString}` : sizeString}</span>
+      </div>
+      {!isUploading && (
+        <div className={FILE_PREVIEW_STYLES.removeWrapper} onClick={onRemoveClick}>
+          <CloseIcon />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/file-input/src/components/FilePicker/view/FilePicker.styles.ts b/packages/file-input/src/components/FilePicker/view/FilePicker.styles.ts
new file mode 100644
index 0000000..778ad82
--- /dev/null
+++ b/packages/file-input/src/components/FilePicker/view/FilePicker.styles.ts
@@ -0,0 +1,186 @@
+import { css } from '@emotion/css';
+
+export const COMMON_STYLES = {
+  button: css`
+    appearance: none;
+    outline: none;
+    text-align: center;
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+    white-space: nowrap;
+    color: rgb(255, 255, 255);
+    line-height: 20px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    transition: all 0.15s ease-in-out 0s;
+    cursor: pointer;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    background-color: rgb(8, 116, 249);
+    border-color: rgb(8, 116, 249);
+    height: 40px;
+    padding: 0px 32px;
+    font-size: 14px;
+    &:active {
+      background-color: rgb(77, 161, 255);
+      border-color: rgb(77, 161, 255);
+      box-shadow: rgb(50 50 93 / 14%) 0px 1px 3px 0px inset,
+        rgb(51 80 107 / 8%) 0px 4px 6px 0px inset;
+    }
+
+    &:hover {
+      background-color: rgb(35, 139, 255);
+      border-color: rgb(35, 139, 255);
+      box-shadow: rgb(50 50 93 / 20%) 0px 2px 4px 0px;
+    }
+  `,
+};
+
+export const CONTENT_STYLES = {
+  closeWrapper: css`
+    cursor: pointer;
+    user-select: none;
+    margin-right: 8px;
+    margin-left: auto;
+
+    &:hover {
+      color: #8698a7;
+    }
+  `,
+  header: css`
+    position: relative;
+    cursor: inherit;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    min-height: 40px;
+  `,
+  headerTitle: css`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 13px;
+  `,
+  listWrapper: css`
+    display: flex;
+    flex-flow: column nowrap;
+    place-content: flex-start;
+    align-items: flex-start;
+    margin: 16px 16px 0 16px;
+    padding-bottom: 12px;
+    cursor: inherit;
+    overflow: auto;
+  `,
+  footer: css`
+    display: flex;
+    flex-flow: row nowrap;
+    place-content: flex-start flex-end;
+    align-items: flex-start;
+    padding: 16px;
+    cursor: inherit;
+    margin-top: auto;
+    border-top: 1px solid #dddddd;
+
+    & > :not(:last-child) {
+      margin-right: 8px;
+    }
+  `,
+  footerDetails: css`
+    font-size: 13px;
+    font-weight: 400;
+    margin: auto;
+    margin-left: 0;
+    margin-right: auto !important;
+  `,
+};
+
+export const DROPZONE_STYLES = {
+  wrapper: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: 1px dashed #bdbdbd;
+    margin: 10px 30px 30px 30px;
+    flex: 1;
+  `,
+  title: css`
+    font-size: 20px;
+    font-weight: 400;
+  `,
+  description: css`
+    line-height: 20px;
+    font-size: 13px;
+    font-weight: 400;
+    margin-top: 10px;
+    color: #9e9e9e;
+  `,
+};
+
+export const FILE_PREVIEW_STYLES = {
+  itemWrapper: css`
+    display: flex;
+    flex-flow: row nowrap;
+    place-content: flex-start;
+    align-items: center;
+    padding: 8px;
+    cursor: inherit;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    margin-bottom: 4px;
+    box-sizing: border-box;
+
+    & > :not(:last-child) {
+      margin-right: 8px;
+    }
+  `,
+  image: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    width: 50px;
+    border-radius: 10%;
+    border: 1px solid #d0d7dd;
+    box-sizing: border-box;
+
+    object-fit: cover;
+    object-position: center center;
+  `,
+  removeWrapper: css`
+    cursor: pointer;
+    user-select: none;
+    margin-left: auto;
+    display: flex;
+
+    &:hover {
+      color: #8698a7;
+    }
+  `,
+  details: css`
+    display: flex;
+    flex-flow: column nowrap;
+    place-content: flex-start;
+    align-items: flex-start;
+    cursor: inherit;
+    line-height: 15px;
+    font-size: 13px;
+
+    & > :not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    & > span {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  `,
+};
diff --git a/packages/file-input/src/components/Modal/Modal.style.ts b/packages/file-input/src/components/Modal/Modal.style.ts
new file mode 100644
index 0000000..3c8b503
--- /dev/null
+++ b/packages/file-input/src/components/Modal/Modal.style.ts
@@ -0,0 +1,37 @@
+import { css } from '@emotion/css';
+
+type StylesComponents = 'overlay' | 'content' | 'header';
+
+export const MODAL_STYLE: Record<StylesComponents, string> = {
+  overlay: css`
+    align-items: center;
+    inset: 0px;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    position: fixed;
+    background-color: rgba(47, 53, 62, 0.86);
+    z-index: 2147483647;
+  `,
+  content: css`
+    width: 100%;
+    height: 100%;
+    background: #eeeeee;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    @media screen and (min-width: 769px) {
+      border-radius: 2px;
+      max-width: 750px;
+      max-height: 500px;
+    }
+  `,
+  header: css`
+    display: flex;
+    flex-flow: row nowrap;
+    place-content: flex-start flex-end;
+    align-items: flex-start;
+    cursor: inherit;
+    position: relative;
+  `,
+};
diff --git a/packages/file-input/src/components/Modal/Modal.tsx b/packages/file-input/src/components/Modal/Modal.tsx
new file mode 100644
index 0000000..7d89229
--- /dev/null
+++ b/packages/file-input/src/components/Modal/Modal.tsx
@@ -0,0 +1,60 @@
+import React, { useCallback, useLayoutEffect, useState } from 'react';
+
+import { createPortal } from 'react-dom';
+
+import { MODAL_STYLE } from './Modal.style';
+
+type ModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+const CONTAINER_ID = '__filepicker';
+const ESCAPE_KEY = 'Escape';
+
+export const Modal = ({ isOpen, onClose, children }: ModalProps) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useLayoutEffect(() => {
+    const modalRoot = document.getElementById(CONTAINER_ID);
+
+    if (!modalRoot) {
+      console.warn(`@8base-react/file-input: container with ${CONTAINER_ID} id does not exist`);
+      return;
+    }
+
+    setContainer(modalRoot);
+  }, []);
+
+  const onDocumentKeyPress = useCallback(
+    event => {
+      if (event.key === ESCAPE_KEY) {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  useLayoutEffect(() => {
+    document.addEventListener('keydown', onDocumentKeyPress);
+    return () => {
+      document.removeEventListener('keydown', onDocumentKeyPress);
+    };
+  }, [onDocumentKeyPress]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  if (!container) {
+    return null;
+  }
+
+  return createPortal(
+    <div className={MODAL_STYLE.overlay}>
+      <div className={MODAL_STYLE.content}>{children}</div>
+    </div>,
+    container,
+  );
+};
diff --git a/packages/file-input/src/components/Modal/index.ts b/packages/file-input/src/components/Modal/index.ts
new file mode 100644
index 0000000..3d80065
--- /dev/null
+++ b/packages/file-input/src/components/Modal/index.ts
@@ -0,0 +1 @@
+export { Modal } from './Modal'
\ No newline at end of file
diff --git a/packages/file-input/src/components/index.ts b/packages/file-input/src/components/index.ts
new file mode 100644
index 0000000..ccb692e
--- /dev/null
+++ b/packages/file-input/src/components/index.ts
@@ -0,0 +1,2 @@
+export { Modal } from './Modal'
+export { FilePickerContent } from './FilePicker'
\ No newline at end of file
diff --git a/packages/file-input/src/hooks/index.ts b/packages/file-input/src/hooks/index.ts
new file mode 100644
index 0000000..e7e9dbb
--- /dev/null
+++ b/packages/file-input/src/hooks/index.ts
@@ -0,0 +1,2 @@
+export { useFilePicker } from './useFilePicker';
+export * from './useFilePicker.types';
\ No newline at end of file
diff --git a/packages/file-input/src/hooks/useFilePicker.constants.ts b/packages/file-input/src/hooks/useFilePicker.constants.ts
new file mode 100644
index 0000000..0e6f0b5
--- /dev/null
+++ b/packages/file-input/src/hooks/useFilePicker.constants.ts
@@ -0,0 +1,8 @@
+export const STEPS = {
+  select: 'select',
+  upload: 'upload',
+  uploadMore: 'uploadMore',
+  uploading: 'uploading',
+} as const;
+
+export type StepType = keyof typeof STEPS;
diff --git a/packages/file-input/src/hooks/useFilePicker.gql.ts b/packages/file-input/src/hooks/useFilePicker.gql.ts
new file mode 100644
index 0000000..778c38c
--- /dev/null
+++ b/packages/file-input/src/hooks/useFilePicker.gql.ts
@@ -0,0 +1,15 @@
+import gql from 'graphql-tag';
+
+export const FILE_PICKER__CREATE_FILE_MUTATION = gql`
+  mutation FileCreate($data: FileCreateInput!) {
+    fileCreate(data: $data) {
+      id
+      fileId
+      filename
+      provider
+      uploadUrl
+      downloadUrl
+      public
+    }
+  }
+`;
diff --git a/packages/file-input/src/hooks/useFilePicker.ts b/packages/file-input/src/hooks/useFilePicker.ts
new file mode 100644
index 0000000..9bac095
--- /dev/null
+++ b/packages/file-input/src/hooks/useFilePicker.ts
@@ -0,0 +1,240 @@
+import { useState, useCallback, useEffect } from 'react';
+
+import axios from 'axios';
+import { PickerOptions } from 'filestack-js';
+import { useMutation } from 'react-apollo';
+import { useDropzone } from 'react-dropzone';
+
+import { CommonFileInputProps, FileInputState, FileValue } from 'src/types';
+
+import { STEPS, StepType } from './useFilePicker.constants';
+import { FILE_PICKER__CREATE_FILE_MUTATION } from './useFilePicker.gql';
+import { FilePickerState, LocalFile } from './useFilePicker.types';
+
+const uploadFile = (uploadUrl: string, file: File, onProgress: (progress: number) => void) => {
+  return axios.put(uploadUrl, file, {
+    headers: {
+      'Content-Type': file.type,
+    },
+    onUploadProgress: progressEvent => {
+      if (progressEvent.loaded) {
+        onProgress(Math.round(progressEvent.loaded));
+      }
+    },
+  });
+};
+
+type UseFilePickerOptions = {
+  uploadCallback: CommonFileInputProps['onUploadDone'];
+  controlledValue: FileInputState['value'];
+  onChange: CommonFileInputProps['onChange'];
+};
+
+export const useFilePicker = ({
+  uploadCallback,
+  controlledValue,
+  onChange,
+}: UseFilePickerOptions): FilePickerState => {
+  const [fileList, setFileList] = useState<LocalFile[]>([]);
+  const [fileProgressList, setFileProgressList] = useState<number[]>([]);
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [step, setStep] = useState<StepType>(STEPS.select);
+  const [createFile] = useMutation(FILE_PICKER__CREATE_FILE_MUTATION);
+  const [options, setOptions] = useState<PickerOptions>({});
+  const [value, setValue] = useState<FileInputState['value']>(controlledValue);
+  const [originalFile, setOriginalFile] = useState<FileInputState['originalFile']>(null);
+  const [error, setError] = useState<FileInputState['error']>(null);
+
+  useEffect(() => {
+    setValue(controlledValue);
+  }, [controlledValue]);
+
+  const addFiles = useCallback(
+    (files: File[]) => {
+      const filesWithLocalPath = files.map(file => {
+        if (file.type.includes('image')) {
+          return Object.assign(file, { localPath: URL.createObjectURL(file) });
+        }
+
+        return Object.assign(file, { localPath: undefined });;
+      });
+      let newList = [...fileList, ...filesWithLocalPath];
+      if (options && options.maxFiles) {
+        newList = newList.slice(0, options.maxFiles);
+      }
+
+      setFileList(newList);
+      setStep(STEPS.upload);
+    },
+    [fileList, options],
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: addFiles,
+    accept: options && options.accept ? options.accept : undefined,
+    maxFiles: options && options.maxFiles ? options.maxFiles : undefined,
+    maxSize: options && options.maxSize ? options.maxSize : undefined,
+  });
+
+  const showFilePicker = useCallback((pickerOptions: PickerOptions | undefined = {}) => {
+    setOptions(pickerOptions);
+    setFileList([]);
+    setValue(null);
+    setError(null);
+    setOriginalFile(null);
+    setStep(STEPS.select);
+    setOpen(true);
+  }, []);
+
+  const hideFilePicker = useCallback(() => {
+    if (step === STEPS.uploading) {
+      return null;
+    }
+
+    setFileList([]);
+    setStep(STEPS.select);
+    setOpen(false);
+  }, [step]);
+
+  const setUploadMoreStep = useCallback(() => {
+    setStep(STEPS.uploadMore);
+  }, []);
+
+  const setUploadStep = useCallback(() => {
+    setStep(STEPS.upload);
+  }, []);
+
+  const removeFile = useCallback(
+    file => () => {
+      const newFileList = [...fileList];
+      const indexToRemove = newFileList.indexOf(file);
+      if (indexToRemove !== -1) {
+        newFileList.splice(indexToRemove, 1);
+
+        if (newFileList.length === 0) {
+          setStep(STEPS.select);
+        }
+
+        setFileList([...newFileList]);
+      }
+    },
+    [fileList],
+  );
+
+  const onProgress = useCallback(
+    (list) => {
+      let currentList = [...list];
+      return (index: number) => (progress: number) => {
+        const newList = [...currentList];
+        console.log(newList);
+        newList[index] = progress;
+        currentList = [...newList];
+        setFileProgressList(newList);
+      }
+    },
+    [],
+  );
+
+  const handleUploadDone = useCallback(
+    (filesUploaded: FileValue[], file: File[]) => {
+      let newValue: FileInputState['value'] = [...filesUploaded];
+      let newOriginalFile: FileInputState['originalFile'] = [...file];
+
+      const { maxFiles } = options;
+      if (maxFiles === 1) {
+        newValue = newValue[0];
+        newOriginalFile = newOriginalFile[0];
+      }
+
+      setValue(newValue);
+      setOriginalFile(newOriginalFile);
+
+      if (typeof uploadCallback === 'function') {
+        uploadCallback && uploadCallback(newValue, newOriginalFile);
+      }
+
+      if (typeof onChange === 'function') {
+        onChange(newValue, newOriginalFile);
+      }
+
+      hideFilePicker();
+    },
+    [options, uploadCallback, hideFilePicker],
+  );
+
+  const upload = useCallback(() => {
+    const newProgressList = fileList.map(el => 0);
+    setFileProgressList(newProgressList);
+    setStep(STEPS.uploading);
+
+    if (fileList.length === 0) {
+      hideFilePicker();
+    }
+
+    const uploadedFileList: FileValue[] = [];
+    const failedFileList: FileValue[] = [];
+    const uploadedOriginalFileList: File[] = [];
+
+    const handleProgress = onProgress(newProgressList);
+
+    const loadFiles = fileList.map((file, index) => {
+      return createFile({
+        variables: {
+          data: {
+            filename: file.name,
+          },
+        },
+      }).then(async ({ data }) => {
+        const { id, uploadUrl, downloadUrl, fileId, filename, public: isPublic } = data.fileCreate;
+        const res = await uploadFile(uploadUrl, file, handleProgress(index));
+
+        if (res.status === 200) {
+          uploadedFileList.push({
+            id,
+            downloadUrl,
+            fileId,
+            filename,
+            mimetype: file.type,
+            public: isPublic,
+          });
+          uploadedOriginalFileList.push(file);
+        } else {
+          failedFileList.push({
+            id,
+            downloadUrl,
+            fileId,
+            filename,
+            mimetype: file.type,
+            public: isPublic,
+          });
+        }
+      });
+    });
+
+    Promise.all(loadFiles)
+      .then(() => handleUploadDone(uploadedFileList, uploadedOriginalFileList))
+      .catch(setError);
+  }, [createFile, fileList, hideFilePicker, onProgress, handleUploadDone]);
+
+  return {
+    fileList,
+    fileProgressList,
+    setFileList,
+    isOpen,
+    hideFilePicker,
+    showFilePicker,
+    addFiles,
+    removeFile,
+    step,
+    setStep,
+    setUploadMoreStep,
+    setUploadStep,
+    upload,
+    getRootProps,
+    getInputProps,
+    options,
+    value,
+    originalFile,
+    error,
+  };
+};
diff --git a/packages/file-input/src/hooks/useFilePicker.types.ts b/packages/file-input/src/hooks/useFilePicker.types.ts
new file mode 100644
index 0000000..aaf934b
--- /dev/null
+++ b/packages/file-input/src/hooks/useFilePicker.types.ts
@@ -0,0 +1,30 @@
+import { PickerOptions } from 'filestack-js';
+import { DropzoneState } from 'react-dropzone';
+
+import { CommonFileInputProps, FileInputState } from 'src/types';
+
+import { StepType } from './useFilePicker.constants';
+
+export type LocalFile = File & { localPath: string | undefined };
+
+export type FilePickerState = {
+  fileList: LocalFile[];
+  setFileList: (files: LocalFile[]) => void;
+  fileProgressList: number[];
+  addFiles: (files: LocalFile[]) => void;
+  removeFile: (file: LocalFile) => () => void;
+  isOpen: boolean;
+  hideFilePicker: () => void;
+  setStep: (step: StepType) => void;
+  step: StepType;
+  upload: () => void;
+  showFilePicker: (options?: PickerOptions, onUploadDone?: CommonFileInputProps['onUploadDone']) => void;
+  setUploadMoreStep: () => void;
+  setUploadStep: () => void;
+  getRootProps: DropzoneState['getRootProps'];
+  getInputProps: DropzoneState['getInputProps'];
+  options: PickerOptions;
+  value: FileInputState['value'];
+  originalFile: FileInputState['originalFile'];
+  error: FileInputState['error'];
+};
diff --git a/packages/file-input/src/index.ts b/packages/file-input/src/index.ts
index eca4452..4dc17ed 100644
--- a/packages/file-input/src/index.ts
+++ b/packages/file-input/src/index.ts
@@ -1,2 +1,2 @@
 export { FileInput } from './FileInput';
-export * from './types';
+export * from './types';
\ No newline at end of file
diff --git a/packages/file-input/src/types.ts b/packages/file-input/src/types.ts
index fd3decb..9046afe 100644
--- a/packages/file-input/src/types.ts
+++ b/packages/file-input/src/types.ts
@@ -1,4 +1,5 @@
 import { FetchPolicy } from 'apollo-client';
+import { PickerOptions } from 'filestack-js';
 
 export type FileValue = {
   fileId: string;
@@ -6,31 +7,51 @@ export type FileValue = {
   id?: string;
   downloadUrl?: string;
   mimetype?: string;
+  public?: boolean;
 };
 
 export type FileInputValue = FileValue | FileValue[];
 
 export type OriginalFileInputValue = File | File[];
 
-export type FileInputProps = {
+export type RenderPropType = {
+  pick: (options: PickerOptions) => Promise<void>;
+  value: FileInputValue | null;
+  originalFile: OriginalFileInputValue | null;
+  error: Record<string, unknown> | null;
+  loading?: boolean;
+};
+
+export type AWSRenderPropType = Omit<RenderPropType, 'pick'> & {
+  pick: (options: PickerOptions) => void;
+};
+
+export type CommonFileInputProps = {
   onChange?: (value: FileInputValue, originalFile: OriginalFileInputValue) => void;
-  children: (args: {
-    pick: (options: {}) => Promise<void>;
-    value: FileInputValue | null;
-    originalFile: OriginalFileInputValue | null;
-    error: object | null;
-  }) => JSX.Element;
+  children: (args: RenderPropType) => JSX.Element;
   public?: boolean;
   fetchPolicy?: FetchPolicy;
   maxFiles?: number;
   sessionCache?: boolean;
-  onUploadDone?: (value: FileInputValue, originalFile?: OriginalFileInputValue) => Promise<FileInputValue>;
+  onUploadDone?: (
+    value: FileInputValue,
+    originalFile?: OriginalFileInputValue,
+  ) => Promise<FileInputValue>;
   value?: FileInputValue | null;
 };
 
+export type FilestackFileInputProps = CommonFileInputProps & {
+  fallbackOptions?: PickerOptions;
+}
+
+export type AWSFileInputProps = Omit<CommonFileInputProps, 'children'> & {
+  children: (args: AWSRenderPropType) => JSX.Element;
+  fallbackOptions?: PickerOptions;
+};
+
 export type FileInputState = {
   path: string | null;
-  error: object | null;
+  error: Record<string, unknown> | null;
   value: FileInputValue | null;
   originalFile: OriginalFileInputValue | null;
 };
diff --git a/packages/file-input/src/utils/index.ts b/packages/file-input/src/utils/index.ts
new file mode 100644
index 0000000..6dfb1db
--- /dev/null
+++ b/packages/file-input/src/utils/index.ts
@@ -0,0 +1,77 @@
+const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+const BIBYTE_UNITS = ['B', 'kiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+const BIT_UNITS = ['b', 'kbit', 'Mbit', 'Gbit', 'Tbit', 'Pbit', 'Ebit', 'Zbit', 'Ybit'];
+const BIBIT_UNITS = ['b', 'kibit', 'Mibit', 'Gibit', 'Tibit', 'Pibit', 'Eibit', 'Zibit', 'Yibit'];
+
+type OptionType = {
+  bits?: boolean;
+  binary?: boolean;
+  signed?: boolean;
+  minimumFractionDigits?: number;
+  maximumFractionDigits?: number;
+};
+
+const DEFAULT_MAXIMUM_FRACTION = 1;
+
+const getUnits = (options: OptionType) => {
+  if (options.bits) {
+    return options.binary ? BIBIT_UNITS : BIT_UNITS;
+  }
+
+  return options.binary ? BIBYTE_UNITS : BYTE_UNITS;
+};
+
+const getPrefix = (isNegative: boolean, options: OptionType) => {
+  if (isNegative) {
+    return '-';
+  }
+
+  return options.signed ? '+' : '';
+};
+
+export const formatFileSize = (
+  number: number,
+  options: OptionType = { bits: false, binary: false },
+): string => {
+  if (!Number.isFinite(number)) {
+    // eslint-disable-next-line no-console
+    console.error(`Expected a finite number, got ${typeof number}: ${number}`);
+    return '';
+  }
+
+  const UNITS = getUnits(options);
+
+  if (options.signed && number === 0) {
+    return ` 0 ${UNITS[0]}`;
+  }
+
+  const isNegative = number < 0;
+  const prefix = getPrefix(isNegative, options);
+
+  let resultNumber = number;
+  if (isNegative) {
+    resultNumber = -number;
+  }
+
+  const localeOptions = {
+    minimumFractionDigits: options.minimumFractionDigits,
+    maximumFractionDigits: options.maximumFractionDigits || DEFAULT_MAXIMUM_FRACTION,
+  };
+
+  if (resultNumber < 1) {
+    const numberString = resultNumber.toLocaleString(undefined, localeOptions);
+    return `${prefix + numberString} ${UNITS[0]}`;
+  }
+
+  const log = options.binary
+    ? Math.log(resultNumber) / Math.log(1024)
+    : Math.log10(resultNumber) / 3;
+  const exponent = Math.min(Math.floor(log), UNITS.length - 1);
+
+  resultNumber /= Math.pow(options.binary ? 1024 : 1000, exponent);
+
+  const numberString = resultNumber.toLocaleString(undefined, localeOptions);
+  const unit = UNITS[exponent];
+
+  return `${prefix + numberString} ${unit}`;
+};
diff --git a/yarn.lock b/yarn.lock
index 94e0695..b727446 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -357,6 +357,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-module-imports@^7.12.13":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
+  integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
 "@babel/helper-module-transforms@^7.1.0", "@babel/helper-module-transforms@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.5.5.tgz#f84ff8a09038dcbca1fd4355661a500937165b4a"
@@ -381,6 +388,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
@@ -424,6 +436,11 @@
   dependencies:
     "@babel/types" "^7.4.4"
 
+"@babel/helper-validator-identifier@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
+  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
+
 "@babel/helper-wrap-function@^7.1.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
@@ -567,6 +584,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
+  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-syntax-jsx@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz#0b85a3b4bc7cdf4cc4b8bf236335b907ca22e7c7"
@@ -1060,6 +1084,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.7.2":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@@ -1093,6 +1124,14 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
+  integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.5"
+    to-fast-properties "^2.0.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -1111,6 +1150,87 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
+"@emotion/babel-plugin@^11.0.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
+  integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "^4.0.3"
+
+"@emotion/cache@^11.1.3":
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
+  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.3"
+
+"@emotion/css@^11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.1.3.tgz#9ed44478b19e5d281ccbbd46d74d123d59be793f"
+  integrity sha512-RSQP59qtCNTf5NWD6xM08xsQdCZmVYnX/panPYvB6LQAPKQB6GL49Njf0EMbS3CyDtrlWsBcmqBtysFvfWT3rA==
+  dependencies:
+    "@emotion/babel-plugin" "^11.0.0"
+    "@emotion/cache" "^11.1.3"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
+  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@evocateur/libnpmaccess@^3.1.2":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz#ecf7f6ce6b004e9f942b098d92200be4a4b1c845"
@@ -2370,6 +2490,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.36.tgz#5637905dbb15c30a33a3c65b9ef7c20e3c85ebad"
   integrity sha512-kjivUwDJfIjngzbhooRnOLhGYz6oRFi+L+EpMjxroDYXwDw9lHrJJ43E+dJ6KAd3V3WxWAJ/qZE9XKYHhjPOFQ==
 
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@types/prop-types@*":
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.2.tgz#0e58ae66773d7fd7c372a493aff740878ec9ceaa"
@@ -3162,6 +3287,11 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 auth0-js@^9.11.1:
   version "9.15.0"
   resolved "https://registry.yarnpkg.com/auth0-js/-/auth0-js-9.15.0.tgz#ebb88aa87e9aee313f084e3295a57eadaf2d4f8c"
@@ -3297,6 +3427,15 @@ babel-plugin-macros@2.6.1:
     cosmiconfig "^5.2.0"
     resolve "^1.10.0"
 
+babel-plugin-macros@^2.6.1:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
 babel-plugin-named-asset-import@^0.3.2:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd"
@@ -4314,6 +4453,13 @@ convert-source-map@^1.1.0, convert-source-map@^1.4.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.5.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -4384,6 +4530,17 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.1.0, cosmiconfig@^5.2.0, cosmiconfig@^5.2.1:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
 create-ecdh@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
@@ -4666,6 +4823,11 @@ csstype@^2.2.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
   integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
 
+csstype@^3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -5379,6 +5541,11 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^1.11.0, escodegen@^1.9.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.12.0.tgz#f763daf840af172bb3a2b6dd7219c0e17f7ff541"
@@ -5868,6 +6035,13 @@ file-loader@3.0.1:
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
 
+file-selector@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80"
+  integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==
+  dependencies:
+    tslib "^2.0.3"
+
 file-type@^10.0.0:
   version "10.11.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-10.11.0.tgz#2961d09e4675b9fb9a3ee6b69e9cd23f43fd1890"
@@ -5954,6 +6128,11 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@3.0.0, find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -6942,6 +7121,14 @@ import-fresh@^3.0.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-fresh@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
@@ -7189,6 +7376,13 @@ is-color-stop@^1.0.0:
     rgb-regex "^1.0.1"
     rgba-regex "^1.0.0"
 
+is-core-module@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491"
+  integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -8061,6 +8255,11 @@ json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-bet
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -8259,6 +8458,11 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -9675,6 +9879,16 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 parse-path@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.1.tgz#0ec769704949778cb3b8eda5e994c32073a1adff"
@@ -9812,6 +10026,11 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
 pbkdf2@^3.0.3:
   version "3.0.17"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
@@ -10964,6 +11183,15 @@ react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
+react-dropzone@^11.3.4:
+  version "11.3.4"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.3.4.tgz#aeb098df5c4491e165042c9f0b5e2e7185484740"
+  integrity sha512-B1nzNRZ4F1cnrfEC0T6KXeBN1mCPinu4JCoTrp7NjB+442KSPxqfDrw41QIA2kAwlYs1+wj/0BTedeM5hc2+xw==
+  dependencies:
+    attr-accept "^2.2.1"
+    file-selector "^0.2.2"
+    prop-types "^15.7.2"
+
 react-error-overlay@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.3.tgz#c378c4b0a21e88b2e159a3e62b2f531fd63bf60d"
@@ -11531,6 +11759,14 @@ resolve@1.x, resolve@^1.10.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1, re
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.12.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -12052,7 +12288,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
-source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -12395,6 +12631,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@^4.0.3:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 superagent@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/superagent/-/superagent-5.3.1.tgz#d62f3234d76b8138c1320e90fa83dc1850ccabf1"
@@ -12809,6 +13050,11 @@ tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
+tslib@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslint-config-prettier@^1.18.0:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz#75f140bde947d35d8f0d238e0ebf809d64592c37"
@@ -13727,6 +13973,11 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.7.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yargs-parser@10.x, yargs-parser@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"