-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* upload images * upload images * fixed image upload * added smaller versions of files * image/ui fixes * put images on s3 bucket, set up s3 --------- Co-authored-by: Isaac Light <[email protected]>
- Loading branch information
1 parent
0d8d179
commit e04b704
Showing
23 changed files
with
423 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import imageCompression from "browser-image-compression"; | ||
| import { api } from "hooks/api"; | ||
| import { useAuthentication } from "hooks/auth"; | ||
| import React, { useState } from "react"; | ||
| import { Alert, Button, Col, Form } from "react-bootstrap"; | ||
|
|
||
| interface ImageUploadProps { | ||
| onUploadSuccess: (url: string) => void; | ||
| } | ||
|
|
||
| const ImageUploadComponent: React.FC<ImageUploadProps> = ({ | ||
| onUploadSuccess, | ||
| }) => { | ||
| const [selectedFile, setSelectedFile] = useState<File | null>(null); | ||
| const [compressedFile, setCompressedFile] = useState<File | null>(null); | ||
| const [uploadStatus, setUploadStatus] = useState<string | null>(null); | ||
| const [fileError, setFileError] = useState<string | null>(null); | ||
| const auth = useAuthentication(); | ||
| const auth_api = new api(auth.api); | ||
| const MAX_FILE_SIZE = 2 * 1024 * 1024; | ||
| const handleFileChange = async ( | ||
| event: React.ChangeEvent<HTMLInputElement>, | ||
| ) => { | ||
| if (event.target.files) { | ||
| const file = event.target.files[0]; | ||
| if (file) { | ||
| setUploadStatus(null); | ||
| if (file.size > MAX_FILE_SIZE) { | ||
| setFileError( | ||
| `File size should not exceed ${MAX_FILE_SIZE / 1024 / 1024} MB`, | ||
| ); | ||
| } else { | ||
| const options = { | ||
| maxSizeMB: 0.2, // Maximum size in MB | ||
| maxWidthOrHeight: 800, // Maximum width or height in pixels | ||
| useWebWorker: true, // Use multi-threading for compression | ||
| }; | ||
| try { | ||
| const thecompressedFile = await imageCompression(file, options); | ||
| setCompressedFile(thecompressedFile); | ||
| } catch (error) { | ||
| console.error("Error compressing the image:", error); | ||
| setFileError("Error compressing the image"); | ||
| } | ||
| setSelectedFile(file); | ||
| setFileError(null); | ||
| } | ||
| } else { | ||
| setFileError("No file selected"); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const handleUpload = async () => { | ||
| if (fileError) { | ||
| setUploadStatus("Failed to upload file"); | ||
| return; | ||
| } | ||
| if (!selectedFile || !compressedFile) { | ||
| setUploadStatus("No file selected"); | ||
| return; | ||
| } | ||
| const formData = new FormData(); | ||
| formData.append("file", selectedFile); | ||
| const compressedFormData = new FormData(); | ||
| compressedFormData.append("file", compressedFile); | ||
| try { | ||
| const image_id = await auth_api.uploadImage(formData); | ||
| onUploadSuccess(image_id); | ||
| setUploadStatus("File uploaded successfully"); | ||
| } catch (error) { | ||
| setUploadStatus("Failed to upload file"); | ||
| console.error("Error uploading file:", error); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Col md="6"> | ||
| <div> | ||
| <Form.Group controlId="formFile" className="mb-3"> | ||
| <Form.Label>Select Image</Form.Label> | ||
| <Form.Control type="file" onChange={handleFileChange} accept=".png" /> | ||
| </Form.Group> | ||
| {fileError && <Alert variant="danger">{fileError}</Alert>} | ||
| <Button onClick={handleUpload} disabled={!selectedFile}> | ||
| Upload | ||
| </Button> | ||
| {uploadStatus && ( | ||
| <Alert | ||
| variant={ | ||
| uploadStatus.includes("successfully") ? "success" : "danger" | ||
| } | ||
| className="mt-3" | ||
| > | ||
| {uploadStatus} | ||
| </Alert> | ||
| )} | ||
| </div> | ||
| </Col> | ||
| ); | ||
| }; | ||
|
|
||
| export default ImageUploadComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { api } from "hooks/api"; | ||
| import { useAuthentication } from "hooks/auth"; | ||
| import React, { useEffect, useState } from "react"; | ||
|
|
||
| interface ImageProps { | ||
| imageId: string; | ||
| } | ||
|
|
||
| const ImageComponent: React.FC<ImageProps> = ({ imageId }) => { | ||
| const [imageSrc, setImageSrc] = useState<string | null>(null); | ||
| const [loading, setLoading] = useState<boolean>(true); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const auth = useAuthentication(); | ||
| const auth_api = new api(auth.api); | ||
|
|
||
| useEffect(() => { | ||
| const fetchImage = async () => { | ||
| try { | ||
| const response = await auth_api.getImage(imageId); | ||
| const url = URL.createObjectURL(response); | ||
| setImageSrc(url); | ||
| setLoading(false); | ||
| } catch (err) { | ||
| setError("Failed to fetch image " + imageId); | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchImage(); | ||
| }, [imageId]); | ||
|
|
||
| if (loading) return <p>Loading...</p>; | ||
| if (error) return <p>{error}</p>; | ||
|
|
||
| return ( | ||
| <div style={{ width: "100%", paddingTop: "100%", position: "relative" }}> | ||
| {imageSrc && ( | ||
| <img | ||
| src={imageSrc} | ||
| alt="Robot" | ||
| className="d-block rounded-lg" | ||
| style={{ | ||
| position: "absolute", | ||
| top: "0", | ||
| left: "0", | ||
| width: "100%", | ||
| height: "100%", | ||
| objectFit: "contain", | ||
| }} | ||
| /> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ImageComponent; |
Oops, something went wrong.