From 2a71b5d7f2dbea03d2b09836ab3ae24982f5b112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20Bora=20=C4=B0nevi?= <bora.inevi@nmi-agro.nl>
Date: Fri, 31 Oct 2025 13:35:53 +0100
Subject: [PATCH 1/8] Make the whole drop area the shapefile label

---
 .../blocks/mijnpercelen/form-upload.tsx       | 102 ++++++++----------
 1 file changed, 46 insertions(+), 56 deletions(-)

diff --git a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
index 124993fc4..9fbc74b4b 100644
--- a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
+++ b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
@@ -361,13 +361,54 @@ export function MijnPercelenUploadForm({
                                                         name,
                                                         onBlur,
                                                         onChange,
-                                                        disabled,
                                                         ref,
                                                     },
                                                 }) => (
                                                     <FormItem>
                                                         <div>Shapefile</div>
-                                                        <div className="relative">
+                                                        <Input
+                                                            name={name}
+                                                            onBlur={onBlur}
+                                                            onChange={async (
+                                                                event,
+                                                            ) => {
+                                                                await handleFileChange(
+                                                                    event,
+                                                                    onChange,
+                                                                )
+                                                            }}
+                                                            ref={ref}
+                                                            type="file"
+                                                            placeholder=""
+                                                            className="hidden"
+                                                            multiple
+                                                            required
+                                                            id="file-upload"
+                                                        />
+                                                        <label
+                                                            className="relative block"
+                                                            htmlFor="file-upload"
+                                                            aria-label="Upload shapefile files by clicking or dragging and dropping"
+                                                            onKeyDown={(e) => {
+                                                                if (
+                                                                    e.key ===
+                                                                        "Enter" ||
+                                                                    e.key ===
+                                                                        " "
+                                                                ) {
+                                                                    e.preventDefault()
+                                                                    document
+                                                                        .getElementById(
+                                                                            "file-upload",
+                                                                        )
+                                                                        ?.click()
+                                                                }
+                                                            }}
+                                                            onDragOver={
+                                                                handleDragOver
+                                                            }
+                                                            onDrop={handleDrop}
+                                                        >
                                                             {fileNames.length >
                                                                 0 && (
                                                                 <Button
@@ -403,58 +444,7 @@ export function MijnPercelenUploadForm({
                                                                         "border-green-500 bg-green-50",
                                                                 )}
                                                             >
-                                                                <Input
-                                                                    name={name}
-                                                                    onBlur={
-                                                                        onBlur
-                                                                    }
-                                                                    onChange={async (
-                                                                        event,
-                                                                    ) => {
-                                                                        await handleFileChange(
-                                                                            event,
-                                                                            onChange,
-                                                                        )
-                                                                    }}
-                                                                    ref={ref}
-                                                                    type="file"
-                                                                    placeholder=""
-                                                                    className="hidden"
-                                                                    multiple
-                                                                    required
-                                                                    disabled={
-                                                                        disabled
-                                                                    }
-                                                                    id="file-upload"
-                                                                />
-                                                                <label
-                                                                    htmlFor="file-upload"
-                                                                    className="flex flex-col items-center justify-center w-full h-full cursor-pointer"
-                                                                    aria-label="Upload shapefile files by clicking or dragging and dropping"
-                                                                    onKeyDown={(
-                                                                        e,
-                                                                    ) => {
-                                                                        if (
-                                                                            e.key ===
-                                                                                "Enter" ||
-                                                                            e.key ===
-                                                                                " "
-                                                                        ) {
-                                                                            e.preventDefault()
-                                                                            document
-                                                                                .getElementById(
-                                                                                    "file-upload",
-                                                                                )
-                                                                                ?.click()
-                                                                        }
-                                                                    }}
-                                                                    onDragOver={
-                                                                        handleDragOver
-                                                                    }
-                                                                    onDrop={
-                                                                        handleDrop
-                                                                    }
-                                                                >
+                                                                <div className="flex flex-col items-center justify-center w-full h-full cursor-pointer">
                                                                     {uploadState ===
                                                                         "idle" && (
                                                                         <>
@@ -509,9 +499,9 @@ export function MijnPercelenUploadForm({
                                                                             </div>
                                                                         </>
                                                                     )}
-                                                                </label>
+                                                                </div>
                                                             </div>
-                                                        </div>
+                                                        </label>
                                                         <FormDescription />
                                                         <FormMessage />
                                                     </FormItem>

From d756cf47dc15821680c4b08f8824f1ca2d66577d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20Bora=20=C4=B0nevi?= <bora.inevi@nmi-agro.nl>
Date: Fri, 31 Oct 2025 13:37:39 +0100
Subject: [PATCH 2/8] Add changeset

---
 .changeset/new-hornets-hope.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/new-hornets-hope.md

diff --git a/.changeset/new-hornets-hope.md b/.changeset/new-hornets-hope.md
new file mode 100644
index 000000000..c990c5066
--- /dev/null
+++ b/.changeset/new-hornets-hope.md
@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+The users can now drop files onto the entire shapefile upload area during farm creation, not just on top of the text and icons.

From 8f4113999d4e3ef5bd4c35208024ced6f210ee0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20Bora=20=C4=B0nevi?= <bora.inevi@nmi-agro.nl>
Date: Fri, 31 Oct 2025 16:19:06 +0100
Subject: [PATCH 3/8] Insert dropped files into the input properly

---
 fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
index 9fbc74b4b..046730914 100644
--- a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
+++ b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
@@ -231,6 +231,9 @@ export function MijnPercelenUploadForm({
             )
 
             form.setValue("shapefile", updatedFiles, { shouldValidate: true })
+            const container = new DataTransfer()
+            updatedFiles.forEach((f) => container.items.add(f))
+            document.getElementById("file-upload").files = container.files
             await handleFilesSet(updatedFiles)
             e.dataTransfer.clearData()
         }

From 06314a50ac6381f766828b180ee6e966f7707959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20Bora=20=C4=B0nevi?= <bora.inevi@nmi-agro.nl>
Date: Fri, 31 Oct 2025 16:24:13 +0100
Subject: [PATCH 4/8] Update changeset

---
 .changeset/free-donkeys-greet.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/free-donkeys-greet.md

diff --git a/.changeset/free-donkeys-greet.md b/.changeset/free-donkeys-greet.md
new file mode 100644
index 000000000..5278e36ed
--- /dev/null
+++ b/.changeset/free-donkeys-greet.md
@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Users can now drop files onto the shapefile drop area in the creation wizard, and it will work.

From ae5645786c327094433368bfa5a0ab259549f06e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20Bora=20=C4=B0nevi?= <bora.inevi@nmi-agro.nl>
Date: Fri, 31 Oct 2025 17:00:00 +0100
Subject: [PATCH 5/8] Nitpicks

---
 .../blocks/mijnpercelen/form-upload.tsx          | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
index 046730914..208be18dd 100644
--- a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
+++ b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
@@ -231,9 +231,17 @@ export function MijnPercelenUploadForm({
             )
 
             form.setValue("shapefile", updatedFiles, { shouldValidate: true })
-            const container = new DataTransfer()
-            updatedFiles.forEach((f) => container.items.add(f))
-            document.getElementById("file-upload").files = container.files
+
+            const fileInput = document.getElementById(
+                "file-upload",
+            ) as HTMLInputElement | null
+            if (fileInput) {
+                const container = new DataTransfer()
+                updatedFiles.forEach((f) => {
+                    container.items.add(f)
+                })
+                fileInput.files = container.files
+            }
             await handleFilesSet(updatedFiles)
             e.dataTransfer.clearData()
         }
@@ -389,6 +397,8 @@ export function MijnPercelenUploadForm({
                                                             id="file-upload"
                                                         />
                                                         <label
+                                                            tabIndex={0}
+                                                            role="button"
                                                             className="relative block"
                                                             htmlFor="file-upload"
                                                             aria-label="Upload shapefile files by clicking or dragging and dropping"

From a78df5de0466fd5ab1cd5471d4d799da54144ecf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mert=20Bora=20=C4=B0nevi?= <bora.inevi@nmi-agro.nl>
Date: Mon, 3 Nov 2025 08:16:41 +0100
Subject: [PATCH 6/8] Do not use aria role for the file drop area

---
 fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
index 208be18dd..3ffd047ae 100644
--- a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
+++ b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
@@ -398,7 +398,6 @@ export function MijnPercelenUploadForm({
                                                         />
                                                         <label
                                                             tabIndex={0}
-                                                            role="button"
                                                             className="relative block"
                                                             htmlFor="file-upload"
                                                             aria-label="Upload shapefile files by clicking or dragging and dropping"

From 42ddf7be51eda1e14cdaa4e54f580869834772d8 Mon Sep 17 00:00:00 2001
From: Sven Verweij <37927107+SvenVw@users.noreply.github.com>
Date: Mon, 3 Nov 2025 09:55:09 +0100
Subject: [PATCH 7/8] chore: add biome explaination that Label is focusable

---
 fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
index 3ffd047ae..2264cc1be 100644
--- a/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
+++ b/fdm-app/app/components/blocks/mijnpercelen/form-upload.tsx
@@ -397,6 +397,7 @@ export function MijnPercelenUploadForm({
                                                             id="file-upload"
                                                         />
                                                         <label
+                                                            // biome-ignore lint/a11y/noNoninteractiveTabindex: The label is interactive and should be focusable
                                                             tabIndex={0}
                                                             className="relative block"
                                                             htmlFor="file-upload"

From b0fb323118f29f47d7303da46ce3c1ca3f7deac7 Mon Sep 17 00:00:00 2001
From: Sven Verweij <37927107+SvenVw@users.noreply.github.com>
Date: Mon, 3 Nov 2025 14:25:21 +0100
Subject: [PATCH 8/8] fix: dragging for shapefile upload as well

---
 .changeset/free-donkeys-greet.md              |   2 +-
 .../components/blocks/soil/form-upload.tsx    | 215 +++++++++---------
 2 files changed, 108 insertions(+), 109 deletions(-)

diff --git a/.changeset/free-donkeys-greet.md b/.changeset/free-donkeys-greet.md
index 5278e36ed..4520e0a63 100644
--- a/.changeset/free-donkeys-greet.md
+++ b/.changeset/free-donkeys-greet.md
@@ -2,4 +2,4 @@
 "@svenvw/fdm-app": minor
 ---
 
-Users can now drop files onto the shapefile drop area in the creation wizard, and it will work.
+Fixes that user can drop files as well for Mijn Percelen shapefile upload and Soil Analysis pdf upload.
diff --git a/fdm-app/app/components/blocks/soil/form-upload.tsx b/fdm-app/app/components/blocks/soil/form-upload.tsx
index 2efbc980a..fc1f32374 100644
--- a/fdm-app/app/components/blocks/soil/form-upload.tsx
+++ b/fdm-app/app/components/blocks/soil/form-upload.tsx
@@ -82,17 +82,26 @@ export function SoilAnalysisUploadForm() {
         }
     }
 
-    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    const handleDragOver = (e: React.DragEvent<HTMLLabelElement>) => {
         e.preventDefault() // Prevent default to allow drop
     }
 
-    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    const handleDrop = (e: React.DragEvent<HTMLLabelElement>) => {
         e.preventDefault() // Prevent default file opening in browser
         if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
             const file = e.dataTransfer.files[0]
             form.setValue("soilAnalysisFile", file, { shouldValidate: true })
             setFileName(file.name)
             setUploadStatus("idle") // Reset status when a new file is dropped
+
+            const fileInput = document.getElementById(
+                "file-upload",
+            ) as HTMLInputElement | null
+            if (fileInput) {
+                const container = new DataTransfer()
+                container.items.add(file)
+                fileInput.files = container.files
+            }
             e.dataTransfer.clearData()
         }
     }
@@ -131,117 +140,107 @@ export function SoilAnalysisUploadForm() {
                                             }) => (
                                                 <FormItem>
                                                     <div>Bodemanalyse</div>
-                                                    <div>
-                                                        <div
-                                                            className={cn(
-                                                                "flex flex-col items-center justify-center w-full h-32 rounded-md border border-dashed border-muted-foreground/25 px-6 py-4 text-center transition-colors hover:bg-muted/25",
-                                                                uploadStatus ===
-                                                                    "success" &&
-                                                                    "border-green-500 bg-green-50",
-                                                                uploadStatus ===
-                                                                    "error" &&
-                                                                    "border-red-500 bg-red-50",
+                                                    <Input
+                                                        name={name}
+                                                        onBlur={onBlur}
+                                                        onChange={(event) => {
+                                                            onChange(
+                                                                event.target
+                                                                    .files?.[0],
+                                                            )
+                                                            handleFileChange(
+                                                                event,
+                                                            )
+                                                        }}
+                                                        ref={ref}
+                                                        type="file"
+                                                        placeholder=""
+                                                        className="hidden"
+                                                        accept=".pdf"
+                                                        multiple={false}
+                                                        required={true}
+                                                        disabled={disabled}
+                                                        id="file-upload"
+                                                    />
+                                                    <label
+                                                        htmlFor="file-upload"
+                                                        className={cn(
+                                                            "flex flex-col items-center justify-center w-full h-32 rounded-md border border-dashed border-muted-foreground/25 px-6 py-4 text-center transition-colors hover:bg-muted/25",
+                                                            uploadStatus ===
+                                                                "success" &&
+                                                                "border-green-500 bg-green-50",
+                                                            uploadStatus ===
+                                                                "error" &&
+                                                                "border-red-500 bg-red-50",
+                                                        )}
+                                                        onDragOver={
+                                                            handleDragOver
+                                                        }
+                                                        onDrop={handleDrop}
+                                                    >
+                                                        <div className="flex flex-col items-center justify-center w-full h-full cursor-pointer">
+                                                            {uploadStatus ===
+                                                                "idle" && (
+                                                                <>
+                                                                    <FileUp className="w-8 h-8 mb-2 text-muted-foreground" />
+                                                                    <div className="text-sm text-muted-foreground">
+                                                                        {fileName
+                                                                            ? fileName
+                                                                            : "Klik om te uploaden of sleep een PDF bestand naar hier"}
+                                                                    </div>
+                                                                    <div className="text-xs text-muted-foreground mt-1">
+                                                                        PDF tot
+                                                                        5MB
+                                                                    </div>
+                                                                </>
                                                             )}
-                                                            onDragOver={
-                                                                handleDragOver
-                                                            }
-                                                            onDrop={handleDrop}
-                                                        >
-                                                            <Input
-                                                                name={name}
-                                                                onBlur={onBlur}
-                                                                onChange={(
-                                                                    event,
-                                                                ) => {
-                                                                    onChange(
-                                                                        event
-                                                                            .target
-                                                                            .files?.[0],
-                                                                    )
-                                                                    handleFileChange(
-                                                                        event,
-                                                                    )
-                                                                }}
-                                                                ref={ref}
-                                                                type="file"
-                                                                placeholder=""
-                                                                className="hidden"
-                                                                accept=".pdf"
-                                                                multiple={false}
-                                                                required={true}
-                                                                disabled={
-                                                                    disabled
-                                                                }
-                                                                id="file-upload"
-                                                            />
-                                                            <label
-                                                                htmlFor="file-upload"
-                                                                className="flex flex-col items-center justify-center w-full h-full cursor-pointer"
-                                                            >
-                                                                {uploadStatus ===
-                                                                    "idle" && (
-                                                                    <>
-                                                                        <FileUp className="w-8 h-8 mb-2 text-muted-foreground" />
-                                                                        <div className="text-sm text-muted-foreground">
-                                                                            {fileName
-                                                                                ? fileName
-                                                                                : "Klik om te uploaden of sleep een PDF bestand naar hier"}
-                                                                        </div>
-                                                                        <div className="text-xs text-muted-foreground mt-1">
-                                                                            PDF
-                                                                            tot
-                                                                            5MB
-                                                                        </div>
-                                                                    </>
-                                                                )}
 
-                                                                {uploadStatus ===
-                                                                    "uploading" && (
-                                                                    <>
-                                                                        <Upload className="w-8 h-8 mb-2 text-primary animate-pulse" />
-                                                                        <div className="text-sm">
-                                                                            Uploading{" "}
-                                                                            {
-                                                                                fileName
-                                                                            }
-                                                                            ...
-                                                                        </div>
-                                                                        <Progress
-                                                                            value={
-                                                                                uploadProgress
-                                                                            }
-                                                                            className="w-full mt-2 h-2"
-                                                                        />
-                                                                    </>
-                                                                )}
+                                                            {uploadStatus ===
+                                                                "uploading" && (
+                                                                <>
+                                                                    <Upload className="w-8 h-8 mb-2 text-primary animate-pulse" />
+                                                                    <div className="text-sm">
+                                                                        Uploading{" "}
+                                                                        {
+                                                                            fileName
+                                                                        }
+                                                                        ...
+                                                                    </div>
+                                                                    <Progress
+                                                                        value={
+                                                                            uploadProgress
+                                                                        }
+                                                                        className="w-full mt-2 h-2"
+                                                                    />
+                                                                </>
+                                                            )}
 
-                                                                {uploadStatus ===
-                                                                    "success" && (
-                                                                    <>
-                                                                        <CheckCircle className="w-8 h-8 mb-2 text-green-500" />
-                                                                        <div className="text-sm text-green-600">
-                                                                            Uploaden
-                                                                            succesvol!
-                                                                        </div>
-                                                                    </>
-                                                                )}
+                                                            {uploadStatus ===
+                                                                "success" && (
+                                                                <>
+                                                                    <CheckCircle className="w-8 h-8 mb-2 text-green-500" />
+                                                                    <div className="text-sm text-green-600">
+                                                                        Uploaden
+                                                                        succesvol!
+                                                                    </div>
+                                                                </>
+                                                            )}
 
-                                                                {uploadStatus ===
-                                                                    "error" && (
-                                                                    <>
-                                                                        <AlertCircle className="w-8 h-8 mb-2 text-red-500" />
-                                                                        <div className="text-sm text-red-600">
-                                                                            Uploaden
-                                                                            mislukt.
-                                                                            Probeer
-                                                                            het
-                                                                            opnieuw.
-                                                                        </div>
-                                                                    </>
-                                                                )}
-                                                            </label>
+                                                            {uploadStatus ===
+                                                                "error" && (
+                                                                <>
+                                                                    <AlertCircle className="w-8 h-8 mb-2 text-red-500" />
+                                                                    <div className="text-sm text-red-600">
+                                                                        Uploaden
+                                                                        mislukt.
+                                                                        Probeer
+                                                                        het
+                                                                        opnieuw.
+                                                                    </div>
+                                                                </>
+                                                            )}
                                                         </div>
-                                                    </div>
+                                                    </label>
                                                     <FormDescription />
                                                     <FormMessage />
                                                 </FormItem>