From faf5ddce1bc25397f69744a949f744a78aca0ad7 Mon Sep 17 00:00:00 2001
From: WmW <48251883+nullptr-z@users.noreply.github.com>
Date: Fri, 4 Mar 2022 12:22:05 +0800
Subject: [PATCH] =?UTF-8?q?docs(FileInput):=20=E5=A2=9E=E5=8A=A0=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E8=A7=88=E7=A4=BA=E4=BE=8B=20#601=20(#609)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-file-input/README.md           | 50 +++++++++++++++++--
 .../routes/components/file-input/index.tsx    |  4 +-
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/packages/react-file-input/README.md b/packages/react-file-input/README.md
index 0c83d378b7..e95a582132 100644
--- a/packages/react-file-input/README.md
+++ b/packages/react-file-input/README.md
@@ -107,6 +107,48 @@ ReactDOM.render(
 );
 ```
 
+### 图片预览
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { FileInput, Overlay } from 'uiw';
+
+const Demo=()=>{
+  const [visible,visibleSet]=React.useState(false)
+  const [curfile,curFileSet]=React.useState(null)
+  console.log('curfile',curfile)
+
+   return(
+     <>
+      <Overlay
+        isOpen={visible}
+        onClosed={()=>visibleSet(false)}
+      >
+        <img src={`${curfile?.dataURL}`} alt={`${curfile?.name}`} />
+      </Overlay>
+      <FileInput
+        uploadType="picture"
+        size="large"
+        onPreview={(file) =>{
+          visibleSet(true)
+          curFileSet(file)
+        }}
+        value={[
+          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
+        ]}
+      >
+        <Icon type="plus" />
+      </FileInput>
+    </>
+   )
+}
+
+ReactDOM.render(<Demo/>   ,_mount_
+);
+```
+
 ### 图片列表样式
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
@@ -173,12 +215,12 @@ import { Form, Row, Col, Icon } from 'uiw';
 
 ReactDOM.render(
   <div>
-    <Form 
+    <Form
       fields={{
         picture1: {
           label: '图片墙',
           initialValue: [
-            { 
+            {
               dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
             }
           ],
@@ -191,7 +233,7 @@ ReactDOM.render(
         picture2: {
           label: '图片列表',
           initialValue: [
-            { 
+            {
               dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
             }
           ],
@@ -238,7 +280,7 @@ ReactDOM.render(
 );
 ```
 
-## Props 
+## Props
 
 - `uploadType: input` 基础输入框上传
 
diff --git a/website/src/routes/components/file-input/index.tsx b/website/src/routes/components/file-input/index.tsx
index fc2374d6de..caaaea16ee 100755
--- a/website/src/routes/components/file-input/index.tsx
+++ b/website/src/routes/components/file-input/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { FileInput, Button, Icon, Form, Row, Col } from 'uiw';
+import { FileInput, Overlay, Button, Icon, Form, Row, Col } from 'uiw';
 import Markdown from '../../../components/Markdown';
 
 export default function Page() {
   return (
     <Markdown
       path="https://github.com/uiwjs/uiw/tree/master/packages/react-file-input/README.md"
-      dependencies={{ FileInput, Button, Icon, Form, Row, Col }}
+      dependencies={{ FileInput, Button, Overlay, Icon, Form, Row, Col }}
       renderPage={async () => {
         const md = await import('uiw/node_modules/@uiw/react-file-input/README.md');
         return md.default || md;