Auto User Location Detection

import "./styles.css";
import * as filestack from "filestack-js";

const filestackApiKey = "YOUR_API_KEY";
const ipstackAccessKey = "IPSTACK_ACCESS_KEY";

const blockedCountries = ["US", "EG"]; // Example

// Cache location data to avoid multiple API calls
let locationData = null;

document
  .getElementById("openPicker")
  .addEventListener("click", async function () {
    try {
      // Get location data (using cache if available)
      if (!locationData) {
        locationData = await getLocation();
      }

      // Check if country is blocked
      if (blockedCountries.includes(locationData.country_code)) {
        console.log("Upload is blocked from your location");
        return false;
      }

      // Open FileStack picker
      openFilePicker();
    } catch (error) {
      console.error("Error in file picker click handler:", error);
      showError("Unable to process your request. Please try again.");
    }
  });

/**
 * Opens FileStack picker with predefined options
 */
function openFilePicker() {
  const client = filestack.init(filestackApiKey);
  const pickerOptions = {
    maxFiles: 1,
    onUploadDone: displayImageWithLocation,
  };
  const picker = client.picker(pickerOptions).open();
}

/**
 * Displays image preview with location information
 * @param {Object} files - Object containing uploaded file data
 */
function displayImageWithLocation(files) {
  if (files.filesUploaded.length === 1) {
    const { url, filename } = files.filesUploaded[0];
    const { city, region_name, country_name } = locationData;

    // Update the HTML content to show image preview and location info
    document.getElementById("app").innerHTML = `
      

      
Preview Link: ${url}

      
File Name: ${filename}

      
Uplaoded From: ${city}, ${region_name}, ${country_name} 

      
      `;
  } else {
    // Handle case where no file or multiple files were uploaded
    document.getElementById("app").innerHTML = `
          
File upload failed. Try again!
 
          `;
  }
}

/**
 * Retrieves location data from the ipstack API
 * @returns {Promise} - Promise that resolves with location data or rejects with error
 */
async function getLocation() {
  // Construct the API URL with access key
  const url = `https://api.ipstack.com/check?access_key=${ipstackAccessKey}&output=json`;
  const options = { method: "GET", headers: { Accept: "application/json" } };

  try {
    const response = await fetch(url, options);
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error(error);
  }
}

Copied!