@sb1/ffe-file-upload-react
Version:
Upload file button with validation and list of uploaded files.
93 lines (92 loc) • 7 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileUpload = FileUpload;
var react_1 = __importStar(require("react"));
var FileItem_1 = require("./FileItem");
var classnames_1 = __importDefault(require("classnames"));
var ffe_buttons_react_1 = require("@sb1/ffe-buttons-react");
var ffe_icons_react_1 = require("@sb1/ffe-icons-react");
function FileUpload(_a) {
var id = _a.id, label = _a.label, files = _a.files, cancelText = _a.cancelText, deleteText = _a.deleteText, multiple = _a.multiple, title = _a.title, infoText = _a.infoText, infoSubText = _a.infoSubText, uploadTitle = _a.uploadTitle, uploadMicroText = _a.uploadMicroText, uploadSubText = _a.uploadSubText, _b = _a.accept, accept = _b === void 0 ? '*' : _b, onFilesDropped = _a.onFilesDropped, onFileDeleted = _a.onFileDeleted, onFilesSelected = _a.onFilesSelected;
var _c = (0, react_1.useState)(false), isHover = _c[0], setIsHover = _c[1];
var fileInputElement = (0, react_1.useRef)(null);
var downloadIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzQzLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDctMTEuODQ2LTcuOTIzTDMzMC4zMDktNDc4LjE1M3EtOC45MjMtOC45MjMtOC44MDctMjAuODg0LjExNS0xMS45NjEgOC44MDctMjEuMjY5IDkuMzA4LTkuMzA3IDIxLjM4NC05LjYxNSAxMi4wNzctLjMwOCAyMS4zODUgOWw3Ni45MjMgNzYuOTIzdi0zMDYuMDAxcTAtMTIuNzY5IDguNjE1LTIxLjM4NCA4LjYxNS04LjYxNiAyMS4zODQtOC42MTZ0MjEuMzg0IDguNjE2cTguNjE1IDguNjE1IDguNjE1IDIxLjM4NHYzMDYuMDAxbDc2LjkyMy03Ni45MjNxOC45MjMtOC45MjMgMjEuMTkyLTguODA4IDEyLjI2OS4xMTYgMjEuNTc3IDkuNDIzIDguNjkyIDkuMzA4IDguOTk5IDIxLjA3Ny4zMDggMTEuNzY5LTguOTk5IDIxLjA3Nkw1MDUuMzA3LTM1My43N3EtNS42MTUgNS42MTYtMTEuODQ2IDcuOTIzLTYuMjMgMi4zMDgtMTMuNDYxIDIuMzA4Wk0yNTIuMzA5LTE4MC4wMDFxLTMwLjMwOCAwLTUxLjMwOC0yMXQtMjEtNTEuMzA4di03OC40NjFxMC0xMi43NjkgOC42MTYtMjEuMzg0IDguNjE1LTguNjE1IDIxLjM4NC04LjYxNXQyMS4zODQgOC42MTVRMjQwLTM0My41MzkgMjQwLTMzMC43N3Y3OC40NjFxMCA0LjYxNiAzLjg0NiA4LjQ2MyAzLjg0NyAzLjg0NiA4LjQ2MyAzLjg0Nmg0NTUuMzgycTQuNjE2IDAgOC40NjMtMy44NDYgMy44NDYtMy44NDcgMy44NDYtOC40NjN2LTc4LjQ2MXEwLTEyLjc2OSA4LjYxNS0yMS4zODR0MjEuMzg0LTguNjE1cTEyLjc2OSAwIDIxLjM4NCA4LjYxNSA4LjYxNiA4LjYxNSA4LjYxNiAyMS4zODR2NzguNDYxcTAgMzAuMzA4LTIxIDUxLjMwOHQtNTEuMzA4IDIxSDI1Mi4zMDlaIi8+PC9zdmc+';
var handleFilesDropped = function (event) {
event.preventDefault();
setIsHover(false);
onFilesDropped(event.dataTransfer.files);
};
var handleFileDeleted = function (event) {
onFileDeleted(files[event.currentTarget.id]);
};
var triggerUploadFileNativeHandler = function () {
// clear file input to trigger onChange when uploading same filename
if (fileInputElement.current) {
fileInputElement.current.value = '';
fileInputElement.current.click();
}
};
var handleFileSelected = function (event) {
onFilesSelected(event.target.files);
};
return (react_1.default.createElement("div", { className: "ffe-file-upload" },
react_1.default.createElement("div", { className: "ffe-file-upload__title" }, title),
Object.keys(files).length > 0 ? (react_1.default.createElement("div", { className: "ffe-file-upload__file-items-section" }, Object.keys(files).map(function (file) { return (react_1.default.createElement(FileItem_1.FileItem, { key: file, file: files[file], cancelText: cancelText, deleteText: deleteText, onFileDeleted: handleFileDeleted })); }))) : (react_1.default.createElement("div", { className: "ffe-file-upload__info-section" },
react_1.default.createElement("div", { className: "ffe-file-upload__info-section-text" }, infoText),
react_1.default.createElement("div", { className: "ffe-file-upload__info-section-subtext" }, infoSubText))),
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section", onDrop: handleFilesDropped, onDragOver: function (event) {
event.preventDefault();
setIsHover(true);
}, onDragLeave: function () { return setIsHover(false); } },
react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-file-upload__upload-section-border', {
'ffe-file-upload__upload-section-border--hover': isHover,
}) },
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-title" }, uploadTitle),
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-microtext" }, uploadMicroText),
react_1.default.createElement(ffe_buttons_react_1.SecondaryButton, { tabIndex: 0, as: "label", htmlFor: id, leftIcon: react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: downloadIcon, size: "md" }), onClick: function (e) {
e.preventDefault();
triggerUploadFileNativeHandler();
}, onKeyUp: function (e) {
if (e.key === 'Enter' || e.key === ' ') {
triggerUploadFileNativeHandler();
}
} }, label),
react_1.default.createElement("input", { id: id, type: "file", multiple: multiple, ref: fileInputElement, onChange: handleFileSelected, accept: accept }),
react_1.default.createElement("div", { className: "ffe-file-upload__upload-section-subtext" }, uploadSubText)))));
}