how can I fetch exifdata(like gps) with 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);

  })

})