this repo has no description
Compose now supports paste/drag-drop files
+56
+56
src/components/compose.jsx
+56
src/components/compose.jsx
···
415
415
};
416
416
}, []);
417
417
418
+
useEffect(() => {
419
+
const handleItems = (e) => {
420
+
if (mediaAttachments.length >= maxMediaAttachments) {
421
+
alert(`You can only attach up to ${maxMediaAttachments} files.`);
422
+
return;
423
+
}
424
+
const { items } = e.clipboardData || e.dataTransfer;
425
+
const files = [];
426
+
for (let i = 0; i < items.length; i++) {
427
+
const item = items[i];
428
+
if (item.kind === 'file') {
429
+
const file = item.getAsFile();
430
+
if (file && supportedMimeTypes.includes(file.type)) {
431
+
files.push(file);
432
+
}
433
+
}
434
+
}
435
+
console.log({ files });
436
+
if (files.length > 0) {
437
+
e.preventDefault();
438
+
e.stopPropagation();
439
+
// Auto-cut-off files to avoid exceeding maxMediaAttachments
440
+
const max = maxMediaAttachments - mediaAttachments.length;
441
+
const allowedFiles = files.slice(0, max);
442
+
if (allowedFiles.length <= 0) {
443
+
alert(`You can only attach up to ${maxMediaAttachments} files.`);
444
+
return;
445
+
}
446
+
const mediaFiles = allowedFiles.map((file) => ({
447
+
file,
448
+
type: file.type,
449
+
size: file.size,
450
+
url: URL.createObjectURL(file),
451
+
id: null,
452
+
description: null,
453
+
}));
454
+
setMediaAttachments([...mediaAttachments, ...mediaFiles]);
455
+
}
456
+
};
457
+
window.addEventListener('paste', handleItems);
458
+
const handleDragover = (e) => {
459
+
// Prevent default if there's files
460
+
if (e.dataTransfer.items.length > 0) {
461
+
e.preventDefault();
462
+
e.stopPropagation();
463
+
}
464
+
};
465
+
window.addEventListener('dragover', handleDragover);
466
+
window.addEventListener('drop', handleItems);
467
+
return () => {
468
+
window.removeEventListener('paste', handleItems);
469
+
window.removeEventListener('dragover', handleDragover);
470
+
window.removeEventListener('drop', handleItems);
471
+
};
472
+
}, [mediaAttachments]);
473
+
418
474
return (
419
475
<div id="compose-container" class={standalone ? 'standalone' : ''}>
420
476
<div class="compose-top">