From 86d98e5e42b15b129da80b6912b9771156c01baf Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 7 Apr 2020 15:04:25 +0300
Subject: [PATCH] Fixed #262, Fixed #265

---
 src/components/dialog/Dialog.vue         |  1 +
 src/components/fileupload/FileUpload.vue | 38 ++++++++++++++++++++----
 src/views/fileupload/FileUploadDemo.vue  |  6 +++-
 src/views/fileupload/FileUploadDoc.vue   | 16 +++++++++-
 4 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 9a38cbf23..06c1f3008 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -28,6 +28,7 @@
 <script>
 import UniqueComponentId from '../utils/UniqueComponentId';
 import DomHandler from '../utils/DomHandler';
+
 export default {
     inheritAttrs: false,
     props: {
diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
index 46092227c..395ebb8a1 100644
--- a/src/components/fileupload/FileUpload.vue
+++ b/src/components/fileupload/FileUpload.vue
@@ -25,6 +25,10 @@
                     </div>
                 </div>
             </div>
+            <div class="p-fileupload-empty" v-if="$scopedSlots.empty && !hasFiles">
+                <slot name="empty">
+                </slot>
+            </div>
         </div>
     </div>
     <span :class="basicChooseButtonClass" @mouseup="onBasicUploaderClick" v-else-if="isBasic">
@@ -38,6 +42,7 @@
 import Button from '../button/Button';
 import ProgressBar from '../progressbar/ProgressBar';
 import Message from '../message/Message';
+import DomHandler from '../utils/DomHandler';
 
 export default {
     props: {
@@ -233,17 +238,38 @@ export default {
 
             return true;
         },
-        onDragEnter() {
-
-        },
-        onDragLeave() {
-
+        onDragEnter(event) {
+            console.log('enter');
+            if (!this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
         },
         onDragOver() {
-
+            if (!this.disabled) {
+                DomHandler.addClass(this.$refs.content, 'p-fileupload-highlight');
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        },
+        onDragLeave() {
+            if (!this.disabled) {
+                DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
+            }
         },
         onDrop() {
+            if (!this.disabled) {
+                DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
+                event.stopPropagation();
+                event.preventDefault();
 
+                const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+                const allowDrop = this.multiple || (files && files.length === 1);
+
+                if (allowDrop) {
+                    this.onFileSelect(event);
+                }
+            }
         },
         onBasicUploaderClick() {
             if (this.hasFiles) {
diff --git a/src/views/fileupload/FileUploadDemo.vue b/src/views/fileupload/FileUploadDemo.vue
index 560be670a..aea8e289b 100644
--- a/src/views/fileupload/FileUploadDemo.vue
+++ b/src/views/fileupload/FileUploadDemo.vue
@@ -9,7 +9,11 @@
 
         <div class="content-section implementation">
             <h3>Advanced</h3>
-            <FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" />
+            <FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
+                <template #empty>
+                    <p>Drag and drop files to here to upload.</p>
+                </template>
+            </FileUpload>
 
             <h3>Basic</h3>
             <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
index d04b15529..d7659e124 100644
--- a/src/views/fileupload/FileUploadDoc.vue
+++ b/src/views/fileupload/FileUploadDoc.vue
@@ -56,6 +56,16 @@ import FileUpload from 'primevue/fileupload';
 				<h3>Request Customization</h3>
 				<p>XHR request to upload the files can be customized using the before-upload callback that passes the xhr instance and FormData object as event parameters.</p>
 
+                <h3>Empty Template</h3>
+                <p>When there is no file selected, you may use the empty slot to display content.</p>
+<CodeHighlight>
+&lt;FileUpload name="demo[]" url="./upload" /&gt;
+    &lt;template #empty&gt;
+        &lt;p&gt;Drag and drop files to here to upload.&lt;/p&gt;
+    &lt;/template&gt;
+&lt;/FileUpload&gt;
+</CodeHighlight>
+
 				<h3>Properties</h3>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
@@ -252,7 +262,11 @@ import FileUpload from 'primevue/fileupload';
 <CodeHighlight>
 <template v-pre>
 &lt;h3&gt;Advanced&lt;/h3&gt;
-&lt;FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" /&gt;
+&lt;FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000"&gt;
+    &lt;template #empty&gt;
+        &lt;p&gt;Drag and drop files to here to upload.&lt;/p&gt;
+    &lt;/template&gt;
+&lt;/FileUpload&gt;
 
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" /&gt;