[bug] The error event only invoked once

[sukonzer]

Type of issue

• Bug report

Uploader type

• Traditional

Note: Support requests cannot be accepted due to lack of time.

Bug Report

Fine Uploader version

{5.16.2}

Browsers where the bug is reproducible

{chrome 66.0.3359.117}

Operating systems where the bug is reproducible

{windows 10 x64}

Exact steps required to reproduce the issue

For example:

1. Click "select file" button.
2. Drag a "xxx.txt" into dropzone area then validation failure .
3. Repeat the above operation.

All relevant Fine Uploader-related code that you have written

<template>
    <div class="parse__wrap">
        <div class="parse__upload">
            <dropzone class="parse__dropzone"
                multiple
                drop-active-class-name="parse__dropzone--active"
                :uploader="uploader"
            >
                <ul class="upload-list clearfix">
                    <li v-for="(id, index) of submittedFiles" :key="id" :index="index + 1">
                        <div :class="['meta', showSuffix(id)]">
                            <p class="filename">
                                <customize-tooltip
                                    placement="top"
                                    :content="uploaderMetnods.getName(id)"
                                >
                                {{uploaderMetnods.getName(id)}}
                                </customize-tooltip>
                            </p>
                            <p class="size">{{showSize(id)}}</p>
                        </div>
                        <i class="delete iconfont icon-shibai" @click.stop="handleDelete(id)"></i>
                    </li>
                </ul>
                <div class="upload-input-box">
                    <file-input
                        multiple
                        :uploader="uploader"
                    >
                        <p class="dz-icon">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </p>
                        <p class="dz-text">拖拽文件到这里，或者
                            <el-button type="primary">选择文件</el-button></p>
                    </file-input>
                </div>
            </dropzone>
        </div>
        <div class="parse__upload--btn">
            <el-button
                type="primary"
                @click="handleUpload"
                :disabled="submittedFiles.length < 1"
            >上传</el-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'
import FineUploaderTraditional from 'fine-uploader-wrappers'
import Dropzone from 'vue-fineuploader/dropzone'
import FileInput from 'vue-fineuploader/file-input'

const PARSE_DOCUMENT_UPLOAD_API = '/xxx/upload' // for example

export default {
    name: 'DocumentParseUpload',
    data() {
        const uploader = new FineUploaderTraditional({
            options: {
                autoUpload: false,
                debug: true,
                validation: {
                    allowedExtensions: ['png', 'gif', 'jpg'],
                    itemLimit: 100,
                    sizeLimit: 104857600,
                },
                messages: {
                    emptyError: '{file} 大小不能为空',
                    typeError: '{file} 格式不支持，支持的格式参照温馨提示',
                    sizeError: '{file} 大小超出限制，每次上传文件总大小不能大于100M',
                },
            },
        })
        return {
            submittedFiles: [],
            uploader,
            uploaderMetnods: uploader.methods,
        }
    },
    methods: {
        showSuffix(id) {
            const nameArray = this.uploaderMetnods.getName(id).split('.')
            return nameArray[nameArray.length - 1]
        },
        showSize(id) {
            const size = this.uploaderMetnods.getSize(id)
            return size ? `${(size / 1024).toFixed(2)}KB` : ''
        },
        clearStored() {
            this.uploaderMetnods.clearStoredFiles()
            this.submittedFiles = []
        },
        handleUpload() {
            this.upload()
                .then(({ status, data: { error_msg: errorMsg } }) => {
                    this.clearStored()
                    if (status === 200) {
                        this.$router.push({ path: '/parse/loop' })
                    } else {
                        this.$message({
                            type: 'error',
                            message: errorMsg,
                        })
                    }
                })
        },
        upload() {
            const formData = new FormData()
            this.submittedFiles.forEach((id) => {
                formData.append('file', this.uploaderMetnods.getFile(id))
            })
            const rt = axios.post(PARSE_DOCUMENT_UPLOAD_API, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            })
            return rt
        },
        handleDelete(id) {
            this.uploaderMetnods.cancel(id)
            const idx = _.findIndex(this.submittedFiles, key => key === id)
            this.submittedFiles.splice(idx, 1)
        },
    },
    mounted() {
        this.uploader.on('submitted', (id) => {
            this.submittedFiles.push(id)
        })
        this.uploader.on('error', (id, name, errorReason) => {
            if (_.isEmpty(name)) return
            this.$message.error(errorReason)
        })
    },
    components: {
        Dropzone,
        FileInput,
    },
}
</script>

Detailed explanation of the problem

1. Do not support batch request about oncePost options.
2. The error event only invoked once when multi time selected the same format file of validation failure.

[rnicholus]

Thanks for the report. I don't have time to fix this right now, or even look into it. But I'd love to see a PR, if you have the time.