An ES modules implementation based on exif-heic-js to get EXIF of an image.
import { useState } from 'react';
import * as Exifly from "exifly";
export default function () {
const [tags, setTags] = useState('');
const handleFileChange = e => {
let extension = e.target.files[0].name.toLowerCase().split('.').at(-1);
let reader = new FileReader();
reader.onload = function () {
const exifly = new Exifly.load(reader.result);
if (extension === 'heic') {
tags = exifly.heic()
} else if (extension === 'jpg' || extension === 'jpeg') {
tags = exifly.jpeg();
} else {
tags = exifly.raw();
}
console.log(tags);
setTags(JSON.stringify(tags, null, 2));
};
reader.readAsArrayBuffer(e.target.files[0]);
}
return (
<>
<div>
<input type="file" id="image" accept=".heic,.jpeg,.jpg" onChange={handleFileChange} />
</div>
<div>
<pre>{tags}</pre>
</div>
</>
)
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exifly</title>
</head>
<body>
<div>
<input type="file" id="image" accept=".heic,.jpeg,.jpg" />
</div>
<div>
<pre id="tags"></pre>
</div>
<script src="../dist/exifly.umd.js"></script>
<script>
document.getElementById("image").onchange = function (e) {
let extension = e.target.files[0].name.toLowerCase().split('.').at(-1);
let reader = new FileReader();
reader.onload = function () {
const exifly = new Exifly.load(reader.result);
if (extension === 'heic') {
tags = exifly.heic()
} else if (extension === 'jpg' || extension === 'jpeg') {
tags = exifly.jpeg();
} else {
tags = exifly.raw();
}
console.log(tags)
document.getElementById('tags').textContent = JSON.stringify(tags, null, 2);
};
reader.readAsArrayBuffer(e.target.files[0]);
}
</script>
</body>
</html>