myprojectpackageprav
Version:
My package in npm
142 lines • 8.45 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileUpload = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
var rhybusconfig_1 = require("../../utils/constants/rhybusconfig");
require("./fileupload.css");
var FileUpload = function (props) {
var wrapperRef = (0, react_1.useRef)(null);
var _a = (0, react_1.useState)([]), fileList = _a[0], setFileList = _a[1];
var _b = (0, react_1.useState)(false), duplicateError = _b[0], setduplicateError = _b[1];
var _c = (0, react_1.useState)(false), invalidfileError = _c[0], setInvalidfileError = _c[1];
var _d = (0, react_1.useState)(false), invalidfileNameError = _d[0], setInvalidfileNameError = _d[1];
var onDragEnter = function () { return wrapperRef.current.classList.add('dragover'); };
var onDragLeave = function () { return wrapperRef.current.classList.remove('dragover'); };
var allowedExtensions = [
'.xlsx', '.xls', '.doc', '.docx', '.ppt', '.pptx',
'.txt', '.pdf', '.png', '.jpg', '.jpeg', '.gif', '.msg'
];
var fileExistsErrorMessage = react_1.default.createElement("p", null, "Selected file already exists.");
var invalidFileErrorMessage = react_1.default.createElement("p", null, "Invalid file format. Please select a file with one of the following extensions: .xlsx, .xls, .doc, .docx, .ppt, .pptx, .txt, .pdf, .png, .jpg, .jpeg, .gif, .msg");
var invalidfileNameErrorMessage = react_1.default.createElement("p", null, "Selected file contains invalid characters");
var addFileHandler = function () {
setduplicateError(false);
document.getElementById('attachFile').value = null;
};
var onFileDrop = function (e) {
var updatedList = [];
setduplicateError(false);
setInvalidfileError(false);
setInvalidfileNameError(false);
var targetfiles = e.target.files;
for (var index = 0; index < targetfiles.length; index++) {
var newFile = targetfiles.item(index);
var existsinCurrentUpload = fileList.map(function (x) { return x.name; });
//Checking for invalid files
var fileExtension = newFile.name
.substring(newFile.name.lastIndexOf("."))
.toLowerCase();
if (!allowedExtensions.includes(fileExtension)) {
setInvalidfileError(true);
setInvalidfileNameError(false);
setduplicateError(false);
}
else {
if (rhybusconfig_1.FILENAME_REGEX.test(newFile.name)) {
setInvalidfileNameError(true);
setduplicateError(false);
setInvalidfileError(false);
}
else if (!existsinCurrentUpload.includes(newFile.name) && newFile) {
updatedList = tslib_1.__spreadArray(tslib_1.__spreadArray([], updatedList, true), [newFile], false);
var allAttachments_1 = fileList.concat(updatedList);
setFileList(allAttachments_1);
}
else {
setduplicateError(true);
setInvalidfileError(false);
setInvalidfileNameError(false);
}
}
}
var allAttachments = fileList.concat(updatedList);
setFileList(allAttachments);
props.onFileChange(allAttachments);
};
var handleDrop = function (e) {
e.preventDefault();
wrapperRef.current.classList.remove("dragover");
if (!e)
return;
var updatedList = [];
var files = e.dataTransfer.files;
var newFiles = Array.from(files);
setduplicateError(false);
setInvalidfileError(false);
setInvalidfileNameError(false);
for (var index = 0; index < newFiles.length; index++) {
var newFile = newFiles === null || newFiles === void 0 ? void 0 : newFiles[index];
var existsinCurrentUpload = fileList.map(function (x) { return x.name; });
//Checking for invalid files
var fileExtension = newFile.name
.substring(newFile.name.lastIndexOf("."))
.toLowerCase();
if (!allowedExtensions.includes(fileExtension)) {
setInvalidfileError(true);
setduplicateError(false);
setInvalidfileNameError(false);
}
else {
if (rhybusconfig_1.FILENAME_REGEX.test(newFile.name)) {
setInvalidfileNameError(true);
setInvalidfileError(false);
setduplicateError(false);
}
else if (!existsinCurrentUpload.includes(newFile.name) && newFile) {
updatedList = tslib_1.__spreadArray(tslib_1.__spreadArray([], updatedList, true), [newFile], false);
}
else {
setduplicateError(true);
setInvalidfileError(false);
setInvalidfileNameError(false);
}
}
}
var allAttachments = fileList.concat(updatedList);
setFileList(allAttachments);
props.onFileChange(allAttachments);
};
var fileRemove = function (file) {
var updatedList = tslib_1.__spreadArray([], fileList, true);
updatedList.splice(fileList.indexOf(file), 1);
setFileList(updatedList);
setInvalidfileError(false);
setInvalidfileNameError(false);
props.onFileChange(updatedList);
};
return (react_1.default.createElement("div", { className: "attachments" },
react_1.default.createElement("div", { className: "formgroup" },
react_1.default.createElement("label", { htmlFor: 'form-file-upload' }, "Attach File(s)"),
react_1.default.createElement("div", { id: "form-file-upload", className: "attachfile dropzonecontrol", tabIndex: 0, "aria-label": "Attachment" },
react_1.default.createElement("div", { ref: wrapperRef, className: "drop-file-input", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDragOver: function (e) { return e.preventDefault(); }, onDrop: function (e) { return handleDrop(e); } },
react_1.default.createElement("label", { htmlFor: "attachFile", title: "Choose/Drag files", className: "choosebtn", onClick: addFileHandler }, "Choose/Drag files"),
react_1.default.createElement("input", { type: "file", name: "attachFile", id: "attachFile", accept: ".xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf,.png, .jpg, .jpeg,.gif, .msg", "aria-label": "Attach File", multiple: true, onChange: onFileDrop }),
fileList.length > 0 ? (react_1.default.createElement("div", { className: "attachmentsdisplay" },
react_1.default.createElement("ul", { id: "attachments", className: "formattach" }, fileList.map(function (item, index) { return (react_1.default.createElement("li", null,
react_1.default.createElement("div", { className: "attachedfiles", title: item.name, tabIndex: 0, "aria-label": item.name },
item.name,
react_1.default.createElement("span", { className: "icon-close", onClick: function () { return fileRemove(item); }, onKeyDown: function () { return fileRemove(item); }, title: 'Close', tabIndex: 0, "aria-label": "Close" })))); })))) : null,
react_1.default.createElement("span", { id: "docerrormsg", className: 'Spanerrormsgs', style: { textAlign: 'left', verticalAlign: 'bottom', } },
duplicateError && fileExistsErrorMessage,
invalidfileError && invalidFileErrorMessage,
invalidfileNameError && invalidfileNameErrorMessage))),
react_1.default.createElement("span", { className: "spanhintmsg" }, " Hint: Upload the files which are in the .png, .jpeg, .xlsx, .doc, .pdf, .ppt, .txt, .pptx, .msg files and special characters will not be used in the document names"))));
};
exports.FileUpload = FileUpload;
exports.FileUpload.propTypes = {
onFileChange: prop_types_1.default.func
};
exports.default = exports.FileUpload;
//# sourceMappingURL=upload-file.js.map