ytptube/ui/app/components/TextDropzone.vue

<template>
  <div class="file-dropzone is-relative" :class="{ 'is-dragging': isDragging }" @drop.prevent="handleDrop"
    @dragover.prevent="handleDragOver" @dragenter.prevent="handleDragEnter" @dragleave.prevent="handleDragLeave"
    @click="handleClick">

    <textarea ref="textareaRef" class="control textarea is-fullwidth" :class="{ 'is-focused': isDragging }"
      :value="model" @input="handleInput" :disabled="disabled" :placeholder="placeholder" :id="id" />

    <div v-if="isDragging"
      class="dropzone-overlay has-background-success-90 is-flex is-align-items-center is-justify-content-center">
      <div class="has-text-centered has-text-dark">
        <span class="icon is-large"><i class="fa-solid fa-file-arrow-down fa-3x" /></span>
        <p class="mt-3 is-size-5 has-text-weight-bold">Drop file here</p>
      </div>
    </div>

    <input ref="fileInputRef" type="file" :accept="accept" @change="handleFileSelect" style="display: none" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  disabled?: boolean
  placeholder?: string
  id?: string
  accept?: string
  maxSize?: number
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  placeholder: '',
  id: '',
  accept: '',
  maxSize: 2 * 1024 * 1024
})

const model = defineModel<string>({ default: '' })

const emit = defineEmits<{ error: [message: string] }>()

const textareaRef = ref<HTMLTextAreaElement | null>(null)
const fileInputRef = ref<HTMLInputElement | null>(null)
const isDragging = ref<boolean>(false)
const dragCounter = ref<number>(0)

const handleInput = (event: Event): void => {
  const target = event.target as HTMLTextAreaElement
  model.value = target.value
}

const handleDragEnter = (event: DragEvent): void => {
  if (props.disabled) {
    return
  }

  dragCounter.value++
  if (event.dataTransfer?.types.includes('Files')) {
    isDragging.value = true
  }
}

const handleDragLeave = (_event: DragEvent): void => {
  if (props.disabled) {
    return
  }

  dragCounter.value--
  if (0 === dragCounter.value) {
    isDragging.value = false
  }
}

const handleDragOver = (event: DragEvent): void => {
  if (props.disabled) {
    return
  }

  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = 'copy'
  }
}

const handleDrop = async (event: DragEvent): Promise<void> => {
  if (props.disabled) {
    return
  }

  isDragging.value = false
  dragCounter.value = 0

  const files = event.dataTransfer?.files
  if (!files || 0 === files.length) {
    return
  }

  const file = files[0]
  if (file) {
    await processFile(file)
  }
}

const handleClick = (event: MouseEvent): void => {
  if (props.disabled) {
    return
  }

  const selection = window.getSelection()
  if (selection && selection.toString().length > 0) {
    return
  }

  if (event && event.target === textareaRef.value) {
    return
  }
}

const handleFileSelect = async (event: Event): Promise<void> => {
  const target = event.target as HTMLInputElement
  const files = target.files

  if (!files || 0 === files.length) {
    return
  }

  const file = files[0]
  if (file) {
    await processFile(file)
  }

  if (fileInputRef.value) {
    fileInputRef.value.value = ''
  }
}

const processFile = async (file: File): Promise<void> => {
  try {
    if (file.size > props.maxSize) {
      const sizeMB = (file.size / 1024 / 1024).toFixed(2)
      const maxSizeMB = (props.maxSize / 1024 / 1024).toFixed(2)
      const errorMsg = `File too large: ${sizeMB}MB. Maximum allowed size is ${maxSizeMB}MB.`
      emit('error', errorMsg)
      console.error(errorMsg)
      return
    }

    const isBinary = await checkIfBinary(file)
    if (isBinary) {
      const errorMsg = 'File appears to be binary. Please provide a text file.'
      emit('error', errorMsg)
      console.error(errorMsg)
      return
    }

    const text = await readFileAsText(file)
    model.value = text
  } catch (error) {
    const errorMsg = error instanceof Error ? error.message : 'Failed to read file'
    emit('error', errorMsg)
    console.error('Failed to read file:', error)
  }
}

const checkIfBinary = async (file: File): Promise<boolean> => {
  const chunkSize = 8192
  const blob = file.slice(0, chunkSize)

  return new Promise((resolve, reject) => {
    const reader = new FileReader()

    reader.onload = (e: ProgressEvent<FileReader>) => {
      if (!e.target?.result) {
        resolve(false)
        return
      }

      const bytes = new Uint8Array(e.target.result as ArrayBuffer)

      let nullBytes = 0
      let nonPrintable = 0

      for (let i = 0; i < bytes.length; i++) {
        const byte = bytes[i]

        if (undefined === byte) {
          continue
        }

        if (0 === byte) {
          nullBytes++
        }

        if (9 !== byte && 10 !== byte && 13 !== byte && (byte < 32 || byte > 126)) {
          nonPrintable++
        }
      }

      resolve(nullBytes > 0 || (nonPrintable / bytes.length) > 0.3)
    }

    reader.onerror = () => reject(new Error('Failed to read file for binary check'))
    reader.readAsArrayBuffer(blob)
  })
}

const readFileAsText = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()

    reader.onload = (e: ProgressEvent<FileReader>) => {
      if (e.target?.result) {
        resolve(e.target.result as string)
      } else {
        reject(new Error('Failed to read file'))
      }
    }

    reader.onerror = () => reject(new Error('File reading error'))
    reader.readAsText(file)
  })
}

const triggerFileSelect = (): void => {
  if (props.disabled) {
    return
  }
  fileInputRef.value?.click()
}

defineExpose({ triggerFileSelect })
</script>

<style>
.file-dropzone {
  cursor: text;
}

.dropzone-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  pointer-events: none;
  z-index: 10;
}

.file-dropzone.is-dragging textarea {
  box-shadow: --var(--bulma-card-shadow) !important;
  border-color: --var(--bulma-success);
}
</style>