-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix:In package.json sytled-component version is changed.
- Loading branch information
1 parent
ce42542
commit bb1f7af
Showing
3 changed files
with
46 additions
and
48 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,50 @@ | ||
| // app/components/CameraUpload.js | ||
| // // app/components/CameraUpload.js | ||
|
|
||
| import React, { useState } from 'react'; | ||
| import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'; | ||
| import { storage } from '@/firebase'; // Adjust the path if necessary | ||
| import Camera from 'react-camera-pro'; | ||
| // import React, { useState } from 'react'; | ||
| // import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'; | ||
| // import { storage } from '@/firebase'; // Adjust the path if necessary | ||
| // import Camera from 'react-camera-pro'; | ||
|
|
||
| const CameraUpload = ({ onUpload }) => { | ||
| const [camera, setCamera] = useState(null); | ||
| const [imageURL, setImageURL] = useState(''); | ||
| // const CameraUpload = ({ onUpload }) => { | ||
| // const [camera, setCamera] = useState(null); | ||
| // const [imageURL, setImageURL] = useState(''); | ||
|
|
||
| const captureImage = async () => { | ||
| if (camera) { | ||
| const imageSrc = camera.takePhoto(); | ||
| if (imageSrc) { | ||
| const imageBlob = await fetch(imageSrc).then(res => res.blob()); | ||
| const file = new File([imageBlob], 'photo.jpg', { type: 'image/jpeg' }); | ||
| const fileURL = await uploadImage(file); | ||
| setImageURL(fileURL); | ||
| if (onUpload) onUpload(fileURL); // Pass the URL to parent if needed | ||
| } | ||
| } | ||
| }; | ||
| // const captureImage = async () => { | ||
| // if (camera) { | ||
| // const imageSrc = camera.takePhoto(); | ||
| // if (imageSrc) { | ||
| // const imageBlob = await fetch(imageSrc).then(res => res.blob()); | ||
| // const file = new File([imageBlob], 'photo.jpg', { type: 'image/jpeg' }); | ||
| // const fileURL = await uploadImage(file); | ||
| // setImageURL(fileURL); | ||
| // if (onUpload) onUpload(fileURL); // Pass the URL to parent if needed | ||
| // } | ||
| // } | ||
| // }; | ||
|
|
||
| const uploadImage = async (file) => { | ||
| try { | ||
| const storageRef = ref(storage, `images/${file.name}`); | ||
| await uploadBytes(storageRef, file); | ||
| const fileURL = await getDownloadURL(storageRef); | ||
| return fileURL; | ||
| } catch (error) { | ||
| console.error('Error uploading image: ', error); | ||
| } | ||
| }; | ||
| // const uploadImage = async (file) => { | ||
| // try { | ||
| // const storageRef = ref(storage, `images/${file.name}`); | ||
| // await uploadBytes(storageRef, file); | ||
| // const fileURL = await getDownloadURL(storageRef); | ||
| // return fileURL; | ||
| // } catch (error) { | ||
| // console.error('Error uploading image: ', error); | ||
| // } | ||
| // }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Camera | ||
| ref={(cam) => setCamera(cam)} | ||
| idealFacingMode="environment" | ||
| imageType="jpeg" | ||
| imageCompression={0.8} | ||
| /> | ||
| <button onClick={captureImage}>Capture and Upload</button> | ||
| {imageURL && <img src={imageURL} alt="Captured" style={{ width: '100px', height: '100px' }} />} | ||
| </div> | ||
| ); | ||
| }; | ||
| // return ( | ||
| // <div> | ||
| // <Camera | ||
| // ref={(cam) => setCamera(cam)} | ||
| // idealFacingMode="environment" | ||
| // imageType="jpeg" | ||
| // imageCompression={0.8} | ||
| // /> | ||
| // <button onClick={captureImage}>Capture and Upload</button> | ||
| // {imageURL && <img src={imageURL} alt="Captured" style={{ width: '100px', height: '100px' }} />} | ||
| // </div> | ||
| // ); | ||
| // }; | ||
|
|
||
| export default CameraUpload; | ||
| // export default CameraUpload; |
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