chowa/es/upload/request.js

UI component library based on React

/**
 * @license chowa v1.1.3
 *
 * Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("../utils");
const tool_1 = require("./tool");
class Request {
    constructor(upload) {
        this.main = upload;
    }
    exec(file) {
        const { action, headers, data, name } = this.main.props;
        const uploadFiles = [].concat(this.main.state.uploadFiles);
        const xhr = new XMLHttpRequest();
        const fd = new FormData();
        const uuid = tool_1.getFileUuid();
        const uploadFile = {
            name: file.name,
            xhr,
            progress: 0,
            file,
            uuid,
            status: 'active',
            params: {}
        };
        uploadFiles.push(uploadFile);
        xhr.addEventListener('error', this.onErrorHandler.bind(this, uuid));
        xhr.addEventListener('readystatechange', this.onReadystateChangeHandler.bind(this, uuid));
        xhr.upload.addEventListener('progress', this.onProgressHandler.bind(this, uuid));
        if (utils_1.isExist(data)) {
            Object.keys(data).forEach((key) => {
                fd.append(key, data[key]);
            });
        }
        fd.append(name, file);
        if (utils_1.isExist(headers)) {
            Object.keys(headers).forEach((key) => {
                xhr.setRequestHeader(key, headers[key]);
            });
        }
        this.main.setState({ uploadFiles }, () => {
            xhr.open('POST', action);
            xhr.send(fd);
        });
    }
    getUploadFile(uuid) {
        const { uploadFiles } = this.main.state;
        const index = uploadFiles.findIndex((uploadFile) => uploadFile.uuid === uuid);
        return {
            uploadFile: Object.assign({}, uploadFiles[index]),
            index
        };
    }
    onReadystateChangeHandler(uuid, e) {
        const { onSuccess } = this.main.props;
        const { uploadFile, index } = this.getUploadFile(uuid);
        if (uploadFile.xhr.readyState !== 4 || uploadFile.xhr.status !== 200) {
            return;
        }
        if (onSuccess) {
            onSuccess(uploadFile.file, e);
        }
        const uploadFiles = [].concat(this.main.state.uploadFiles);
        uploadFile.progress = 100;
        uploadFile.status = 'success';
        if (uploadFile.xhr.getResponseHeader('Content-Type') === 'application/json') {
            uploadFile.params = JSON.parse(uploadFile.xhr.responseText);
        }
        else {
            uploadFile.params = { text: uploadFile.xhr.responseText };
        }
        uploadFiles[index] = uploadFile;
        this.main.setState({ uploadFiles }, this.main.triggerChange);
    }
    onErrorHandler(uuid, e) {
        const uploadFiles = [].concat(this.main.state.uploadFiles);
        const { uploadFile, index } = this.getUploadFile(uuid);
        const { onError } = this.main.props;
        if (onError) {
            onError(uploadFile.file, e);
        }
        uploadFile.status = 'exception';
        uploadFiles[index] = uploadFile;
        this.main.setState({ uploadFiles });
    }
    onProgressHandler(uuid, e) {
        const uploadFiles = [].concat(this.main.state.uploadFiles);
        const { uploadFile, index } = this.getUploadFile(uuid);
        const { onProgress } = this.main.props;
        uploadFile.progress = Math.floor(e.loaded / e.total * 100);
        if (onProgress) {
            onProgress(uploadFile.file, e);
        }
        uploadFiles[index] = uploadFile;
        this.main.setState({ uploadFiles });
    }
}
exports.default = Request;