myprojectpackageprav
Version:
My package in npm
66 lines • 4.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var input_label_1 = tslib_1.__importDefault(require("../../utils/controls/input-label"));
require("./fileupload.css");
function handleFile(files) {
// alert("Number of files: " + files.length);
}
// drag drop file component
var FileUpload = function (inputProps) {
var _a, _b;
var _c = (0, react_1.useState)('No file chosen'), fileName = _c[0], setFileName = _c[1];
// export default function FileUpload () {
// drag state
var _d = react_1.default.useState(false), dragActive = _d[0], setDragActive = _d[1];
// ref
var inputRef = react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: inputProps === null || inputProps === void 0 ? void 0 : inputProps.formClassName },
(inputProps === null || inputProps === void 0 ? void 0 : inputProps.label) && react_1.default.createElement(input_label_1.default, { 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_1.default.createElement("form", { id: "form-file-upload", onDragEnter: handleDrag, onSubmit: function (e) { return e.preventDefault(); } },
react_1.default.createElement("input", { ref: inputRef, type: "file", id: "input-file-upload", multiple: true, onChange: handleChange }),
react_1.default.createElement("label", { id: "label-file-upload", htmlFor: "input-file-upload", className: dragActive ? "drag-active" : "" },
react_1.default.createElement("div", null,
react_1.default.createElement("button", { className: "upload-button", onClick: onButtonClick, title: 'Choose/Drag files' }, "Choose/Drag files"))),
dragActive && react_1.default.createElement("div", { id: "drag-file-element", onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop }),
react_1.default.createElement("p", null, fileName)),
react_1.default.createElement("div", { className: 'sourcesansproSemiBold font-10 subtitle-color1 text-wrap' }, inputProps === null || inputProps === void 0 ? void 0 : inputProps.hint))));
};
exports.default = FileUpload;
//# sourceMappingURL=file-upload-backup.js.map