Uploader

Demos

File upload

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

Select file

demo-file1.txt
demo-file2.txt

<template>
<article>
  <veui-uploader
    v-model="files"
    action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
  />
</article>
</template>

<script>
import Uploader from 'veui/components/Uploader'

export default {
  components: {
    'veui-uploader': Uploader
  },
  data () {
    return {
      files: [
        {
          name: 'demo-file1.txt'
        },
        {
          name: 'demo-file2.txt'
        }
      ]
    }
  }
}
</script>

Image upload

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

Replace
Replace

<template>
<article>
  <veui-uploader
    v-model="images"
    type="image"
    action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
    ui="horizontal"
  />
</article>
</template>

<script>
import Uploader from 'veui/components/Uploader'

export default {
  components: {
    'veui-uploader': Uploader
  },
  data () {
    return {
      images: [
        {
          src: '/images/content/uploader/demo-image1.jpg'
        },
        {
          src: '/images/content/uploader/demo-image2.jpg'
        }
      ]
    }
  }
}
</script>

API

Props

Name Type Default Description

type

string

'file'

The type of the uploader.

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

value

Object|Array<Object>

`max-count`	Type
`1`	`Object`
> `1`, or `null`	`Array<Object>`

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

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 with-credentials option of XMLHttpRequest.

request-mode

string

uploader.requestMode

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

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 customized.

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.

extensions Array<string> ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'tif', 'tiff', 'webp', 'apng', 'svg'] To specify all valid file extensions when accept is set to values like 'image/*'.

ui

string

Style variants.

Value	Description
`horizontal`	Horizontal style.

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.

Slots

Name Description

button-label

The content of the uploader button. Suggests to select a file by default.

desc Descriptions of th uploader, usually maximum file count, size or valid formats.

type-invalid

The content of invalid type error message. Suggests the type being invalid by default.

size-invalid

The content of invalid size error message. Suggests the size being invalid by default.

count-overflow

The content displayed when file count exceeds limit. Suggests too many files by default.

success-label

The content of upload success message. Suggests upload succeeded by default.

failure-label

The content of upload failure message. Suggests upload failed by default.

uploading-label

The content displayed during upload when the progress prop is set to text. Suggests uploading by default.

file

The content of each file.

Name	Type	Description
`name`	`string`	The name of the file.
`src`	`string`	The location of the file.
`status`	`string`	The status of the file. Can be one of `'success'`/`'uploading'`/`'failure'`.
`index`	`number`	The index of the file within the file list.

file-before The content before each file. Shares the same slot properties with slot `file'.

file-after The content after each file. Shares the same slot properties with slot `file'.

extra-operation The content of extra operatins when under image upload mode, eg. custom buttons. Shares the same slot properties with slot `file'.

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.

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.

Global config

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.