@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
123 lines • 7.24 kB
JavaScript
// ParentComponent.tsx
import * as React from 'react';
import { useState } from 'react';
import FileDropContainer from './fps-FileDropContainer';
import { postSourceFilesAPI } from '@mikezimm/fps-core-v7/lib/restAPIs/lists/files/postSourceFilesAPI';
import { getSizeLabel } from '@mikezimm/fps-core-v7/lib/logic/Math/labels';
import { createFileElementList } from './fps-FileDropBoxElements';
import { makeid } from '@mikezimm/fps-core-v7/lib/logic/Strings/guids';
/***
* .d8888. d888888b .d8b. d8888b. d888888b db db .d88b. .d88b. db dD
* 88' YP `~~88~~' d8' `8b 88 `8D `~~88~~' 88 88 .8P Y8. .8P Y8. 88 ,8P'
* `8bo. 88 88ooo88 88oobY' 88 88ooo88 88 88 88 88 88,8P
* `Y8b. 88 88~~~88 88`8b 88 88~~~88 88 88 88 88 88`8b
* db 8D 88 88 88 88 `88. 88 88 88 `8b d8' `8b d8' 88 `88.
* `8888Y' YP YP YP 88 YD YP YP YP `Y88P' `Y88P' YP YD
*
*
*/
const ParentComponent = (props) => {
const [files, setFiles] = useState([]);
const [uploadStatus, setUploadStatus] = useState(null);
const [uploadStates, setUploadStates] = useState([]);
const totalSize = files.reduce((total, file) => total + file.size, 0);
/***
* db db .d8b. d8b db d8888b. db d88888b .o88b. db d888888b .o88b. db dD .d8888.
* 88 88 d8' `8b 888o 88 88 `8D 88 88' d8P Y8 88 `88' d8P Y8 88 ,8P' 88' YP
* 88ooo88 88ooo88 88V8o 88 88 88 88 88ooooo 8P 88 88 8P 88,8P `8bo.
* 88~~~88 88~~~88 88 V8o88 88 88 88 88~~~~~ 8b 88 88 8b 88`8b `Y8b.
* 88 88 88 88 88 V888 88 .8D 88booo. 88. Y8b d8 88booo. .88. Y8b d8 88 `88. db 8D
* YP YP YP YP VP V8P Y8888D' Y88888P Y88888P `Y88P' Y88888P Y888888P `Y88P' YP YD `8888Y'
*
*
*/
const handleFileUpdate = (updatedFiles) => {
const doReset = updatedFiles === null ? true : false;
setUploadStates([]);
setFiles(doReset ? [] : updatedFiles);
setUploadStatus(updatedFiles && updatedFiles.length > 0 ? `Success: ${makeid(5)}` : null);
};
// Define the setParentFilesData function
const saveFilesToLibrary = async (uploadFiles, FileSource, asBatch) => {
// Iterate over each file and upload it to SharePoint
if (asBatch === true) {
const allReturns = await Promise.all(uploadFiles.map((file, idx) => { return postSourceFilesAPI(FileSource, true, file, file.name, true, true); }));
setUploadStates(allReturns);
}
else {
setUploadStates([]);
const liveStats = [];
let idx = -1;
for (const file of uploadFiles) {
try {
idx++;
// Call the uploadImageToLibrary function using each file as a Blob
const fileUrl = await postSourceFilesAPI(FileSource, true, file, file.name, true, true);
fileUrl.statusText = `${idx}: ${fileUrl.statusText}`;
if (fileUrl) {
console.log(`File uploaded successfully: ${fileUrl}`);
setUploadStatus(`Success: ${makeid(5)}`);
liveStats.push(fileUrl);
setUploadStates(liveStats);
if (idx === uploadFiles.length - 1)
setUploadStatus('completed!');
// You can add additional logic here if needed, e.g., update UI or store image URLs
}
}
catch (error) {
console.error('Error uploading file:', error);
setUploadStatus('error');
}
}
}
};
const handleUploadFileBatch = async () => {
await saveFilesToLibrary(files, props.FilesSource, true);
};
const handleUploadFiles = async () => {
await saveFilesToLibrary(files, props.FilesSource, false);
};
/***
* d88888b d888888b d8b db .d8b. db d88888b db d88888b .88b d88. d88888b d8b db d888888b
* 88' `88' 888o 88 d8' `8b 88 88' 88 88' 88'YbdP`88 88' 888o 88 `~~88~~'
* 88ooo 88 88V8o 88 88ooo88 88 88ooooo 88 88ooooo 88 88 88 88ooooo 88V8o 88 88
* 88~~~ 88 88 V8o88 88~~~88 88 88~~~~~ 88 88~~~~~ 88 88 88 88~~~~~ 88 V8o88 88
* 88 .88. 88 V888 88 88 88booo. 88. 88booo. 88. 88 88 88 88. 88 V888 88
* YP Y888888P VP V8P YP YP Y88888P Y88888P Y88888P Y88888P YP YP YP Y88888P VP V8P YP
*
*
*/
console.log(`UploadStatus: ParentFileSample ~ 94`);
return (React.createElement("div", null,
React.createElement("h2", null, "File Upload Demo"),
files && files.length > 0 && uploadStatus && uploadStatus.indexOf('Success') === 0 ?
React.createElement("button", { onClick: handleUploadFiles }, "Save to SharePoint") : undefined,
files && files.length > 0 && uploadStatus && uploadStatus.indexOf('Success') === 0 ?
React.createElement("button", { onClick: handleUploadFileBatch }, "Batch Save to SharePoint") : undefined,
uploadStates && uploadStates.length > 0 ? React.createElement("div", null,
React.createElement("h3", null, "Upload States"),
uploadStates.length > 0 ? (React.createElement("ol", null, uploadStates.map((upload, index) => (React.createElement("li", { key: index },
upload.status,
" ",
upload.statusText,
" ",
upload.unifiedPerformanceOps.save.startStr,
" @ ",
upload.unifiedPerformanceOps.save.ms,
": ",
files[index].name,
" - ",
getSizeLabel(files[index].size),
" "))))) : (React.createElement("p", null, "No files uploaded yet."))) : undefined,
React.createElement(FileDropContainer, { useDropBox: true, fileTypes: props.fileDropBoxProps.fileTypes, setParentFilesData: handleFileUpdate, maxUploadCount: props.fileDropBoxProps.maxUploadCount, fileNameHandleBars: props.fileDropBoxProps.fileNameHandleBars, fileMaxSize: props.fileDropBoxProps.fileMaxSize, fileWarnSize: props.fileDropBoxProps.fileWarnSize, refreshId: props.fileDropBoxProps.refreshId, resetId: props.fileDropBoxProps.resetId }),
React.createElement("div", null,
React.createElement("h3", null,
"PARENT File Memory: ( ",
files.length,
" @ ",
getSizeLabel(totalSize),
" )"),
createFileElementList(files, props.fileDropBoxProps.fileWarnSize, undefined, false, true))));
};
export default ParentComponent;
//# sourceMappingURL=ParentFileSample.js.map