Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { useEffect, useState, useCallback } from 'react';
import {
CameraResultType,
CameraSource,
Plugins,
FilesystemDirectory,
Capacitor
} from "@capacitor/core";
import moment from 'moment';
import './App.css';
const LOG_PREFIX = "[App] ";
function App() {
const [allImages, setAllImages] = useState();
const [photo, setPhoto] = useState();
const [lastWebPath, setLastWebPath] = useState();
const [lastPhotoPath, setLastPhotoPath] = useState();
const { Camera, Filesystem, Storage } = Plugins;
const triggerCamera = useCallback(async () => {
const cameraPhoto = await Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.Uri,
source: CameraSource.Camera
});
setPhoto(cameraPhoto);
}, [Camera]);
useEffect(() => {
if(photo && photo.webPath !== lastWebPath){
const setupImages = async (fileName) => {
try {
const imgKey = {
key: "imagePaths"
};
const imagePaths = await Storage.get(imgKey);
console.log(LOG_PREFIX + "imagePaths", imagePaths);
const imagePathsArray = imagePaths.value ? JSON.parse(imagePaths.value) : [];
imagePathsArray.push({
fileName
});
console.log(LOG_PREFIX + "imagePathsArray", imagePathsArray);
const imagePathsArrayString = JSON.stringify(imagePathsArray);
await Storage.set({
key: "imagePaths",
value: imagePathsArrayString
});
const images = Promise.all(imagePathsArray.map(async img => {
const fileUri = await Filesystem.getUri({
directory: FilesystemDirectory.Data,
path: img.fileName
});
const photoUrl = Capacitor.convertFileSrc(fileUri.uri);
return (<div key={fileName}>
<img
style={{
border: 'solid 1px red',
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: '200px',
height: '300px'
}}
src={photoUrl}
alt="img" />
</div>
);
}));
const finalImages = await images;
setAllImages(finalImages);
} catch(err) {
console.log(LOG_PREFIX + err);
}
}
setLastWebPath(photo.webPath);
Filesystem.readFile({
path: photo.path
})
.then(async photoInTemp => {
const date = moment().format("MM-DD-YY-h-mm-ss");
const fileName = date + ".jpg";
await Filesystem.writeFile({
data: photoInTemp.data,
path: fileName,
directory: FilesystemDirectory.Data
});
const finalPhotoUrl = await Filesystem.getUri({
directory: FilesystemDirectory.Data,
path: fileName
});
const filePath = finalPhotoUrl.uri;
const photoUrl = Capacitor.convertFileSrc(filePath);
if (photoUrl !== lastPhotoPath) {
console.log(LOG_PREFIX + 'photoUrl', photoUrl);
setLastPhotoPath(photoUrl);
}
setupImages(fileName);
});
}
}, [photo, Filesystem, Storage, lastPhotoPath, lastWebPath]);
const onClickCamera = () => {
triggerCamera();
}
return (
<div className="App">
<div style={{ marginTop: '40px', border: 'solid 1px black', padding: '10px' }}>
<div>
<img
src={lastPhotoPath}
alt="last img taken"
style={{
border: 'solid 1px red',
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: '200px',
height: '300px'
}} />
</div>
<div>
<button
onClick={onClickCamera}
style={{
width: '10em',
}}>Camera</button>
</div>
</div>
<div style={{ marginTop: '20px'}}>
<strong>My Pics</strong>
{allImages}
</div>
</div>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment