ghostguild-org/app/components/ImageUpload.vue

<template>
  <div class="space-y-4">
    <!-- Current Image Preview -->
    <div v-if="modelValue?.url" class="relative">
      <img
        :src="transformedImageUrl"
        :alt="modelValue.alt || 'Event image'"
        class="w-full h-48 object-cover"
        style="border: 1px solid var(--border)"
        @error="console.log('Image failed to load:', transformedImageUrl)"
        @load="console.log('Image loaded successfully:', transformedImageUrl)"
      >
      <button
        type="button"
        class="absolute top-2 right-2 p-1 rounded-full transition-colors"
        style="background: var(--ember); color: var(--parch-text)"
        @click="removeImage"
      >
        <Icon name="heroicons:x-mark" class="w-4 h-4" />
      </button>
    </div>

    <!-- Upload Area -->
    <div
      v-if="!modelValue?.url"
      class="border-2 border-dashed p-6 text-center transition-colors"
      :style="
        isDragging
          ? 'border-color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent)'
          : 'border-color: var(--border)'
      "
      @dragover.prevent="isDragging = true"
      @dragleave.prevent="isDragging = false"
      @drop.prevent="handleDrop"
    >
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        class="hidden"
        @change="handleFileSelect"
      >

      <div class="space-y-3">
        <Icon
          name="heroicons:photo"
          class="w-12 h-12 mx-auto"
          style="color: var(--text-dim)"
        />
        <div>
          <p style="color: var(--text-dim)">
            <button
              type="button"
              class="font-medium"
              style="color: var(--candle)"
              @click="$refs.fileInput.click()"
            >
              Click to upload
            </button>
            or drag and drop
          </p>
          <p class="text-sm" style="color: var(--text-faint)">
            PNG, JPG, GIF up to 10MB
          </p>
        </div>
      </div>
    </div>

    <!-- Alt Text Input -->
    <div v-if="modelValue?.url">
      <label
        class="block text-sm font-medium mb-1"
        style="color: var(--text-bright)"
      >
        Alt Text (for accessibility)
      </label>
      <input
        :value="modelValue.alt || ''"
        placeholder="Describe this image..."
        class="w-full px-3 py-2 alt-text-input"
        @input="updateAltText($event.target.value)"
      >
    </div>

    <!-- Upload Progress -->
    <div v-if="isUploading" class="space-y-2">
      <div class="flex items-center justify-between text-sm">
        <span style="color: var(--text-dim)">Uploading...</span>
        <span style="color: var(--text-dim)">{{ uploadProgress }}%</span>
      </div>
      <div
        class="w-full rounded-full h-2"
        style="background: var(--surface)"
      >
        <div
          class="h-2 rounded-full transition-all duration-300"
          :style="`width: ${uploadProgress}%; background: var(--candle)`"
        />
      </div>
    </div>

    <!-- Error Message -->
    <div v-if="errorMessage" class="text-sm" style="color: var(--ember)">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => null,
  },
});

const emit = defineEmits(["update:modelValue"]);

const isDragging = ref(false);
const isUploading = ref(false);
const uploadProgress = ref(0);
const errorMessage = ref("");
const fileInput = ref();

// Transform image URL for preview (smaller size)
const transformedImageUrl = computed(() => {
  console.log("modelValue in computed:", props.modelValue);

  // If we have the direct URL, use it
  if (props.modelValue?.url) {
    console.log("Using direct URL:", props.modelValue.url);
    return props.modelValue.url;
  }

  // Otherwise try to construct from publicId
  if (props.modelValue?.publicId) {
    const config = useRuntimeConfig();
    const constructedUrl = `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/w_400,h_200,c_fill,f_auto,q_auto/${props.modelValue.publicId}`;
    console.log("Constructed URL:", constructedUrl);
    return constructedUrl;
  }

  console.log("No URL or publicId found");
  return "";
});

const handleFileSelect = (event) => {
  const file = event.target.files[0];
  if (file) {
    uploadFile(file);
  }
};

const handleDrop = (event) => {
  isDragging.value = false;
  const files = event.dataTransfer.files;
  if (files.length > 0) {
    uploadFile(files[0]);
  }
};

const uploadFile = async (file) => {
  // Validate file
  if (!file.type.startsWith("image/")) {
    errorMessage.value = "Please select an image file";
    return;
  }

  if (file.size > 10 * 1024 * 1024) {
    // 10MB
    errorMessage.value = "File size must be less than 10MB";
    return;
  }

  errorMessage.value = "";
  isUploading.value = true;
  uploadProgress.value = 0;

  try {
    // Create form data for upload
    const formData = new FormData();
    formData.append("file", file);

    // Upload to Cloudinary
    const response = await $fetch(`/api/upload/image`, {
      method: "POST",
      body: formData,
      onUploadProgress: (progress) => {
        uploadProgress.value = Math.round(
          (progress.loaded / progress.total) * 100,
        );
      },
    });

    console.log("Upload response:", response);

    // Update the model value
    emit("update:modelValue", {
      url: response.secure_url,
      publicId: response.public_id,
      alt: "",
    });
  } catch (error) {
    console.error("Upload failed:", error);
    errorMessage.value = "Upload failed. Please try again.";
  } finally {
    isUploading.value = false;
    uploadProgress.value = 0;
  }
};

const removeImage = () => {
  emit("update:modelValue", null);
};

const updateAltText = (altText) => {
  emit("update:modelValue", {
    ...props.modelValue,
    alt: altText,
  });
};
</script>

<style scoped>
.alt-text-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.alt-text-input:focus {
  outline: none;
  border-color: var(--candle);
}
</style>