Spaces:
Sleeping
Sleeping
File size: 3,573 Bytes
3a84963 5cf313a 3a84963 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
/**
* File upload and processing functionality
* This file handles the image upload, processing, and result display
*/
// Store the current GeoJSON filename for download
let currentGeoJsonFilename = null;
// DOM elements
const uploadForm = document.getElementById('uploadForm');
const imageFileInput = document.getElementById('imageFile');
const featureTypeSelect = document.getElementById('featureType');
const processingStatus = document.getElementById('processingStatus');
const errorMessage = document.getElementById('errorMessage');
const resultsSection = document.getElementById('resultsSection');
const geojsonDisplay = document.getElementById('geojsonDisplay');
const downloadBtn = document.getElementById('downloadBtn');
// Handle form submission
uploadForm.addEventListener('submit', function(event) {
event.preventDefault();
// Get the selected file
const file = imageFileInput.files[0];
// Check if a file was selected
if (!file) {
showError('Please select an image file to upload');
return;
}
// Check file type
const validImageTypes = ['image/png', 'image/jpeg', 'image/tiff', 'image/tif'];
if (!validImageTypes.includes(file.type)) {
showError('Please select a valid image file (PNG, JPG, or TIFF)');
return;
}
// Show processing status and hide error message
processingStatus.classList.remove('d-none');
errorMessage.classList.add('d-none');
resultsSection.classList.add('d-none');
// Create FormData object for file upload
const formData = new FormData();
formData.append('file', file);
// Upload the file
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
return response.json().then(errorData => {
throw new Error(errorData.error || 'Upload failed');
});
}
return response.json();
})
.then(data => {
// Hide processing status
processingStatus.classList.add('d-none');
// Store the GeoJSON filename for download
currentGeoJsonFilename = data.geojson_filename;
// Display the results
displayResults(data);
})
.catch(error => {
// Hide processing status and show error
processingStatus.classList.add('d-none');
showError(error.message || 'An error occurred during processing');
});
});
// Display the processing results
function displayResults(data) {
// Show the results section
resultsSection.classList.remove('d-none');
// Initialize the map if not already done
if (!map) {
initMap();
}
// Display the GeoJSON on the map
displayGeoJSON(data.geojson);
// Format and display the GeoJSON in the text area
geojsonDisplay.textContent = formatGeoJSON(data.geojson);
// Scroll to the results section
resultsSection.scrollIntoView({ behavior: 'smooth' });
}
// Show error message
function showError(message) {
errorMessage.textContent = message;
errorMessage.classList.remove('d-none');
}
// Handle download button click
downloadBtn.addEventListener('click', function() {
if (currentGeoJsonFilename) {
window.location.href = `/download/${currentGeoJsonFilename}`;
} else {
showError('No GeoJSON data available for download');
}
});
// Clear file input when the page loads
document.addEventListener('DOMContentLoaded', function() {
imageFileInput.value = '';
});
|