fix: remove send files functionality
This commit is contained in:
@@ -1,169 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
interface Props {
|
|
||||||
modelValue?: File[]
|
|
||||||
maxFiles?: number
|
|
||||||
acceptedTypes?: string
|
|
||||||
maxFileSize?: number // in MB
|
|
||||||
disabled?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'update:modelValue', files: File[]): void
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
modelValue: () => [],
|
|
||||||
maxFiles: 5,
|
|
||||||
acceptedTypes: 'image/*,video/*',
|
|
||||||
maxFileSize: 50,
|
|
||||||
disabled: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>()
|
|
||||||
|
|
||||||
const fileInputRef = ref<HTMLInputElement>()
|
|
||||||
const isDragging = ref(false)
|
|
||||||
const error = ref('')
|
|
||||||
|
|
||||||
const files = computed({
|
|
||||||
get: () => props.modelValue || [],
|
|
||||||
set: (value) => emit('update:modelValue', value)
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleFilesSelected = (selectedFiles: FileList | null) => {
|
|
||||||
if (!selectedFiles) return
|
|
||||||
error.value = ''
|
|
||||||
|
|
||||||
const newFiles = Array.from(selectedFiles)
|
|
||||||
|
|
||||||
if (files.value.length + newFiles.length > props.maxFiles) {
|
|
||||||
error.value = `Massimo ${props.maxFiles} file consentiti`
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const file of newFiles) {
|
|
||||||
if (file.size > props.maxFileSize! * 1024 * 1024) {
|
|
||||||
error.value = `Il file ${file.name} supera il limite di ${props.maxFileSize}MB`
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
files.value = [...files.value, ...newFiles]
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeFile = (index: number) => {
|
|
||||||
files.value.splice(index, 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
const openFileDialog = () => {
|
|
||||||
fileInputRef.value?.click()
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatFileSize = (bytes: number): string => {
|
|
||||||
const mb = Math.round(bytes / (1024 * 1024) * 10) / 10
|
|
||||||
return mb > 0 ? `${mb}MB` : 'Piccolo'
|
|
||||||
}
|
|
||||||
|
|
||||||
const getFileUrl = (file: File) => {
|
|
||||||
return URL.createObjectURL(file)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="media-uploader">
|
|
||||||
<div
|
|
||||||
class="upload-area border-2 border-dashed rounded-3 p-4 text-center cursor-pointer position-relative"
|
|
||||||
:class="{ 'border-primary bg-primary bg-opacity-10': isDragging, 'bg-light': !isDragging }"
|
|
||||||
@dragover.prevent="isDragging = true"
|
|
||||||
@dragleave.prevent="isDragging = false"
|
|
||||||
@drop.prevent="isDragging = false; handleFilesSelected(($event as DragEvent).dataTransfer?.files || null)"
|
|
||||||
@click="!disabled && openFileDialog()"
|
|
||||||
>
|
|
||||||
<BIIcon name="it-upload" size="xl" color="primary" class="mb-3" />
|
|
||||||
<div class="h6 font-weight-bold">
|
|
||||||
Trascina i file qui o <span class="text-primary text-decoration-underline">clicca per selezionare</span>
|
|
||||||
</div>
|
|
||||||
<small class="text-muted d-block mt-2">
|
|
||||||
Massimo {{ maxFiles }} file ({{ maxFileSize }}MB max per file). Tipi: {{ acceptedTypes }}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<input
|
|
||||||
ref="fileInputRef"
|
|
||||||
type="file"
|
|
||||||
:multiple="maxFiles > 1"
|
|
||||||
:accept="acceptedTypes"
|
|
||||||
:disabled="disabled"
|
|
||||||
class="d-none"
|
|
||||||
@change="handleFilesSelected(($event.target as HTMLInputElement).files)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div v-if="error" class="alert alert-danger mt-3 py-2 small" role="alert">
|
|
||||||
{{ error }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="files.length > 0" class="mt-4 row g-3">
|
|
||||||
<div v-for="(file, idx) in files" :key="`file-${idx}`" class="col-6 col-md-4 col-lg-3">
|
|
||||||
<div class="card h-100 position-relative shadow-sm border-0">
|
|
||||||
<div class="ratio ratio-1x1 bg-light rounded-top overflow-hidden">
|
|
||||||
<img v-if="file.type.startsWith('image/')" :src="getFileUrl(file)" class="object-fit-cover" :alt="file.name" />
|
|
||||||
<video v-else-if="file.type.startsWith('video/')" :src="getFileUrl(file)" class="object-fit-cover"></video>
|
|
||||||
<div v-else class="d-flex align-items-center justify-content-center bg-secondary bg-opacity-25">
|
|
||||||
<BIIcon name="it-file" size="xl" color="secondary" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 rounded-circle p-1 d-flex align-items-center justify-content-center shadow"
|
|
||||||
style="width: 28px; height: 28px; z-index: 10;"
|
|
||||||
@click.stop="removeFile(idx)"
|
|
||||||
:disabled="disabled"
|
|
||||||
title="Rimuovi file"
|
|
||||||
>
|
|
||||||
<BIIcon name="it-close" size="sm" color="white" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="card-body p-2 d-flex flex-column justify-content-between">
|
|
||||||
<div class="small text-truncate fw-semibold" :title="file.name">{{ file.name }}</div>
|
|
||||||
<div class="small text-muted d-flex justify-content-between align-items-center mt-1">
|
|
||||||
<span>{{ formatFileSize(file.size) }}</span>
|
|
||||||
<div class="progress flex-grow-1 ms-2" style="height: 4px;" title="Pronto per l'upload">
|
|
||||||
<div class="progress-bar bg-success w-100" role="progressbar"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.upload-area {
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
.upload-area:hover:not(.border-primary) {
|
|
||||||
background-color: #f8f9fa !important;
|
|
||||||
border-color: #0066cc !important;
|
|
||||||
}
|
|
||||||
.cursor-pointer {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.border-dashed {
|
|
||||||
border-style: dashed !important;
|
|
||||||
}
|
|
||||||
.border-2 {
|
|
||||||
border-width: 2px !important;
|
|
||||||
}
|
|
||||||
.object-fit-cover {
|
|
||||||
object-fit: cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,21 +1,20 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
interface Emits {
|
interface Emits {
|
||||||
(e: 'send', message: string, files: File[]): void
|
(e: 'send', message: string): void
|
||||||
}
|
}
|
||||||
|
|
||||||
const emit = defineEmits<Emits>()
|
const emit = defineEmits<Emits>()
|
||||||
|
|
||||||
const message = ref('')
|
const message = ref('')
|
||||||
const isSubmitting = ref(false)
|
const isSubmitting = ref(false)
|
||||||
const files = ref<File[]>([])
|
|
||||||
const fileInputRef = ref<HTMLInputElement>()
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
if (message.value.trim() === '' && files.value.length === 0) return
|
if (message.value.trim() === '') return
|
||||||
|
|
||||||
emit('send', message.value, [...files.value])
|
emit('send', message.value)
|
||||||
message.value = ''
|
message.value = ''
|
||||||
files.value = []
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleKeydown = (e: KeyboardEvent) => {
|
const handleKeydown = (e: KeyboardEvent) => {
|
||||||
@@ -24,55 +23,13 @@ const handleKeydown = (e: KeyboardEvent) => {
|
|||||||
handleSubmit()
|
handleSubmit()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleFileSelect = (e: Event) => {
|
|
||||||
const target = e.target as HTMLInputElement
|
|
||||||
if (target.files) {
|
|
||||||
const newFiles = Array.from(target.files)
|
|
||||||
files.value = [...files.value, ...newFiles].slice(0, 5) // max 5
|
|
||||||
}
|
|
||||||
if (fileInputRef.value) {
|
|
||||||
fileInputRef.value.value = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeFile = (idx: number) => {
|
|
||||||
files.value.splice(idx, 1)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="message-composer mt-3">
|
<div class="message-composer mt-3">
|
||||||
<form @submit.prevent="handleSubmit">
|
<form @submit.prevent="handleSubmit">
|
||||||
|
|
||||||
<div v-if="files.length > 0" class="message-files mb-3">
|
|
||||||
<div v-for="(file, idx) in files" :key="idx" class="message-file-chip">
|
|
||||||
<BIIcon name="it-clip" size="xs" />
|
|
||||||
<span class="text-truncate file-name">{{ file.name }}</span>
|
|
||||||
<button type="button" class="btn-close btn-close-sm" @click="removeFile(idx)" aria-label="Rimuovi allegato"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex align-items-stretch gap-2">
|
<div class="d-flex align-items-stretch gap-2">
|
||||||
<input
|
|
||||||
ref="fileInputRef"
|
|
||||||
type="file"
|
|
||||||
multiple
|
|
||||||
class="d-none"
|
|
||||||
@change="handleFileSelect"
|
|
||||||
accept="image/*,video/*,.pdf,.doc,.docx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-outline-primary btn-square flex-shrink-0"
|
|
||||||
title="Allega file"
|
|
||||||
@click="fileInputRef?.click()"
|
|
||||||
:disabled="isSubmitting || files.length >= 5"
|
|
||||||
>
|
|
||||||
<BIIcon name="it-clip" size="sm" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
v-model="message"
|
v-model="message"
|
||||||
class="form-control chat-textarea m-0"
|
class="form-control chat-textarea m-0"
|
||||||
@@ -84,16 +41,16 @@ const removeFile = (idx: number) => {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="btn btn-primary btn-square flex-shrink-0"
|
class="btn btn-primary btn-square flex-shrink-0"
|
||||||
:disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
|
:disabled="isSubmitting || message.trim() === ''"
|
||||||
title="Invia"
|
title="Invia"
|
||||||
>
|
>
|
||||||
<span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
<span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||||
<BIIcon v-else name="it-arrow-right" size="sm" color="white" />
|
<BIIcon v-else color="white" name="it-arrow-right" size="sm"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<small class="text-muted d-block mt-2">
|
<small class="text-muted d-block mt-2">
|
||||||
`Ctrl` + `Invio` per inviare. Fino a 5 allegati.
|
`Ctrl` + `Invio` per inviare.
|
||||||
</small>
|
</small>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -105,31 +62,6 @@ const removeFile = (idx: number) => {
|
|||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-files {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-file-chip {
|
|
||||||
align-items: center;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #d9e3ee;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 0.4rem 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-name {
|
|
||||||
max-width: 14rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-close-sm {
|
|
||||||
font-size: 0.55rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-textarea {
|
.chat-textarea {
|
||||||
resize: none !important;
|
resize: none !important;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
|||||||
Reference in New Issue
Block a user