image-to-geojson/index.js

"use strict";

const util = require("util");
const exif = util.promisify(require("exif"));
const exifGeoJSON = require("exif-geojson");
const saveAsFile = require("save-as-file").default;

let dropzone = document.querySelector(".dropzone");
let filepicker = document.querySelector(".filepicker");

function highlight() {
	dropzone.classList.add("dropping");
}

function unhighlight() {
	dropzone.classList.remove("dropping");
}

function handleFiles(files) {
	Array.from(files).forEach((file) => {
		let filename = file.name;
		let newFilename = `${filename}.geojson`;
		
		file.arrayBuffer()
			.then((arrayBuffer) => {
				let buffer = Buffer.from(arrayBuffer);
				return exif(buffer);
			})
			.then((exifData) => {
				// NOTE: Library output format is wrong, so this is a workaround for that.
				// Ref. https://github.com/compwright/exif-geojson/issues/6
				let geoJSON = JSON.stringify({
					type: "Feature",
					geometry: {
						type: "Point",
						coordinates: exifGeoJSON(exifData).geometry.coordinates
					}
				});

				let blob = new File([ geoJSON ], { type: "application/geo+json" });
				saveAsFile(blob, newFilename);
			})
			.catch((error) => {
				console.log(error);
				alert(`An error occurred: ${error.message}`);
			});
	});
}

dropzone.addEventListener("drop", (event) => {
	event.preventDefault();
	event.stopPropagation();
	unhighlight();

	handleFiles(event.dataTransfer.files);
});

dropzone.addEventListener("dragover", (event) => {
	event.preventDefault();
});

dropzone.addEventListener("dragenter", (event) => {
	event.preventDefault();
	highlight();
});

dropzone.addEventListener("dragleave", (event) => {
	event.preventDefault();
	unhighlight();
});

filepicker.addEventListener("change", (event) => {
	handleFiles(event.target.files);
});