@gpa-gemstone/react-forms
Version:
React Form modules for gpa webapps
115 lines (114 loc) • 5.76 kB
JavaScript
"use strict";
// ******************************************************************************************************
// FileUpload.tsx - Gbtc
//
// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 01/01/2025 - Preston Crawford
// Generated original version of source code.
//
// ******************************************************************************************************
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
var FileUpload = function (props) {
var _a = React.useState(null), fileName = _a[0], setFileName = _a[1];
var _b = React.useState(null), fileSize = _b[0], setFileSize = _b[1];
var _c = React.useState(false), isFileUpload = _c[0], setIsFileUploaded = _c[1];
var _d = React.useState('uninitiated'), uploadStatus = _d[0], setUploadStatus = _d[1];
var handleFileUpload = function (evt) {
if (evt.target == null || evt.target.files == null || evt.target.files.length === 0) {
setUploadStatus('uninitiated');
return;
}
var file = evt.target.files[0];
setMetaData(file);
};
var handleDrop = function (e) {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer == null || e.dataTransfer.files == null || e.dataTransfer.files.length === 0)
return;
var file = e.dataTransfer.files[0];
setMetaData(file);
// Clear drag data after handling
e.dataTransfer.clearData();
};
var handleDragOver = function (e) {
e.preventDefault();
e.stopPropagation();
};
var handleOnClear = function () {
setUploadStatus('uninitiated');
setIsFileUploaded(false);
setFileName(null);
setFileSize(null);
props.OnClearHandler();
};
var setMetaData = function (file) {
setFileName(file.name);
setFileSize(file.size);
setUploadStatus('loading');
props.OnLoadHandler(file).then(function () {
setIsFileUploaded(true);
setUploadStatus('idle');
}).catch(function () {
setIsFileUploaded(false);
setUploadStatus('error');
});
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: 'row' },
React.createElement("div", { className: 'col-auto mt-2 pl-0' },
React.createElement("label", { style: { cursor: 'pointer' } },
React.createElement(gpa_symbols_1.ReactIcons.ShareArrow, { Color: 'var(--info)' }),
React.createElement("input", { type: "file", accept: props.FileTypeAttribute, style: { display: 'none' }, onChange: handleFileUpload }))),
React.createElement("div", { className: 'col-auto pl-0' },
React.createElement("button", { className: 'btn', onClick: handleOnClear },
React.createElement(gpa_symbols_1.ReactIcons.CircledX, { Color: 'red' })))),
uploadStatus === 'error' ?
React.createElement("div", { className: "alert alert-danger fade show" }, "An error occured while uploading file.")
: null,
React.createElement("div", { className: 'row', onDragOver: handleDragOver, onDrop: handleDrop, style: { border: '2px dashed var(--secondary)', borderRadius: '0.5em' } }, uploadStatus === 'loading' ?
React.createElement("div", { className: 'd-flex col-12 align-items-center justify-content-center' },
React.createElement(gpa_symbols_1.ReactIcons.SpiningIcon, { Size: 200 }))
:
isFileUpload ?
React.createElement(React.Fragment, null,
React.createElement("div", { className: 'col-auto' },
"File Name: ", fileName !== null && fileName !== void 0 ? fileName : ''),
React.createElement("div", { className: 'col-auto' },
"File Size: ",
formatFileSize(fileSize)))
:
React.createElement("div", { className: 'col-12 pt-3 pb-3 d-flex justify-content-center align-items-center' },
React.createElement(gpa_symbols_1.ReactIcons.Image, { Size: 100 }),
React.createElement("span", null, "Drag and Drop")))));
};
//Helper Functions
var formatFileSize = function (size) {
if (size === null)
return '';
var units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
var index = 0;
var fileSize = size;
while (fileSize >= 1024 && index < units.length - 1) {
fileSize /= 1024;
index++;
}
return "".concat(fileSize.toFixed(2), " ").concat(units[index]);
};
exports.default = FileUpload;