Revert "593 max image upload"

package.json

@@ -76,7 +76,6 @@
     "react-datepicker": "^2.9.6",
     "react-dev-utils": "^7.0.3",
     "react-dom": "16.8.4",
-    "react-dropzone": "^10.1.10",
     "react-final-form": "6.3.0",
     "react-final-form-arrays": "^3.1.1",
     "react-firebase-file-uploader": "2.4.2",

src/components/Button/index.tsx

@@ -17,7 +17,6 @@ export interface IBtnProps extends React.ButtonHTMLAttributes<HTMLElement> {
   small?: boolean
   medium?: boolean
   large?: boolean
-  hasText?: boolean
 }
 export const small = (props: IBtnProps) =>
   props.small

src/components/FileInfo/FileInfo.tsx

@@ -5,7 +5,7 @@ import { IUploadedFileMeta } from 'src/stores/storage'
 import { FileDetails } from './FileDetails'
 
 interface IProps {
-  file: File | IUploadedFileMeta | null
+  file: File | IUploadedFileMeta
   allowDownload?: boolean
 }
 interface IState {
@@ -17,8 +17,8 @@ export class FileInfo extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
     this.state = {
-      glyph: props.file ? this.getGlyph(props.file.type) : 'image',
-      size: props.file ? bytesToSize(props.file.size) : '0',
+      glyph: this.getGlyph(props.file.type),
+      size: bytesToSize(props.file.size),
     }
   }
 
@@ -38,11 +38,6 @@ export class FileInfo extends React.Component<IProps, IState> {
     const { file, allowDownload } = this.props
     const { glyph, size } = this.state
     const meta = file as IUploadedFileMeta
-
-    if (!file) {
-      return null
-    }
-
     return (
       <>
         {allowDownload && meta.downloadUrl ? (

src/components/Form/ImageInput.field.tsx

@@ -10,8 +10,8 @@ export const ImageInputField = ({ input, meta, ...rest }: IFieldProps) => (
         {...rest}
         // as validation happens on blur also want to artificially trigger when values change
         // (no native blur event)
-        onFilesChange={file => {
-          input.onChange(file)
+        onFilesChange={files => {
+          input.onChange(files)
           input.onBlur()
         }}
       />

src/components/Form/elements.ts

@@ -42,7 +42,6 @@ export const TextAreaDisabled = styled.div`
 
 // generic container used for some custom component fields
 export const FieldContainer = styled.div<IFormElement>`
-  height: 100%;
   width: 100%;
   ${inputStyles};
   border: none;

src/components/ImageInput/ImageConverter.tsx

@@ -23,11 +23,10 @@ const imageSizes = {
 }
 
 const PreviewImage = styled(Flex)`
-  height: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  height: 100%;
+  height: 100px;
   width: 100%;
   border-radius: 5px;
   border: 1px solid #ececec;
@@ -87,19 +86,17 @@ export class ImageConverter extends React.Component<IProps, IState> {
   render() {
     const { convertedFile } = this.state
 
-    if (!convertedFile) {
-      return null
-    }
-
-    return (
-      <PreviewImage
-        style={{
-          backgroundImage: `url(${convertedFile.objectUrl})`,
-        }}
-        id="preview"
-        onClick={() => this.props.onImgClicked(convertedFile)}
-      />
-    )
+    return convertedFile ? (
+      <Flex px={1} width={1 / 4}>
+        <PreviewImage
+          style={{
+            backgroundImage: `url(${convertedFile.objectUrl})`,
+          }}
+          id="preview"
+          onClick={() => this.props.onImgClicked(convertedFile)}
+        />
+      </Flex>
+    ) : null
   }
 }
 ImageConverter.defaultProps = {