Press "Enter" to skip to content

Parameter of Buefy’s Upload Component Event

The official documentation of Buefy Upload component lacks details of parameters of event.

value: Array. What?

We can figure out the actual value by inspecting source code of upload component.

const value = event.target.files || event.dataTransfer.files
if (value && value.length) {
    if (!this.multiple) {
        // only one element in case drag drop mode and isn't multiple
        if (this.dragDrop && value.length !== 1) return false
        else {
            const file = value[0]
            if (this.checkType(file)) {
                this.newValue = file
            }
        }
    } else {
        // always new values if native or undefined local
        if (this.native || !this.newValue) {
            this.newValue = []
        }
        for (let i = 0; i < value.length; i++) {
            const file = value[i]
            if (this.checkType(file)) {
                this.newValue.push(file)
            }
        }
    }
}
this.$emit('input', this.newValue)

On the first line, the upload component get files from dataTransfer.files, which are essentially collections of HTML5 File object/API. And Electron adds path attribute indicating the absolute path of each file.

Therefore, $event object is a single file object if a signle file upload is allowed and you can access it with file.name, file.type, file.path and so on. And it is a list of file objects if multiple files are allowed.