@aliretail/react-materials-components
Version:
70 lines (66 loc) • 1.67 kB
Markdown
---
title: Upload
order: 120
---
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const { Upload, SchemaForm, SchemaMarkupField: Field, createFormActions } = FormComponents;
const App = () => {
const formValue = {
imagePreview:
'https://img.alicdn.com/imgextra/i3/O1CN01AKswH11IZRteGQ6Jq_!!6000000000907-2-tps-754-1778.png',
defaultPreview:
'https://img.alicdn.com/imgextra/i3/O1CN01AKswH11IZRteGQ6Jq_!!6000000000907-2-tps-754-1778.png',
};
return (
<SchemaForm components={{ Upload }} onChange={console.log} value={formValue}>
<Field
x-component="Upload"
title="Card Upload"
name="upload1"
x-component-props={{
listType: 'card',
}}
/>
<Field
x-component="Upload"
title="Dragger Upload"
name="upload2"
x-component-props={{
listType: 'dragger',
}}
/>
<Field
x-component="Upload"
title="Text Upload"
name="upload3"
x-component-props={{
listType: 'text',
}}
/>
<Field
x-component="Upload"
title="defaultPreview"
name="defaultPreview"
x-component-props={{
listType: 'card',
isPreview: true,
}}
/>
<Field
x-component="Upload"
title="imagePreview"
name="imagePreview"
x-component-props={{
listType: 'card',
isPreview: true,
isImage: true,
}}
/>
</SchemaForm>
);
};
ReactDOM.render(<App />, mountNode);
```