how can I fetch exifdata(like gps) with filepond? - filepond

Question

I am trying to use filepond for my assignment, but I can't get exifdata from photos.
for example, as I expected
File {name: "KakaoTalk_20210727_153219119.jpg", lastModified: 1627367574529, lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time), webkitRelativePath: "", size: 2319798, …}
exifdata: {ImageWidth: 4000, ImageHeight: 2252, Make: "samsung", Model: "SM-G988N", Orientation: 1, …}
iptcdata: {}
lastModified: 1627367574529
lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time) {}
name: "KakaoTalk_20210727_153219119.jpg"
size: 2319798
type: "image/jpeg"
webkitRelativePath: ""
I wanted to get exifdata like this with my filepond code like this but I can't find it :(
file: File
lastModified: 1627367574529
lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time) {}
name: "KakaoTalk_20210727_153219119.jpg"
size: 2319798
type: "image/jpeg"
webkitRelativePath: ""
_relativePath: ""
I really need gps data for my assginment, how could I get it?
this is Vue-filepond code.
<template>
<div id="test">
<br>
<br>
<br>
<br>
<br>
<file-pond
name="test"
ref="pond"
allowImageExifOrientation = "true"
label-idle="Drop files here..."
allowprocess="false"
v-bind:allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
:server="myServer"
instantUpload ="false"
v-bind:files="myFiles"
v-on:init="handleFilePondInit"
imageTransformOutputStripImageHead = "false"
allowImagePreview="true"
imagePreviewHeight="300px"
#initfile="oninitfile()"
#updatefiles="FilePondUpdateFiles"
/>
<br>
<p style="text-align:center">hi</p>
<div v-for="imageFile in imageFiles" :key="imageFile.name" style="text-align:center;">
<img :src="imageFile.src" alt="" style="width: 200px">
</div>
</div>
</template>
methods: {
handleFilePondInit: function () {
console.log("FilePond has initialized");
// FilePond instance methods are available on `this.$refs.pond`
this.$refs.pond.getFiles();
console.log(this.$refs.pond.getFiles())
},
// 파일 staging시
oninitfile() {
console.log("onInit!")
},
FilePondUpdateFiles(files) {
console.log("기본적인 이미지 검색 방식", this.$refs['pond'].file)
console.log(files)
console.log("onAdd!")
this.imageFiles = files
console.log("총 사진 데이터", this.imageFiles)
}
},
thank you for reading and help, have a nice day !

Answer 1

FilePond doesn't read EXIF data it only corrects the orientation header parameter so images can be oriented correctly on older browsers.
You could use Exif-JS combined with FilePond to read EXIF data.
https://github.com/exif-js/exif-js
Use the beforeAddFile hook to read the EXIF data and add it to the file item.
This is a plain JavaScript example which should be straight forward to port to Vue.
FilePond.create({
beforeAddFile: (fileItem) => new Promise(resolve => {
const success = EXIF.getData(fileItem.file, () => {
fileItem.setMetadata('exifdata', EXIF.getAllTags())
// Added EXIF data to file item, we're done
resolve(true);
})
// Can't read EXIF data, don't add file
if (!success) resolve(false);
})
})