mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 12:19:08 +01:00
feat(publish-widget): add dropzone for media attachments (#85)
This commit is contained in:
parent
5e54cbe792
commit
d3e4e22ed1
1 changed files with 12 additions and 1 deletions
|
@ -1,6 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { CreateStatusParams, StatusVisibility } from 'masto'
|
import type { CreateStatusParams, StatusVisibility } from 'masto'
|
||||||
import { fileOpen } from 'browser-fs-access'
|
import { fileOpen } from 'browser-fs-access'
|
||||||
|
import { useDropZone } from '@vueuse/core'
|
||||||
|
|
||||||
const {
|
const {
|
||||||
draftKey,
|
draftKey,
|
||||||
|
@ -96,6 +97,15 @@ async function publish() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const dropZoneRef = ref<HTMLDivElement>()
|
||||||
|
|
||||||
|
async function onDrop(files: File[] | null) {
|
||||||
|
if (files)
|
||||||
|
await uploadAttachments(files)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (!draft.attachments.length && !draft.params.status) {
|
if (!draft.attachments.length && !draft.params.status) {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
@ -122,8 +132,9 @@ onUnmounted(() => {
|
||||||
<AccountAvatar :account="currentUser.account" w-12 h-12 />
|
<AccountAvatar :account="currentUser.account" w-12 h-12 />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<div
|
<div
|
||||||
|
ref="dropZoneRef"
|
||||||
flex flex-col gap-3 flex-1
|
flex flex-col gap-3 flex-1
|
||||||
:class="isSending ? 'pointer-events-none' : ''"
|
:class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? 'border-2 border-dashed border-primary' : '']"
|
||||||
>
|
>
|
||||||
<textarea
|
<textarea
|
||||||
v-model="draft.params.status"
|
v-model="draft.params.status"
|
||||||
|
|
Loading…
Reference in a new issue