appview-less bluesky client
handle pasting and dropping files on composer
+34
-6
+34
-6
src/components/PostComposer.svelte
+34
-6
src/components/PostComposer.svelte
···
158
158
159
159
const unfocus = () => (_state.focus = 'null');
160
160
161
-
const handleFileSelect = (event: Event) => {
162
-
selectingFile = false;
163
-
164
-
const input = event.target as HTMLInputElement;
165
-
const files = input.files;
161
+
const handleFiles = (files: File[]) => {
166
162
if (!files || files.length === 0) return;
167
163
168
164
const existingImages =
···
239
235
const blobUrl = (media.video as AtpBlob<string>).ref.$link;
240
236
uploadVideo(blobUrl, media.video.mimeType).then((r) => handleUpload(blobUrl, r));
241
237
}
238
+
};
239
+
240
+
const handlePaste = (e: ClipboardEvent) => {
241
+
const files = Array.from(e.clipboardData?.items ?? [])
242
+
.filter((item) => item.kind === 'file')
243
+
.map((item) => item.getAsFile())
244
+
.filter((file): file is File => file !== null);
245
+
246
+
if (files.length > 0) {
247
+
e.preventDefault();
248
+
handleFiles(files);
249
+
}
250
+
};
251
+
252
+
const handleDrop = (e: DragEvent) => {
253
+
e.preventDefault();
254
+
const files = Array.from(e.dataTransfer?.files ?? []);
255
+
if (files.length > 0) handleFiles(files);
256
+
};
257
+
258
+
const handleFileSelect = (e: Event) => {
259
+
e.preventDefault();
260
+
selectingFile = false;
261
+
262
+
const input = e.target as HTMLInputElement;
263
+
if (input.files) handleFiles(Array.from(input.files));
242
264
243
265
input.value = '';
244
266
};
···
489
511
{#if replying}
490
512
{@render attachedPost(replying, 'replying')}
491
513
{/if}
492
-
<div class="composer space-y-2">
514
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
515
+
<div
516
+
class="composer space-y-2"
517
+
onpaste={handlePaste}
518
+
ondrop={handleDrop}
519
+
ondragover={(e) => e.preventDefault()}
520
+
>
493
521
<div class="relative grid">
494
522
<!-- todo: replace this with a proper rich text editor -->
495
523
<div