myprojectpackageprav/dist/esm/components/upload/file-upload-backup.js

My package in npm

import React, { useState } from 'react';
import InputLabel from '../../utils/controls/input-label';
import './fileupload.css';
function handleFile(files) {
    //     alert("Number of files: " + files.length);
}
// drag drop file component
var FileUpload = function (inputProps) {
    var _a, _b;
    var _c = useState('No file chosen'), fileName = _c[0], setFileName = _c[1];
    // export default function FileUpload () {
    // drag state
    var _d = React.useState(false), dragActive = _d[0], setDragActive = _d[1];
    // ref
    var inputRef = React.useRef(null);
    // handle drag events
    var handleDrag = function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (e.type === "dragenter" || e.type === "dragover") {
            setDragActive(true);
        }
        else if (e.type === "dragleave") {
            setDragActive(false);
        }
    };
    // triggers when file is dropped
    var handleDrop = function (e) {
        e.preventDefault();
        e.stopPropagation();
        setDragActive(false);
        setFileName(e.target.files[0].name);
        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            handleFile(e.dataTransfer.files);
            setFileName(e.target.files[0].name);
        }
    };
    // triggers when file is selected with click
    var handleChange = function (e) {
        setFileName(e.target.files[0].name);
        e.preventDefault();
        if (e.target.files && e.target.files[0]) {
            handleFile(e.target.files);
        }
    };
    // triggers the input when the button is clicked
    var onButtonClick = function () {
        inputRef.current.click();
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: inputProps === null || inputProps === void 0 ? void 0 : inputProps.formClassName },
            (inputProps === null || inputProps === void 0 ? void 0 : inputProps.label) && React.createElement(InputLabel, { labelProps: { htmlFor: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputProps) === null || _a === void 0 ? void 0 : _a.id }, className: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputProps) === null || _b === void 0 ? void 0 : _b.className, label: inputProps === null || inputProps === void 0 ? void 0 : inputProps.label, infoLabel: inputProps === null || inputProps === void 0 ? void 0 : inputProps.info, isinfoLabel: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isInfo, isinfoIcon: inputProps === null || inputProps === void 0 ? void 0 : inputProps.infoIcon, isinfoClassName: inputProps === null || inputProps === void 0 ? void 0 : inputProps.infoClassName, mandatory: inputProps === null || inputProps === void 0 ? void 0 : inputProps.isMandatory }),
            React.createElement("form", { id: "form-file-upload", onDragEnter: handleDrag, onSubmit: function (e) { return e.preventDefault(); } },
                React.createElement("input", { ref: inputRef, type: "file", id: "input-file-upload", multiple: true, onChange: handleChange }),
                React.createElement("label", { id: "label-file-upload", htmlFor: "input-file-upload", className: dragActive ? "drag-active" : "" },
                    React.createElement("div", null,
                        React.createElement("button", { className: "upload-button", onClick: onButtonClick, title: 'Choose/Drag files' }, "Choose/Drag files"))),
                dragActive && React.createElement("div", { id: "drag-file-element", onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }),
                React.createElement("p", null, fileName)),
            React.createElement("div", { className: 'sourcesansproSemiBold font-10 subtitle-color1 text-wrap' }, inputProps === null || inputProps === void 0 ? void 0 : inputProps.hint))));
};
export default FileUpload;
//# sourceMappingURL=file-upload-backup.js.map