Uploader

Demos

File upload

Set the type prop to file to use the file upload mode.

Normal size

demo-file1.txt
demo-file2.txt

Small size

demo-file1.txt
demo-file2.txt

<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-uploader
      v-model="files"
      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
    />
  </section>
  <section>
    <h4>Small size</h4>
    <veui-uploader
      v-model="files2"
      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
      ui="s"
    />
  </section>
</article>
</template>

<script>
import { Uploader } from 'veui'
import { cloneDeep } from 'lodash'

export default {
  components: {
    'veui-uploader': Uploader
  },
  data () {
    let files = [
      {
        name: 'demo-file1.txt',
        src: '/file/demo-file1.txt',
        key: 0
      },
      {
        name: 'demo-file2.txt',
        src: '/file/demo-file2.txt',
        key: 1
      }
    ]
    return {
      files,
      files2: cloneDeep(files)
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

section {
  width: 45%;
}
</style>

Image upload

Set the type prop to image to use the image upload mode.

Normal size

Small size

Edit this page on GitHubEdit

<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-uploader
      v-model="images"
      type="image"
      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
    >
      <template #desc>
        Normal size
      </template>
    </veui-uploader>
  </section>
  <section>
    <h4>Small size</h4>
    <veui-uploader
      v-model="images2"
      type="image"
      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
      ui="s"
    >
      <template #desc>
        Small size
      </template>
    </veui-uploader>
  </section>
</article>
</template>

<script>
import { Uploader } from 'veui'
import { cloneDeep } from 'lodash'

export default {
  components: {
    'veui-uploader': Uploader
  },
  data () {
    let images = [
      {
        src: '/images/development/uploader/demo-image1.jpg',
        key: 0
      },
      {
        src: '/images/development/uploader/demo-image2.jpg',
        key: 1
      }
    ]
    return {
      images,
      images2: cloneDeep(images)
    }
  }
}
</script>

API

Props

Name Type Default Description

ui

string=

Style variants.

Value	Description
`s`	Small.
`m`	Medium.

type

string

'file'

The type of the uploader.

Value	Description
`file`	File upload.
`image`	Image upload.

value

Object | Array<Object>

Returns an array of file objects when multiple is true. When max-count is set to a value greater than 1, then multiple treated as true.

The type of single file is {name: string, src: string, ...}, and fields added inside convert-response.

key-field string 'key' Used to specify a unique key for the file object, as a basis for correctly handling the order of the file list when the data changes.

name string 'file' The name of native <input> elements.

action string - Upload URL.

headers Object uploader.headers Extra HTTP headers. Can be globally configured.

with-credentials boolean true The same as the withCredentials option of XMLHttpRequest.

request-mode

string

uploader.requestMode

The request mode of the uploader. Can be globally configured.

Value	Description
`xhr`	Upload with `XMLHttpRequest`.
`iframe`	Upload with `<iframe>`.

iframe-mode

string

uploader.iframeMode

To specify the callback mode when request-mode is iframe. Can be globally configured.

Value	Description
`postmessage`	Callback with `PostMessage`.
`callback`	Callback with callback functions registered according to `callback-namespace` on `window`.

callback-namespace string uploader.callbackNamespace The namespace of the callback function when request-mode is 'iframe' and iframe-mode is 'callback', will be placed under the window object. Can be globally configured.

data-type

string

'json'

To specify the data type in order to parse the callback value if it's text content. Can be left empty if callback value is Object.

Value	Description
`json`	The callback text is JSON.
`text`	The callback text is plain text.

convert-response

uploader.convertResponse

Converts response data to standard format that can be consumed by the uploader, in order to allow the uploader to display upload result. The parameter is the callback data. The type of the return value must conform to the following:

Property	Type	Description
`success`	`boolean`	Whether the upload succeeded.
`name`	`string=`	The name of the file. Required when `success` is `true`.
`src`	`string=`	The location of the file. Required when `success` is `true`.
`message`	`string=`	Error message when upload fails. Required when `success` is `false`.

Additional fields can be added to the response data. These data fields will be included in the value prop and parameter of callbacks change, success, failure, remove and progress events. Can be globally configured.

accept string - The same as the accept attribute of native <input> elements. Works as an extra layer of validation on top of browsers' file filter. Will skip validation when MIME type doesn't match file extension, eg. application/msword.

max-count number - The maximum file count.

max-size number | string - The maximun size of a single file. When being a number, the unit will be byte. When being a string, units can be added after numbers, including b / kb / mb / gb / tb.

payload Object - The extra data payload to be sent together with the file.

progress

string

'text'

To specify how to display progress when request-mode is xhr.

Value	Description
`text`	Displays as status text.
`number`	Displays the progress as percentage.
`bar`	Displays th progress as a progress bar.

autoupload boolean true Whether to start upload as soon as a file is selected.

order

string

asc

The order of displaying uploaded files according to start time.

Value	Description
`asc`	Ascending order.
`desc`	Descending order.

upload

function(Object, Object): function

Customizing the upload process in case the value of request-mode is 'custom', the first parameter is the native File object and the second parameter is the object that contains callback functions associated with the upload process, with the following properties.

Property	Type	Description
`onload`	`function`	The upload completion callback function whose arguments is the same as the `convert-response` prop's return value.
`onprogress`	`function`	The callback function for upload progress, the parameter type being `{ loaded: number, total: number }`, `loaded` is the number of bytes that have been uploaded, and `total` is the total number of bytes in the file.
`oncancel`	`function`	The callback to the component when the custom upload is actively cancelled, no parameters.
`onerror`	`function`	The callback for upload error, the parameter type is `{ message: string }` and `message` is the error message.

If upload returns a function, it will be called when the user cancelled proactively or the upload component is destroyed, to abort the custom upload process.

controls

function(Object, Array<Object>): Array<Object>

In image upload mode, it is used to customize the actions on the floating toolbar. The parameter types are (file: Object, defaultControls: Array<Object>), where file is the file related information and defaultControls is the array containing the default actions. It can return an array of different actions depending on the file state. The specific properties for each action item are as follows.

Property	Type	Description
`name`	`string`	The name of the action item. When the button is clicked, an event with the same name will be emitted, with `(file: Object, index: number)` as the callback parameter, `file` is the file object that triggered the event, and `index` is the number of the file in the list.
`icon`	`string`	The icon of the action item.
`disabled`	`boolean=`	Whether the action item is disabled. If this property is undefined, the disabled state of the action item follows the disabled state of the component.

Slots

Name Description

button-label

The content in the upload button.

Default content: file upload for prompt to select a file, and image upload for upload image icon.

upload The area of the upload button in image upload mode.

desc The content of the prompt for the number, format, size, etc. of files.

file

Single file area to customize the file content.

name	type	description
`name`	`string`	The name of the file.
`src`	`string`	The address of the file.
`status`	`string`	The status of the file. `'success'` means the upload was successful; `'uploading'` means the upload is in progress; `'failure'` means the upload failed.
`index`	`number`	The number of the file in the list.

file-before The area before the contents of a single file. The scope argument is the same as the file slot.

file-after The area after the contents of a single file. The scope argument is the same as the file slot.

uploading The area of a single image being uploaded in image upload mode. The scope argument is the same as the file slot.

failure The area of a single image that failed to upload in image upload mode. The scope argument is the same as the file slot.

Events

Name Description

change

Triggers when upload succeeded or a file is removed. The callback parameter list is (value).

Name	Type	Description
`value`	`Object \| Array<Object>`	The `value` of the component.

remove

Triggered when a file is removed. The callback parameter list is (file, index).

Name	Type	Description
`file`	`Object`	The removed file object.
`index`	`number`	The index of the removed file.

file properties

Name	Type	Description
`name`	`string`	The name of the file.
`src`	`string`	The location of the file.
`status`	`string`	The status of the upload process. Can be one of `'success'` / `'uploading'` / `'failure'`.

Fields added from convert-response are also available.

success Triggers when upload succeeded. Shares the same callback parameter list with the remove event.

failure Triggers when upload failed. Shares the same callback parameter list with the remove event.

invalid

Triggered when file validation fails. The callback parameter list is (validity: Object).

Name	Type	Description
`file`	`Object`	The information about the file that failed the validation, being the same type as `file` in the callback parameter of the `remove` event. This property is empty if the validation fails because the number of files selected exceeds the `max-count` limit.
`errors`	`Array<Object>`	Array of all the validation error messages of the file, each item in it is an object that contains validation failure information.

Name	Type	Description
`type`	`string`	The type of validation error, whose enum value can be accessed from the `Uploader.errors` object, eg. `Uploader.errors.SIZE_INVALID`.
`value`	`number \| string \| Object`	The value that doesn't pass validation, can be different types depending on the `type` property.
`message`	`string`	The validation error message.

type	description	`value` type	`value` description
`TYPE_INVALID`	File type validation failure.	`string`	File name.
`SIZE_INVALID`	File size validation failure.	`number`	File size in bytes.
`TOO_MANY_FILES`	The number of selected files exceeds the `max-count` limit.	`number`	Number of files selected.
`CUSTOM_INVALID`	Custom validation failure returned by `validator` prop.	`Object`	File object, same as `remove` event callback parameter.

statuschange

Triggered when the status of the entire uploader changes. The callback parameter list is (status: string).

Value	Description
`empty`	No file is selected.
`uploading`	At least one file is being uploaded.
`failure`	Any file is not being successfully uploaded.
`success`	All files are successfully uploaded.

progress

Triggered when upload progress updated, when request-mode is 'xhr'. The callback parameter list is (file, index, event).

Name	Type	Description
`file`	`Object`	Same as the file parameter of the callback for the `remove` event.
`index`	`number`	The index of the file being uploaded.
`event`	`Event`	Native upload progress event object.

Configs

Key	Type	Default	Description
`uploader.requestMode`	`string`	`'xhr'`	Same as the `request-mode` prop.
`uploader.iframeMode`	`string`	`'xhr'`	Same as the `iframe-mode` prop.
`uploader.callbackNamespace`	`string`	`'veuiUploadResult'`	Same as the `callback-namespace` prop.
`uploader.headers`	`Object`	-	Same as the `headers` prop.
`uploader.convertResponse`	`function(Object): Object`	-	Same as the `convert-response` prop.

Icons

Name	Description
`upload`	Upload file.
`clear`	Remove file.
`success`	Upload succeeded.
`redo`	Retry upload.
`file`	File.
`add`	Add file.
`alert`	Validation failure alert.

Edit this page on GitHubEdit