From d34c7893a0263daa8a5615c4c63d20a9c25781a3 Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Mon, 28 Oct 2024 16:12:22 +0900 Subject: [PATCH 1/5] added fiel upload functionality --- package-lock.json | 29 +++++++++----- package.json | 5 ++- src/components/FileUpload.tsx | 71 ++++++++++++++++++++++++++--------- src/components/Navbar.tsx | 3 +- 4 files changed, 77 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index fb7752b..a64ffbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.27.0", - "recharts": "^2.12.7" + "recharts": "^2.12.7", + "uuid": "^11.0.1" }, "devDependencies": { "@chromatic-com/storybook": "^1.9.0", @@ -48,7 +49,7 @@ "storybook": "^8.3.4", "typescript": "^5.5.3", "typescript-eslint": "^8.0.1", - "vite": "5.4.8" + "vite": "^5.4.8" } }, "node_modules/@adobe/css-tools": { @@ -1616,6 +1617,19 @@ "storybook": "^8.3.4" } }, + "node_modules/@storybook/addon-actions/node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "dev": true, + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@storybook/addon-backgrounds": { "version": "8.3.4", "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.4.tgz", @@ -8659,17 +8673,15 @@ } }, "node_modules/uuid": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", - "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", - "dev": true, + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.1.tgz", + "integrity": "sha512-wt9UB5EcLhnboy1UvA1mvGPXkIIrHSu+3FmUksARfdVw9tuPf3CH/CohxO0Su1ApoKAeT6BVzAJIvjTuQVSmuQ==", "funding": [ "https://github.com/sponsors/broofa", "https://github.com/sponsors/ctavan" ], - "license": "MIT", "bin": { - "uuid": "dist/bin/uuid" + "uuid": "dist/esm/bin/uuid" } }, "node_modules/vary": { @@ -8709,7 +8721,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz", "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==", "dev": true, - "license": "MIT", "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", diff --git a/package.json b/package.json index daa013d..f3db5bc 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.27.0", - "recharts": "^2.12.7" + "recharts": "^2.12.7", + "uuid": "^11.0.1" }, "devDependencies": { "@chromatic-com/storybook": "^1.9.0", @@ -54,7 +55,7 @@ "storybook": "^8.3.4", "typescript": "^5.5.3", "typescript-eslint": "^8.0.1", - "vite": "5.4.8" + "vite": "^5.4.8" }, "lint-staged": { "*.{ts,tsx,js,jsx}": [ diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index fa86f4d..b5e2797 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -10,6 +10,7 @@ const FileUpload: React.FC = ({ uploadUrl }) => { const [showModal, setShowModal] = useState(false); const [selectedFiles, setSelectedFiles] = useState([]); const [error, setError] = useState(null); + const [success, setSuccess] = useState(null); const handleFileChange = (files: File[]) => { if (files.length > 0) { @@ -18,28 +19,57 @@ const FileUpload: React.FC = ({ uploadUrl }) => { }; const handleUpload = async () => { + setError(null); + setSuccess(null) if (selectedFiles.length > 0) { - const formData = new FormData(); - selectedFiles.forEach((file) => { - formData.append('files', file); - }); - try { - const response = await fetch(uploadUrl, { - method: 'POST', - body: formData, - }); + //Single file upload -- uploadUrl + /upload DOES NOT WORK + // SO --> Used bulk_upload instead + if (selectedFiles.length === 1) { + const formData = new FormData(); + formData.append('files', selectedFiles[0]); + + console.log([...formData]); + + const response = await fetch(uploadUrl + "/bulk_upload", { + method: 'POST', + body: formData, + }); + + if (!response.ok) { + setError(`Failed to upload file: ${selectedFiles[0].name}.`); + } else { + setSuccess('File uploaded successfully!'); + console.log('File uploaded successfully:', selectedFiles[0].name); + } + } else { + // Bulk files upload + const formData = new FormData(); + selectedFiles.forEach(file => { + formData.append('files', file); + }); - if (!response.ok) { - setError('Upload failed. Network response was not ok.'); - return; - } + try { + const response = await fetch(uploadUrl + "/bulk_upload", { + method: 'POST', + body: formData, + }); - const data = await response.json(); - console.log('Upload successful:', data); - + if (!response.ok) { + const errorMsg = await response.text(); + setError(`Failed to upload: ${errorMsg}`); + } else { + const result = await response.json(); + setSuccess('File uploaded successfully!'); + console.log('Upload successful:', result); + } + } catch (error) { + console.error('Error uploading files:', error); + setError('An error occurred during file upload.'); + } + } + setSelectedFiles([]); - handleClose(); } catch (error) { console.error('Upload failed:', error); setError('An error occurred while uploading. Please try again.'); @@ -57,6 +87,7 @@ const FileUpload: React.FC = ({ uploadUrl }) => { setShowModal(false); setSelectedFiles([]); setError(null); + setSuccess(null) }; return ( @@ -92,7 +123,11 @@ const FileUpload: React.FC = ({ uploadUrl }) => { - + {success && ( + setSuccess(null)} style={{ marginTop: 10 }}> + {success} + + )} {error && ( setError(null)} style={{ marginTop: 10 }}> {error} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 2b028c8..60a9bbd 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -27,8 +27,7 @@ export default function Navbar() { /> {links} - {/* Once POST API is out -- Currently WIP */} - + {/* Optionally render active link or other content here */}

{hytechName}

From 6041c3c890a2c99233b0deed210fdc74a9dfd02d Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Mon, 28 Oct 2024 16:14:10 +0900 Subject: [PATCH 2/5] took out unneccesary stuff --- src/components/FileUpload.tsx | 65 +++++++++++++---------------------- 1 file changed, 24 insertions(+), 41 deletions(-) diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index b5e2797..48bd6a5 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -24,50 +24,33 @@ const FileUpload: React.FC = ({ uploadUrl }) => { if (selectedFiles.length > 0) { try { //Single file upload -- uploadUrl + /upload DOES NOT WORK - // SO --> Used bulk_upload instead - if (selectedFiles.length === 1) { - const formData = new FormData(); - formData.append('files', selectedFiles[0]); - - console.log([...formData]); - - const response = await fetch(uploadUrl + "/bulk_upload", { - method: 'POST', - body: formData, - }); - - if (!response.ok) { - setError(`Failed to upload file: ${selectedFiles[0].name}.`); - } else { - setSuccess('File uploaded successfully!'); - console.log('File uploaded successfully:', selectedFiles[0].name); - } - } else { - // Bulk files upload - const formData = new FormData(); - selectedFiles.forEach(file => { - formData.append('files', file); - }); + // SO --> Used bulk_upload instead for one file as well + + // Bulk files upload + const formData = new FormData(); + selectedFiles.forEach(file => { + formData.append('files', file); + }); - try { - const response = await fetch(uploadUrl + "/bulk_upload", { - method: 'POST', - body: formData, - }); + try { + const response = await fetch(uploadUrl + "/bulk_upload", { + method: 'POST', + body: formData, + }); - if (!response.ok) { - const errorMsg = await response.text(); - setError(`Failed to upload: ${errorMsg}`); - } else { - const result = await response.json(); - setSuccess('File uploaded successfully!'); - console.log('Upload successful:', result); - } - } catch (error) { - console.error('Error uploading files:', error); - setError('An error occurred during file upload.'); - } + if (!response.ok) { + const errorMsg = await response.text(); + setError(`Failed to upload: ${errorMsg}`); + } else { + const result = await response.json(); + setSuccess('File uploaded successfully!'); + console.log('Upload successful:', result); + } + } catch (error) { + console.error('Error uploading files:', error); + setError('An error occurred during file upload.'); } + setSelectedFiles([]); } catch (error) { From b25d9730e2b28905a20a8e33bc042c923575c38c Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Mon, 28 Oct 2024 16:15:15 +0900 Subject: [PATCH 3/5] fixed api route --- src/components/FileUpload.tsx | 2 +- src/components/Navbar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index 48bd6a5..376ba60 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -33,7 +33,7 @@ const FileUpload: React.FC = ({ uploadUrl }) => { }); try { - const response = await fetch(uploadUrl + "/bulk_upload", { + const response = await fetch(uploadUrl, { method: 'POST', body: formData, }); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 60a9bbd..54d8346 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -27,7 +27,7 @@ export default function Navbar() { /> {links} - + {/* Optionally render active link or other content here */}

{hytechName}

From 7d3be88258b662f37954c1b6aa0d3e791ade4d0b Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Mon, 28 Oct 2024 16:48:33 +0900 Subject: [PATCH 4/5] package not needed --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index f3db5bc..8e4a694 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.27.0", - "recharts": "^2.12.7", - "uuid": "^11.0.1" + "recharts": "^2.12.7" }, "devDependencies": { "@chromatic-com/storybook": "^1.9.0", From c1cc45d8ba21755b06aeec65053490aae0fc11b8 Mon Sep 17 00:00:00 2001 From: Christine <132790780+aesteri@users.noreply.github.com> Date: Tue, 29 Oct 2024 17:31:33 +0900 Subject: [PATCH 5/5] added simple comfort message for error handling LOL --- src/components/FileUpload.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index 376ba60..3b53668 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -23,35 +23,35 @@ const FileUpload: React.FC = ({ uploadUrl }) => { setSuccess(null) if (selectedFiles.length > 0) { try { - //Single file upload -- uploadUrl + /upload DOES NOT WORK - // SO --> Used bulk_upload instead for one file as well - - // Bulk files upload const formData = new FormData(); selectedFiles.forEach(file => { - formData.append('files', file); + formData.append('files', file); }); try { const response = await fetch(uploadUrl, { - method: 'POST', - body: formData, + method: 'POST', + body: formData, }); if (!response.ok) { + if (response.status === 503) { + const errorMsg = await response.text(); + setError(`Failed to upload: ${errorMsg} \nTry again in a few minutes!`); + } else { const errorMsg = await response.text(); setError(`Failed to upload: ${errorMsg}`); + } } else { - const result = await response.json(); - setSuccess('File uploaded successfully!'); - console.log('Upload successful:', result); + const result = await response.json(); + setSuccess('File uploaded successfully!'); + console.log('Upload successful:', result); } } catch (error) { - console.error('Error uploading files:', error); - setError('An error occurred during file upload.'); + console.error('Error uploading files:', error); + setError('An error occurred during file upload.'); } - setSelectedFiles([]); } catch (error) { console.error('Upload failed:', error);