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 rounded-lg border border-gray-300"
        @error="console.log('Image failed to load:', transformedImageUrl)"
        @load="console.log('Image loaded successfully:', transformedImageUrl)"
      />
      <button 
        @click="removeImage"
        type="button"
        class="absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
      >
        <Icon name="heroicons:x-mark" class="w-4 h-4" />
      </button>
    </div>

    <!-- Upload Area -->
    <div 
      v-if="!modelValue?.url"
      class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors"
      @dragover.prevent="isDragging = true"
      @dragleave.prevent="isDragging = false"
      @drop.prevent="handleDrop"
      :class="{ 'border-blue-400 bg-blue-50': isDragging }"
    >
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        @change="handleFileSelect"
        class="hidden"
      />
      
      <div class="space-y-3">
        <Icon name="heroicons:photo" class="w-12 h-12 text-gray-400 mx-auto" />
        <div>
          <p class="text-gray-600">
            <button 
              type="button"
              @click="$refs.fileInput.click()"
              class="text-blue-600 hover:text-blue-500 font-medium"
            >
              Click to upload
            </button>
            or drag and drop
          </p>
          <p class="text-sm text-gray-500">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 text-gray-700 mb-1">
        Alt Text (for accessibility)
      </label>
      <input
        :value="modelValue.alt || ''"
        @input="updateAltText($event.target.value)"
        placeholder="Describe this image..."
        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
      />
    </div>

    <!-- Upload Progress -->
    <div v-if="isUploading" class="space-y-2">
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-600">Uploading...</span>
        <span class="text-gray-600">{{ uploadProgress }}%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div 
          class="bg-blue-600 h-2 rounded-full transition-all duration-300"
          :style="`width: ${uploadProgress}%`"
        />
      </div>
    </div>

    <!-- Error Message -->
    <div v-if="errorMessage" class="text-sm text-red-600">
      {{ 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>