diff --git a/packages/app/src/components/file-upload/index.tsx b/packages/app/src/components/file-upload/index.tsx
new file mode 100644
index 0000000000..dccd37bd87
--- /dev/null
+++ b/packages/app/src/components/file-upload/index.tsx
@@ -0,0 +1,47 @@
+import Button from '@/ui/button/button';
+import { FC, useRef, ChangeEvent, ReactElement } from 'react';
+import { styled } from '@/styles';
+interface Props {
+  uploadType?: string;
+  view?: ReactElement;
+  accept?: string;
+  fileChange: (file: File) => void;
+}
+export const Upload: FC<Props> = props => {
+  const { fileChange, accept } = props;
+  const input_ref = useRef<HTMLInputElement>(null);
+  const _chooseFile = () => {
+    if (input_ref.current) {
+      input_ref.current.click();
+    }
+  };
+  const _handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) {
+      return;
+    }
+    const file = files[0];
+    fileChange(file);
+    if (input_ref.current) {
+      input_ref.current.value = '';
+    }
+  };
+  return (
+    <UploadStyle onClick={_chooseFile}>
+      {props.view ?? <Button>Upload</Button>}
+      <input
+        ref={input_ref}
+        type="file"
+        style={{ display: 'none' }}
+        onChange={_handleInputChange}
+        accept={accept}
+      />
+    </UploadStyle>
+  );
+};
+
+const UploadStyle = styled('div')(() => {
+  return {
+    display: 'inline-block',
+  };
+});
diff --git a/packages/app/src/components/workspace-setting/general/general.tsx b/packages/app/src/components/workspace-setting/general/general.tsx
index 7abe5dd90c..34673b9955 100644
--- a/packages/app/src/components/workspace-setting/general/general.tsx
+++ b/packages/app/src/components/workspace-setting/general/general.tsx
@@ -16,6 +16,7 @@ import { WorkspaceDelete } from './delete';
 import { Workspace as StoreWorkspace } from '@blocksuite/store';
 import { debounce } from '@/utils';
 import { WorkspaceLeave } from './leave';
+import { Upload } from '@/components/file-upload';
 
 export const GeneralPage = ({
   workspace,
@@ -71,7 +72,14 @@ export const GeneralPage = ({
 
   return workspace ? (
     <div>
-      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
+      <StyledSettingH2 marginTop={56}>
+        Workspace Avatar
+        <Upload
+          fileChange={file => {
+            console.log(file);
+          }}
+        ></Upload>
+      </StyledSettingH2>
       <StyledSettingAvatarContent>
         <StyledSettingAvatar
           alt="workspace avatar"