react-antd-admin-panel/dist/components/builder/Upload.js

Easy prototyping admin panel using React and Antd

import React, { useState } from "react";
import { Button, Row, Upload as UploadAnt } from "antd";
import { UploadOutlined } from "@ant-design/icons/lib";
import axios from 'axios';
const Upload = (props) => {
    var _a, _b;
    let model = props.model;
    const [fileList, setFileList] = useState((_a = model._fileList) !== null && _a !== void 0 ? _a : []);
    const [buttonState, setButtonState] = useState({
        uploadLoading: false,
        uploadDisabled: model._fileWasUploaded,
    });
    let addProps = {
        fileList,
        onRemove: (file) => clearFiles(file),
        beforeUpload: (file) => {
            setFileList([...fileList, file]);
            model._fileList = [...fileList, file];
            return false;
        },
    };
    const clearFiles = (file) => {
        let newFileList = fileList.slice();
        if (file) {
            newFileList.splice(fileList.indexOf(file), 1);
        }
        else {
            newFileList = [];
        }
        setFileList(newFileList);
        setButtonState({
            uploadLoading: false,
            uploadDisabled: false,
        });
        model._fileList = newFileList;
        model._fileWasUploaded = false;
        model._onFileDeleted();
    };
    const handleUpload = () => {
        const formData = new FormData();
        fileList.forEach((file) => {
            formData.append('inspect', file);
        });
        axios({
            method: 'post',
            url: model._url(),
            data: formData,
            headers: model._header ? Object.assign({ 'Content-Type': 'multipart/form-data' }, model._header) : { 'Content-Type': 'multipart/form-data' }
        })
            .then((r) => {
            var _a;
            (_a = model._onThen) === null || _a === void 0 ? void 0 : _a.call(model, r);
            model._fileWasUploaded = true;
            setButtonState({
                uploadLoading: false,
                uploadDisabled: true,
            });
        })
            .catch((r) => {
            var _a;
            (_a = model._onCatch) === null || _a === void 0 ? void 0 : _a.call(model, r);
            model._fileWasUploaded = false;
            setButtonState({
                uploadLoading: false,
                uploadDisabled: false,
            });
        });
    };
    model.clearFiles = () => clearFiles();
    return (React.createElement(Row, { style: (_b = model._style) !== null && _b !== void 0 ? _b : {} },
        React.createElement(UploadAnt, Object.assign({}, addProps),
            React.createElement(Button, { disabled: fileList.length, icon: React.createElement(UploadOutlined, null) }, "Upload Excel-fil (.xlxs)")),
        React.createElement(Button, { type: "primary", onClick: handleUpload, disabled: fileList.length === 0 || buttonState.uploadDisabled, loading: buttonState.uploadLoading, style: { marginLeft: 12 } }, "Upload")));
};
export default Upload;
//# sourceMappingURL=Upload.js.map