docs: Upload demo add import React statement

components/upload/demo/avatar.md

@@ -18,6 +18,7 @@ Click to upload user's avatar, and validate size and format of picture with `bef
 > The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](https://upload-react-component.vercel.app/demo/before-upload#beforeupload)
 
 ```tsx
+import React, { useState } from 'react';
 import { Upload, message } from 'antd';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import type { UploadChangeParam } from 'antd/es/upload';
@@ -42,8 +43,8 @@ const beforeUpload = (file: RcFile) => {
 };
 
 const App = () => {
-  const [loading, setLoading] = React.useState(false);
-  const [imageUrl, setImageUrl] = React.useState<string>();
+  const [loading, setLoading] = useState(false);
+  const [imageUrl, setImageUrl] = useState<string>();
 
   const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
     if (info.file.status === 'uploading') {

components/upload/demo/basic.md

@@ -14,6 +14,7 @@ title:
 Classic mode. File selection dialog pops up when upload button is clicked.
 
 ```tsx
+import React from 'react';
 import { Upload, message, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';

components/upload/demo/crop-image.md

@@ -14,12 +14,13 @@ title:
 Use [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) to crop image before uploading.
 
 ```tsx
+import React, { useState } from 'react';
 import { Upload } from 'antd';
 import ImgCrop from 'antd-img-crop';
 import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
 
 const App = () => {
-  const [fileList, setFileList] = React.useState<UploadFile[]>([
+  const [fileList, setFileList] = useState<UploadFile[]>([
     {
       uid: '-1',
       name: 'image.png',

components/upload/demo/customize-progress-bar.md

@@ -14,6 +14,7 @@ title:
 Use `progress` for customize progress bar.
 
 ```tsx
+import React from 'react';
 import { Upload, message, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';

components/upload/demo/defaultFileList.md

@@ -14,6 +14,7 @@ title:
 Use `defaultFileList` for uploaded files when page init.
 
 ```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';

components/upload/demo/directory.md

@@ -14,6 +14,7 @@ title:
 You can select and upload a whole directory.
 
 ```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 

components/upload/demo/drag-sorting.md

@@ -14,7 +14,7 @@ title:
 By using `itemRender`, we can integrate upload with react-dnd to implement drag sorting of uploadList.
 
 ```tsx
-import { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Upload, Button, Tooltip } from 'antd';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';

components/upload/demo/drag.md

@@ -18,6 +18,7 @@ You can drag files to a specific area, to upload. Alternatively, you can also up
 We can upload serveral files at once in modern browsers by giving the input the `multiple` attribute.
 
 ```tsx
+import React from 'react';
 import { Upload, message } from 'antd';
 import { InboxOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';

components/upload/demo/file-type.md

@@ -15,7 +15,7 @@ title:
 Displays the corresponding by default by type icon
 
 ```tsx
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Upload, Modal } from 'antd';
 import {
   LoadingOutlined,

components/upload/demo/fileList.md

@@ -22,13 +22,14 @@ You can gain full control over filelist by configuring `fileList`. You can accom
 2. read from response and show file link.
 
 ```tsx
+import React, { useState } from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadFile } from 'antd/es/upload/interface';
 import type { UploadProps } from 'antd';
 
 const App = () => {
-  const [fileList, setFileList] = React.useState<UploadFile[]>([
+  const [fileList, setFileList] = useState<UploadFile[]>([
     {
       uid: '-1',
       name: 'xxx.png',

components/upload/demo/max-count.md

@@ -14,6 +14,7 @@ title:
 Limit files with `maxCount`. Will replace current one when `maxCount` is `1`.
 
 ```tsx
+import React from 'react';
 import { Upload, Button, Space } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 

components/upload/demo/picture-card.md

@@ -14,7 +14,7 @@ title:
 After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
 
 ```tsx
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Upload, Modal } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import type { UploadFile } from 'antd/es/upload/interface';

components/upload/demo/picture-style.md

@@ -14,6 +14,7 @@ title:
 If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
 
 ```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadFile } from 'antd/es/upload/interface';

components/upload/demo/preview-file.md

@@ -14,6 +14,7 @@ title:
 Customize local preview. Can handle with non-image format files such as video.
 
 ```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';

components/upload/demo/transform-file.md

@@ -14,6 +14,7 @@ title:
 Use `beforeUpload` for transform file before request such as add a watermark.
 
 ```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';

components/upload/demo/upload-custom-action-icon.md

@@ -14,6 +14,7 @@ title:
 Use `showUploadList` for custom action icons of files.
 
 ```tsx
+import React from 'react';
 import { Upload, Button } from 'antd';
 import { UploadOutlined, StarOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';

components/upload/demo/upload-manually.md

@@ -14,7 +14,7 @@ title:
 Upload files manually after `beforeUpload` returns `false`.
 
 ```tsx
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Upload, Button, message } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';

components/upload/demo/upload-png-only.md

@@ -14,6 +14,7 @@ title:
 `beforeUpload` only prevent upload behavior when return false or reject promise, the prevented file would still show in file list. Here is the example you can keep prevented files out of list by return `UPLOAD.LIST_IGNORE`.
 
 ```tsx
+import React from 'react';
 import { Upload, Button, message } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';

components/upload/demo/upload-with-aliyun-oss.md

@@ -14,6 +14,7 @@ title:
 Use Aliyun OSS upload example.
 
 ```tsx
+import React, { useState } from 'react';
 import { Form, Upload, message, Button } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';
@@ -34,7 +35,7 @@ interface AliyunOSSUploadProps {
 }
 
 const AliyunOSSUpload = ({ value, onChange }: AliyunOSSUploadProps) => {
-  const [OSSData, setOSSData] = React.useState<OSSDataType>();
+  const [OSSData, setOSSData] = useState<OSSDataType>();
 
   // Mock get OSS api
   // https://help.aliyun.com/document_detail/31988.html