+
+);
diff --git a/src/components/ReactFileUtilities/FileUploadButton.tsx b/src/components/ReactFileUtilities/FileUploadButton.tsx
new file mode 100644
index 000000000..4fab9bf34
--- /dev/null
+++ b/src/components/ReactFileUtilities/FileUploadButton.tsx
@@ -0,0 +1,46 @@
+import React, { PropsWithChildren } from 'react';
+
+import { AttachmentIcon } from './icons';
+import { UploadButton } from './UploadButton';
+
+export type FileUploadButtonProps = {
+ handleFiles: (files: FileList | File[]) => void;
+ accepts?: string | string[];
+ disabled?: boolean;
+ multiple?: boolean;
+ resetOnChange?: boolean;
+};
+
+/**
+ * @deprecated will be removed in the next major release
+ */
+export const FileUploadButton = ({
+ disabled = false,
+ multiple = false,
+ children = -
+ {uploads?.map((upload) => (
+
-
+
+ + {upload.file.name} + {upload.state === 'failed' && ( + <> + handleRetry?.(upload.id)} + > + failed ++handleRetry?.(upload.id)}> + retry ++ + )} + + + handleRemove(upload.id))} + > + ✘ + + {upload.state === 'uploading' && ( +++ )} ++
+ ))}
+
+
+
+ );
+};
diff --git a/src/components/ReactFileUtilities/IconButton.tsx b/src/components/ReactFileUtilities/IconButton.tsx
new file mode 100644
index 000000000..47d7f9f99
--- /dev/null
+++ b/src/components/ReactFileUtilities/IconButton.tsx
@@ -0,0 +1,20 @@
+import React, { MouseEventHandler, PropsWithChildren } from 'react';
+
+export type IconButtonProps = {
+ onClick?: MouseEventHandler
+
+ );
+};
diff --git a/src/components/ReactFileUtilities/ImagePreviewer.tsx b/src/components/ReactFileUtilities/ImagePreviewer.tsx
new file mode 100644
index 000000000..74c925b61
--- /dev/null
+++ b/src/components/ReactFileUtilities/ImagePreviewer.tsx
@@ -0,0 +1,80 @@
+import React, { MouseEvent, useCallback } from 'react';
+
+import { LoadingIndicator } from './LoadingIndicator';
+import { Thumbnail } from './Thumbnail';
+import { ThumbnailPlaceholder } from './ThumbnailPlaceholder';
+import { RetryIcon } from './icons';
+
+import type { ImageUpload } from './types';
+import clsx from 'clsx';
+
+type CustomMouseEvent = (id: string, event: MouseEvent
+
+ {children}
+
+
+
+ Drag your files here to add to your post
+
+ {imageUploads?.map((image) => {
+ const url = image.url || image.previewUri;
+ return (
+
+ );
+};
diff --git a/src/components/ReactFileUtilities/ImageUploadButton.tsx b/src/components/ReactFileUtilities/ImageUploadButton.tsx
new file mode 100644
index 000000000..900d62780
--- /dev/null
+++ b/src/components/ReactFileUtilities/ImageUploadButton.tsx
@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from 'react';
+
+import { PictureIcon } from './icons';
+import { UploadButton } from './UploadButton';
+
+export type ImageUploadButtonProps = {
+ handleFiles: (files: File[]) => void;
+ disabled?: boolean;
+ multiple?: boolean;
+ resetOnChange?: boolean;
+};
+
+/**
+ * @deprecated will be removed in the next major release
+ */
+export const ImageUploadButton = ({
+ multiple = false,
+ disabled = false,
+ handleFiles,
+ children =
+ {image.state === 'failed' && (
+
+ )}
+
+ {url && onClose(image.id, event)} image={url} />}
+ {image.state === 'uploading' && (
+
+ );
+ })}
+ {handleFiles && !disabled && (
+
+
+
+);
diff --git a/src/components/ReactFileUtilities/LoadingIndicator.tsx b/src/components/ReactFileUtilities/LoadingIndicator.tsx
new file mode 100644
index 000000000..a276a73d6
--- /dev/null
+++ b/src/components/ReactFileUtilities/LoadingIndicator.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export type LoadingIndicatorProps = {
+ backgroundColor?: string;
+ color?: string;
+ size?: number;
+ width?: number;
+};
+
+export const LoadingIndicator = ({
+ backgroundColor,
+ color,
+ size = 20,
+ width = 2,
+}: LoadingIndicatorProps) => (
+
+);
diff --git a/src/components/ReactFileUtilities/Thumbnail.tsx b/src/components/ReactFileUtilities/Thumbnail.tsx
new file mode 100644
index 000000000..0c8e56fd4
--- /dev/null
+++ b/src/components/ReactFileUtilities/Thumbnail.tsx
@@ -0,0 +1,39 @@
+import React, { MouseEventHandler, useCallback } from 'react';
+
+import { IconButton } from './IconButton';
+import { CloseIcon, FilePlaceholderIcon } from './icons';
+
+export type ThumbnailProps = {
+ image: string;
+ alt?: string;
+ handleClose?: MouseEventHandler
+ 
+ ) : (
+
+ );
+};
diff --git a/src/components/ReactFileUtilities/ThumbnailPlaceholder.tsx b/src/components/ReactFileUtilities/ThumbnailPlaceholder.tsx
new file mode 100644
index 000000000..926ffc220
--- /dev/null
+++ b/src/components/ReactFileUtilities/ThumbnailPlaceholder.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { ImageUploadButton } from './ImageUploadButton';
+
+export type ThumbnailPlaceholderProps = {
+ handleFiles: (files: File[]) => void;
+ multiple: boolean;
+};
+
+export const ThumbnailPlaceholder = ({
+ handleFiles,
+ multiple = false,
+}: ThumbnailPlaceholderProps) => (
+
+ {handleClose ? (
+
+
+ ) : null}
+
+ {image ? (
+
+
+
+