@bagelink/vue 1.2.93 → 1.2.99

package/src/components/form/inputs/Upload/useFileUpload.ts

@@ -0,0 +1,144 @@
+import type { BglFile, QueueFile } from './upload.types'
+import { useBagel } from '@bagelink/vue'
+import { ref, computed, onMounted } from 'vue'
+import { files } from './upload'
+
+interface UseFileUploadProps {
+	multiple?: boolean
+	dirPath?: string
+	accept?: string
+	disabled?: boolean
+}
+
+export function useFileUpload(props: UseFileUploadProps = {}) {
+	files.setBaseUrl(useBagel().host)
+
+	const fileQueue = ref<QueueFile[]>([])
+	const storageFiles = ref<BglFile[]>([])
+	const pk = ref<string[]>([])
+
+	// Computed
+	const pathKeys = computed(() => {
+		const storagePathKeys = storageFiles.value.map(file => file.path_key)
+		return [...pk.value, ...storagePathKeys]
+	})
+
+	// File handling methods
+	const fileToUrl = (file: File) => URL.createObjectURL(file)
+
+	const addFile = (file?: File | File[] | FileList | null) => {
+		if (!file) return
+
+		let filesToAdd: File[] = []
+
+		if (file instanceof File) {
+			filesToAdd = [file]
+		} else if (file instanceof FileList) {
+			filesToAdd = Array.from(file)
+		} else if (Array.isArray(file)) {
+			filesToAdd = file
+		}
+
+		const newQueueFiles = filesToAdd.map(f => ({
+			name: f.name,
+			file: f,
+			progress: 0
+		}))
+
+		fileQueue.value.push(...newQueueFiles)
+	}
+
+	const removeFile = async (pathKeyOrFile: string | File) => {
+		if (typeof pathKeyOrFile === 'string') {
+			// Remove from both lists
+			storageFiles.value = storageFiles.value.filter(file => file.path_key !== pathKeyOrFile)
+
+			const pathKeyIndex = pk.value.indexOf(pathKeyOrFile)
+			if (pathKeyIndex !== -1) {
+				pk.value.splice(pathKeyIndex, 1)
+			}
+
+			try {
+				await files.delete(pathKeyOrFile)
+			} catch (error) {
+				console.error('Error deleting file:', error)
+			}
+		} else if (pathKeyOrFile) {
+			const index = fileQueue.value.findIndex(({ file }) => file.name === pathKeyOrFile.name)
+			if (index !== -1) {
+				fileQueue.value.splice(index, 1)
+			}
+		}
+	}
+
+	const flushQueue = async () => {
+		for (const file of fileQueue.value) {
+			file.uploading = true
+
+			// If not multiple, replace the existing file
+			if (!props.multiple) {
+				pk.value.splice(0, 1)
+			}
+
+			try {
+				const { data } = await files.upload(file.file, {
+					onUploadProgress: (e: ProgressEvent) => {
+						file.progress = (e.loaded / e.total) * 100 - 1
+					},
+					dirPath: props.dirPath,
+				})
+				pk.value.push(data.path_key)
+			} catch (error) {
+				console.error('Error uploading file:', error)
+			}
+		}
+
+		// Clear the queue after processing
+		fileQueue.value = []
+	}
+
+	// UI interaction
+	const browse = (upload = false) => {
+		if (props.disabled) return
+
+		const input = document.createElement('input')
+		input.type = 'file'
+		input.multiple = !!props.multiple
+		input.accept = props.accept || ''
+
+		input.onchange = (e: Event) => {
+			addFile((e.target as HTMLInputElement).files)
+			if (upload) {
+				flushQueue()
+			}
+		}
+
+		input.click()
+	}
+
+	// Load initial files
+	onMounted(() => {
+		if (props.dirPath) {
+			files.list(props.dirPath)
+				.then((response) => {
+					const responseData = Array.isArray(response.data)
+						? response.data
+						: [response.data]
+					storageFiles.value.push(...responseData)
+				})
+				.catch((error) => { console.error('Error loading files:', error) })
+		}
+	})
+
+	return {
+		fileQueue,
+		storageFiles,
+		pk,
+		pathKeys,
+		fileToUrl,
+		removeFile,
+		flushQueue,
+		addFile,
+		browse,
+	}
+}

package/src/components/form/inputs/index.ts

@@ -21,3 +21,5 @@ export { default as TelInput } from './TelInput.vue'
 export { default as TextInput } from './TextInput.vue'
 export { default as ToggleInput } from './ToggleInput.vue'
 export { default as UploadInput } from './Upload/UploadInput.vue'
+
+export { useFileUpload } from './Upload/useFileUpload'

package/src/components/lightbox/Lightbox.vue

@@ -63,6 +63,16 @@ function clickOutside() {
 
 const upgradeHeaders = (url: string) => url.replace(/http:\/\//, '//')
 
+function downloadFile() {
+	const link = document.createElement('a')
+	const src = currentItem.src || ''
+	link.target = '_blank'
+	link.href = upgradeHeaders(src)
+	link.download = src ? src.split('/').pop() || 'download' : 'download'
+	document.body.appendChild(link)
+	link.click()
+	document.body.removeChild(link)
+}
 defineExpose({ open, close })
 </script>
 
@@ -108,8 +118,7 @@ defineExpose({ open, close })
 					<Btn
 						v-if="currentItem?.download && currentItem?.src" class="color-white" round thin flat icon="download"
 						value="Download File"
-						:href="upgradeHeaders(currentItem?.src)"
-						download
+						@click="downloadFile"
 					/>
 					<div v-if="!currentItem?.openFile && !currentItem?.download" />
 				</div>
@@ -128,34 +137,40 @@ defineExpose({ open, close })
 							class="vw90"
 						/>
 
-						<embed
+						<div
 							v-else-if="item?.type === 'pdf' && item?.src"
-							:src="normalizeURL(item?.src)"
-							type="application/pdf"
-							width="100%"
-							height="1080"
-							:title="item?.name"
 							class="vw90"
 						>
-						<div v-else class="file-info txt-white flex m_block align-items-start gap-025">
-							<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
-							<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />
+							<embed
+								:src="normalizeURL(item?.src)"
+								type="application/pdf"
+								width="100%"
+								height="1080"
+								:title="item?.name"
+								class="vw90"
+							>
+						</div>
+						<div v-else class="vw90">
+							<div class="file-info txt-white flex m_block align-items-start gap-025">
+								<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
+								<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />
 
-							<div class="txt-start">
-								<p class="mx-0 light">
-									File:
-									<span class="semi word-break-all ">
-										{{ item?.name }}
-									</span>
-								</p>
-								<p class="mx-0 ">
-									Type:
-									<span class="semi">
-										{{ item?.type }}
-									</span>
-								</p>
-								<Btn :href="item?.src" target="_blank" round thin class="mt-1" value="Open file" />
-								<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
+								<div class="txt-start">
+									<p class="mx-0 light">
+										File:
+										<span class="semi word-break-all ">
+											{{ item?.name }}
+										</span>
+									</p>
+									<p class="mx-0 ">
+										Type:
+										<span class="semi">
+											{{ item?.type }}
+										</span>
+									</p>
+									<Btn :href="item?.src" target="_blank" round thin class="mt-1" value="Open file" />
+									<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
+								</div>
 							</div>
 						</div>
 					</template>