File plugin


$ yarn add @aomao/plugin-file

Add to engine

import Engine, {EngineInterface} from'@aomao/engine';
import File, {FileComponent, FileUploader} from'@aomao/plugin-file';
new Engine(...,{ plugins:[ File, FileUploader], cards:[ FileComponent ]})

FileUploader plugin main functions: select files, upload files

File optional

onBeforeRender can modify the address when previewing nearby or downloading attachments

onBeforeRender?: (action:'download' |'preview', url: string, editor: EditorInterface) => string;

onDownload Triggered when the download attachment is clicked, by default the address link is used to jump

onDownload?: (url: string, value: FileValue) => void;

onPreview Triggered when the preview attachment is clicked, the default URL link is used to jump

onPreview?: (url: string, value: FileValue) => void;

FileUploader optional

//Use configuration
new Engine(...,{
//...Related configuration

File Upload

action: upload address, always use POST request

crossOrigin: Whether to cross-origin

withCredentials: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials

headers: request header

contentType: File upload is uploaded in multipart/form-data; type by default

accept: Restrict the file types selected by the user's file selection box, default * all

limitSize: Limit the file size selected by the user. If the file size exceeds the limit, no upload will be requested. Default: 1024 * 1024 * 5 5M

multiple: false can only upload one file at a time, true defaults to a maximum of 100 files at a time. You can specify the specific number, but the file selection box cannot be limited, only the first number of uploads can be limited when uploading

data: POST these data together to the server when the file is uploaded

name: When file upload request, the name of the request parameter in FormData, the default is file

* File upload address
* Whether cross-domain
crossOrigin?: boolean;
* https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials
withCredentials?: boolean;
* Request header
headers?: {[key: string]: string} | (() => {[key: string]: string });
* Data return type, default json
type?:'*' |'json' |'xml' |'html' |'text' |'js';
* The name of the FormData when the file is uploaded, the default is file
name?: string
* Additional data upload
data?: Record<string, RequestDataValue> | FormData | (() => Promise<Record<string, RequestDataValue> | FormData>)
* Request type, default multipart/form-data;
* The format of file reception, default "*" all
accept?: string | Array<string>;
* File selection limit
multiple?: boolean | number;
* Upload size limit, default 1024 * 1024 * 5 is 5M
limitSize?: number;

Analyze server response data

Will find by default

File address: response.url || response.data && response.data.url Preview address: response.preview || response.data && response.data.preview After the back-end conversion, you can preview some complex files, and return the address if available Download address: response.download || response.data && response.data.download The download address of the file, you can add permissions, time restrictions, etc., if you have one, you can return the address

result: true upload is successful, data is the file address. false upload failed, data is an error message

* Parse the uploaded Respone and return result: whether it is successful or not, data: success: file address, failure: error message
parse?: (response: any) => {
result: boolean;
data: {
url: string;
preview?: string;
download?: string;
status?: string;


File plugin command

Insert a file

Parameter 1: File status uploading | done | error uploading, uploading completed, uploading error

Parameter 2: When the status is not error, the file is displayed, otherwise an error message is displayed

//'uploading' |'done' |'error'
'File address',
'File name', //optional
'File size', //optional
'Preview address', //optional
'Download address', //optional

FileUploader plugin command

Pop up the file selection box and perform upload

Optional parameter 1: Pass in the file list, these files will be uploaded. Otherwise, the file selection box will pop up and upload it after selecting the file

//Method signature
async execute(files?: Array<File> | MouseEvent):void
//Excuting an order