Skip to content

Commit 16f04b4

Browse files
YOGESH-08YOGESH-08
authored
Merge pull request #511 from Gslmao-s-Org/Gslmao/fixDropArea
fix: images can be dropped inside the upload box
2 parents c3c72e2 + 7c0120a commit 16f04b4

1 file changed

Lines changed: 97 additions & 75 deletions

File tree

‎src/app/upload/page.tsx‎

Lines changed: 97 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -433,84 +433,105 @@ export default function Page() {
433433
</Dropzone>
434434
)}
435435
{previews.length > 0 && (
436-
<section className="mt-6 flex w-full flex-col items-center">
437-
<div className="flex w-max gap-4">
438-
<div className="scrollbar-hide flex w-[80vw] max-w-4xl flex-col justify-between overflow-x-auto overflow-y-hidden rounded-[40px] border-[6px] border-[#A78BFA] bg-indigo-900/10 p-4 dark:border-indigo-900 sm:p-6 md:w-max md:p-8">
439-
<DndContext
440-
sensors={sensors}
441-
collisionDetection={closestCenter}
442-
onDragEnd={handleDndKitDragEnd}
443-
>
444-
<SortableContext
445-
items={previews.map((item) => item.id)}
446-
strategy={horizontalListSortingStrategy}
447-
>
448-
<div className="flex w-full snap-x snap-mandatory gap-3 sm:gap-4 md:gap-5">
449-
{previews.map((item, index) => (
450-
<SortablePreview key={item.id} id={item.id}>
451-
<div className="group relative w-full flex-shrink-0 snap-start sm:w-1/2 md:w-1/3 lg:w-1/4">
452-
<div className="relative h-64 w-48 overflow-hidden rounded-xl outline outline-2 outline-white sm:h-60">
453-
{/* Index badge */}
454-
<div className="absolute left-0 top-0 z-20 flex h-8 w-8 items-center justify-center rounded-br-xl rounded-tl-xl bg-slate-600 sm:h-10 sm:w-10">
455-
<span className="text-sm font-bold text-white sm:text-xl">
456-
{index + 1}
457-
</span>
458-
</div>
459-
460-
{/* Delete button */}
461-
<Button
462-
onClick={(e) => {
463-
e.preventDefault();
464-
e.stopPropagation();
465-
handleDelete(index);
466-
}}
467-
variant="destructive"
468-
size="icon"
469-
className="absolute right-0 top-0 z-20 h-8 w-8 rounded-bl-xl rounded-tr-xl bg-pink-800 hover:bg-red-900 sm:h-10 sm:w-10"
470-
title="Delete"
471-
>
472-
<FiTrash className="h-4 w-4 sm:h-5 sm:w-5" />
473-
</Button>
474-
475-
{/* Preview */}
476-
<div className="absolute inset-0 z-10">
477-
{item.file.type.startsWith("image/") ? (
478-
<Image
479-
src={item.preview}
480-
alt={`Page ${index + 1}`}
481-
fill
482-
className="object-cover"
483-
unoptimized
484-
/>
485-
) : (
486-
<iframe
487-
src={item.preview}
488-
title={`PDF preview ${index + 1}`}
489-
className="h-full w-full border-0"
490-
/>
491-
)}
492-
</div>
493-
</div>
436+
<Dropzone
437+
onDrop={onDrop}
438+
accept={{
439+
"image/*": [".jpeg", ".jpg", ".png", ".gif", ".bmp", ".webp"],
440+
"application/pdf": [".pdf"],
441+
}}
442+
multiple={true}
443+
>
444+
{({ getRootProps, getInputProps, isDragActive }) => {
445+
const pdfUploaded = files.some(
446+
(f) => f.type === "application/pdf",
447+
);
448+
449+
return (
450+
<section
451+
{...getRootProps()}
452+
className="mt-6 flex w-full flex-col items-center">
453+
<input {...getInputProps()} />
454+
<div className="flex w-max gap-4">
455+
<div className="scrollbar-hide flex w-[80vw] max-w-4xl flex-col justify-between overflow-x-auto overflow-y-hidden rounded-[40px] border-[6px] border-[#A78BFA] bg-indigo-900/10 p-4 dark:border-indigo-900 sm:p-6 md:w-max md:p-8">j
456+
<DndContext
457+
sensors={sensors}
458+
collisionDetection={closestCenter}
459+
onDragEnd={handleDndKitDragEnd}
460+
>
461+
<SortableContext
462+
items={previews.map((item) => item.id)}
463+
strategy={horizontalListSortingStrategy}
464+
>
465+
<div className="flex w-full snap-x snap-mandatory gap-3 sm:gap-4 md:gap-5">
466+
{previews.map((item, index) => (
467+
<SortablePreview key={item.id} id={item.id}>
468+
<div className="group relative w-full flex-shrink-0 snap-start sm:w-1/2 md:w-1/3 lg:w-1/4">
469+
<div className="relative h-64 w-48 overflow-hidden rounded-xl outline outline-2 outline-white sm:h-60">
470+
{/* Index badge */}
471+
<div className="absolute left-0 top-0 z-20 flex h-8 w-8 items-center justify-center rounded-br-xl rounded-tl-xl bg-slate-600 sm:h-10 sm:w-10">
472+
<span className="text-sm font-bold text-white sm:text-xl">
473+
{index + 1}
474+
</span>
475+
</div>
476+
477+
{/* Delete button */}
478+
<Button
479+
onClick={(e) => {
480+
e.preventDefault();
481+
e.stopPropagation();
482+
handleDelete(index);
483+
}}
484+
variant="destructive"
485+
size="icon"
486+
className="absolute right-0 top-0 z-20 h-8 w-8 rounded-bl-xl rounded-tr-xl bg-pink-800 hover:bg-red-900 sm:h-10 sm:w-10"
487+
title="Delete"
488+
>
489+
<FiTrash className="h-4 w-4 sm:h-5 sm:w-5" />
490+
</Button>
491+
492+
{/* Preview */}
493+
<div className="absolute inset-0 z-10">
494+
{item.file.type.startsWith("image/") ? (
495+
<Image
496+
src={item.preview}
497+
alt={`Page ${index + 1}`}
498+
fill
499+
className="object-cover"
500+
unoptimized
501+
/>
502+
) : (
503+
<iframe
504+
src={item.preview}
505+
title={`PDF preview ${index + 1}`}
506+
className="h-full w-full border-0"
507+
/>
508+
)}
509+
</div>
510+
</div>
511+
</div>
512+
</SortablePreview>
513+
))}
494514
</div>
495-
</SortablePreview>
496-
))}
515+
516+
{previews.length > 2 && (
517+
<div className="mt-3 text-center text-sm text-white/50">
518+
Swipe to view more &gt;&gt;
519+
</div>
520+
)}
521+
</SortableContext>
522+
</DndContext>
523+
</div>
524+
</div>
525+
{previews.length > 1 && (
526+
<div className="mt-4 text-right text-xl text-white/50">
527+
Drag to reorder
497528
</div>
529+
)}
530+
</section>
531+
)
532+
}}
533+
</Dropzone>
498534

499-
{previews.length > 2 && (
500-
<div className="mt-3 text-center text-sm text-white/50">
501-
Swipe to view more &gt;&gt;
502-
</div>
503-
)}
504-
</SortableContext>
505-
</DndContext>
506-
</div>
507-
</div>
508-
{previews.length > 1 && (
509-
<div className="mt-4 text-right text-xl text-white/50">
510-
Drag to reorder
511-
</div>
512-
)}
513-
</section>
514535
)}
515536

516537
<Button
@@ -522,6 +543,7 @@ export default function Page() {
522543
</Button>
523544
</div>
524545
</div>
546+
525547

526548
{zoomIndex !== null && (
527549
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70">

0 commit comments

Comments
 (0)