mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-02-20 09:16:15 +00:00
more fixes and final result
This commit is contained in:
AndzejsP
parent
b5b94b592f
commit
175ddd2e0e
@ -18,9 +18,9 @@
|
||||
<!-- FILES -->
|
||||
<div v-if="fileList.length > 0" class="flex flex-col max-h-64 ">
|
||||
<TransitionGroup name="list" tag="div"
|
||||
class="flex flex-col flex-grow overflow-y-scroll pr-2 scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
|
||||
class="flex flex-col flex-grow overflow-y-auto scrollbar-thin scrollbar-track-bg-light scrollbar-thumb-bg-light-tone hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark dark:scrollbar-thumb-bg-dark-tone dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
|
||||
<div v-for="file in fileList" :key="file.name">
|
||||
<div class=" pb-1" :title="file.name">
|
||||
<div class=" m-1" :title="file.name">
|
||||
|
||||
<div
|
||||
class="flex flex-row items-center gap-1 text-left p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary dark:hover:bg-primary">
|
||||
@ -61,12 +61,15 @@
|
||||
</TransitionGroup>
|
||||
|
||||
</div>
|
||||
<div v-if="fileList.length > 0" class="flex items-center ">
|
||||
<div v-if="fileList.length > 0" class="flex items-center mx-1">
|
||||
|
||||
<!-- ADDITIONAL INFO PANEL -->
|
||||
|
||||
<div class="whitespace-nowrap">
|
||||
Total size:
|
||||
<div class="whitespace-nowrap flex flex-row gap-2">
|
||||
<p class="font-bold ">
|
||||
Total size:
|
||||
</p>
|
||||
|
||||
{{ totalSize }}
|
||||
|
||||
({{ fileList.length }})
|
||||
@ -180,7 +183,7 @@ export default {
|
||||
// console.log(this.fileList)
|
||||
},
|
||||
sendMessageEvent(msg) {
|
||||
|
||||
this.fileList=[]
|
||||
this.$emit('messageSentEvent', msg)
|
||||
|
||||
},
|
||||
@ -214,16 +217,17 @@ export default {
|
||||
})
|
||||
},
|
||||
fileList: {
|
||||
// Calculate total size
|
||||
handler(val, oldVal) {
|
||||
let total = 0
|
||||
if (val.length > 0) {
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
total = total + parseInt(val[i].size)
|
||||
//console.log(val[i].size)
|
||||
|
||||
}
|
||||
}
|
||||
this.totalSize = filesize(total,false)
|
||||
console.log(val)
|
||||
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
@ -5,18 +5,18 @@
|
||||
<div key="dropmenu" v-if="show"
|
||||
class="select-none text-slate-50 absolute top-0 left-0 right-0 bottom-0 flex flex-col items-center justify-center bg-black bg-opacity-50 duration-200 backdrop-blur-sm "
|
||||
@dragleave.prevent="panelLeave($event)" @drop.stop.prevent="panelDrop($event)">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-8 rounded-lg shadow-lg border-dashed border-4 border-secondary w-4/5 h-4/5 " :class="dropRelease?'':'pointer-events-none'">
|
||||
<div class="flex flex-col items-center justify-center p-8 rounded-lg shadow-lg border-dashed border-4 border-secondary w-4/5 h-4/5 "
|
||||
:class="dropRelease ? '' : 'pointer-events-none'">
|
||||
|
||||
|
||||
<div class="text-4xl text-center" >
|
||||
<div class="text-4xl text-center">
|
||||
<slot>
|
||||
|
||||
Drop your files here
|
||||
<!-- <div v-if="fileList.length == 0">
|
||||
<!-- <div v-if="fileList.length == 0">
|
||||
Drop your files here
|
||||
</div> -->
|
||||
</slot>
|
||||
</slot>
|
||||
<!-- <div v-if="fileList.length > 0" class="flex flex-row gap-2 items-center">
|
||||
<i data-feather="file" class="w-12 h-12"></i>
|
||||
Files to upload
|
||||
@ -89,11 +89,61 @@ export default {
|
||||
// this.fileList = this.fileList.filter((item) => item != file)
|
||||
// // console.log(this.fileList)
|
||||
// },
|
||||
panelDrop(event) {
|
||||
async panelDrop(event) {
|
||||
|
||||
|
||||
const supportsFileSystemAccessAPI =
|
||||
'getAsFileSystemHandle' in DataTransferItem.prototype;
|
||||
const supportsWebkitGetAsEntry =
|
||||
'webkitGetAsEntry' in DataTransferItem.prototype;
|
||||
|
||||
|
||||
if (!supportsFileSystemAccessAPI && !supportsWebkitGetAsEntry) {
|
||||
// Cannot handle directories.
|
||||
return;
|
||||
}
|
||||
const fileHandlesPromises = [...event.dataTransfer.items]
|
||||
// …by including only files (where file misleadingly means actual file _or_
|
||||
// directory)…
|
||||
.filter((item) => item.kind === 'file')
|
||||
// …and, depending on previous feature detection…
|
||||
.map((item) =>
|
||||
supportsFileSystemAccessAPI
|
||||
// …either get a modern `FileSystemHandle`…
|
||||
? item.getAsFileSystemHandle()
|
||||
// …or a classic `FileSystemFileEntry`.
|
||||
: item.webkitGetAsEntry(),
|
||||
);
|
||||
|
||||
|
||||
let dirList =[]
|
||||
// Loop over the array of promises.
|
||||
for await (const handle of fileHandlesPromises) {
|
||||
// This is where we can actually exclusively act on the directories.
|
||||
|
||||
|
||||
if (handle.kind === 'directory' || handle.isDirectory) {
|
||||
|
||||
|
||||
dirList.push(handle.name)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.dropRelease = true
|
||||
if (event.dataTransfer.files.length > 0) {
|
||||
[...event.dataTransfer.files].forEach(element => {
|
||||
this.fileList.push(element)
|
||||
|
||||
if(!dirList.includes(element.name)){
|
||||
this.fileList.push(element)
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -101,7 +151,7 @@ export default {
|
||||
feather.replace()
|
||||
})
|
||||
this.$emit('panelDrop', this.fileList)
|
||||
this.fileList=[]
|
||||
this.fileList = []
|
||||
this.show = false
|
||||
|
||||
},
|
||||
|
||||
@ -1063,9 +1063,10 @@ export default {
|
||||
return
|
||||
},
|
||||
setFileListChat(files) {
|
||||
console.log('file',files)
|
||||
this.fileList = files.filter(item => item.type !='')
|
||||
this.$refs.chatBox.fileList = this.fileList
|
||||
|
||||
|
||||
//this.fileList = files
|
||||
this.$refs.chatBox.fileList =files
|
||||
|
||||
this.isDragOverChat = false
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user