baclight/app/javascript/controllers/logo_upload_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static values = {
        logoType: String,
        employerName: String
    }
  static targets = ["preview", "previewContainer", "logoSelect", "logofield", "initialLogoFile"];

  async connect() {
    console.log('in connect');
    const initValue = this.logofieldTarget.value
    console.log(initValue)
    if (initValue) {
      const response = await fetch(`/id_card/${this.logoTypeValue}_logos/${initValue}/image`); // Fetch the binary data
      const blob = await response.blob();
      const objectUrl = URL.createObjectURL(blob);
      this.previewTarget.src = objectUrl;
      this.previewContainerTarget.classList.remove("hidden");
    }
    // Remember to revoke the URL when the controller is disconnected if necessary
    // this.disconnect = () => URL.revokeObjectURL(objectUrl);
  }

  uploadLogo(event) {
    console.log('in uploadLogo');
    event.preventDefault()
    const file = event.target.files[0];
    if (!file) return;

    const logoType = this.logoTypeValue

    let newFileName = file.name
    if (logoType == "network") {
      console.log("n " + newFileName);
      newFileName = this.determineNetworkFilename(file)
      this.addOptionToSelect(newFileName)
    } else if (logoType == "employer") {
      newFileName = this.determineEmployerFilename(file)
      file.name = newFileName
    }
    
    this.previewFile(file);
    this.uploadLogoToServer(file);
    
    
    
    this.logofieldTarget.value = newFileName;
  }

  previewFile(file) {
    console.log('in previewFile');
    const reader = new FileReader();
    reader.onload = (e) => {
      this.previewTarget.src = e.target.result;
      this.previewContainerTarget.classList.remove("hidden");
    };
    reader.readAsDataURL(file);
  }

  async uploadLogoToServer(file) {
    console.log('in uploadLogoToServer');
    const formData = new FormData();
    formData.append(`id_card_${this.logoTypeValue}_logo[logo_file]`, file);

    const csrfToken = document.querySelector("meta[name='csrf-token']").content;

    try {
      const response = await fetch(`/id_card/${this.logoTypeValue}_logos/`, {
        method: "POST",
        headers: {
          "X-CSRF-Token": csrfToken
        },
        body: formData
      });

      if (response.ok) {
        console.log('Upload successful!')
      } else {
        console.error("Failed to track event.");
      }
    } catch (error) {
      console.error("Network error:", error);
    }
  }

  addOptionToSelect(name) {
    const blankOptionIndex = 0;
    const newOption = new Option(name, name, true, true)

    if (this.logofieldTarget.options.length > blankOptionIndex + 1) {
      this.logofieldTarget.insertBefore(newOption, this.logofieldTarget.options[blankOptionIndex + 1]);
    } else {
      this.logofieldTarget.appendChild(newOption);
    }

    this.logofieldTarget.value = name;
  }

  determineNetworkFilename(file) {
    const fileExtension = file.name.split('.').pop();
    const primaryNetworkName = prompt("Enter the name for the primary network (Usually 'Cigna' or 'MedCost':");
    const secondaryNetworkName = prompt("Enter the name for the primary network (ex: Health Partners):");
    const logoFilename = this.titleizeText(primaryNetworkName).concat(this.titleizeText(secondaryNetworkName)).concat("Logo.").concat(fileExtension).replaceAll(' ', '');

    return logoFilename
  }

  determineEmployerFilename(file) {
    const fileExtension = file.name.split('.').pop();
    const employerName = this.employerNameValue
    const logoFilename = this.titleizeText(employerName).concat("Logo.").concat(fileExtension).replaceAll(' ', '');

    return logoFilename
  }

  titleizeText(text) {
    const titleized = text.toLowerCase();

    return titleized.replace(/(^|\s)\S/g, function(match) {
      return match.toUpperCase();
    });
  }  
}