diff --git a/app/soapbox/components/ui/file-input/file-input.tsx b/app/soapbox/components/ui/file-input/file-input.tsx
new file mode 100644
index 000000000..48209ee7f
--- /dev/null
+++ b/app/soapbox/components/ui/file-input/file-input.tsx
@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+
+interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name'> { }
+
+const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
+  return (
+    <input
+      {...props}
+      ref={ref}
+      type='file'
+      className='block w-full text-sm text-gray-800 dark:text-slate-200 file:cursor-pointer file:mr-2 file:py-1.5 file:px-3 file:rounded-full file:text-xs file:leading-4 file:font-medium file:border-gray-200 file:border file:border-solid file:bg-white file:text-gray-700 hover:file:bg-gray-100 dark:file:border-slate-700 dark:file:bg-slate-800 dark:file:text-slate-200'
+    />
+  );
+});
+
+export default FileInput;
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 43ff70dd1..24324ee02 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -6,6 +6,7 @@ export { default as Column } from './column/column';
 export { default as Counter } from './counter/counter';
 export { default as Emoji } from './emoji/emoji';
 export { default as EmojiSelector } from './emoji-selector/emoji-selector';
+export { default as FileInput } from './file-input/file-input';
 export { default as Form } from './form/form';
 export { default as FormActions } from './form-actions/form-actions';
 export { default as FormGroup } from './form-group/form-group';