Refactor #4129

components/lib/fileupload/FileUpload.vue

@@ -60,6 +60,7 @@ import UploadIcon from 'primevue/icons/upload';
 import Message from 'primevue/message';
 import ProgressBar from 'primevue/progressbar';
 import Ripple from 'primevue/ripple';
+import { DomHandler } from 'primevue/utils';
 import BaseFileUpload from './BaseFileUpload.vue';
 import FileContent from './FileContent.vue';
 
@@ -265,7 +266,7 @@ export default {
         },
         onDragOver(event) {
             if (!this.disabled) {
-                this.$refs.content.classList.add('p-fileupload-highlight');
+                DomHandler.addClass(this.$refs.content, 'p-fileupload-highlight');
                 this.$refs.content.setAttribute('data-p-highlight', true);
                 event.stopPropagation();
                 event.preventDefault();
@@ -273,12 +274,13 @@ export default {
         },
         onDragLeave() {
             if (!this.disabled) {
-                this.$refs.content.classList.remove('p-fileupload-highlight');
+                DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
                 this.$refs.content.setAttribute('data-p-highlight', false);
             }
         },
         onDrop(event) {
             if (!this.disabled) {
+                DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
                 this.$refs.content.setAttribute('data-p-highlight', false);
                 event.stopPropagation();
                 event.preventDefault();

public/themes/arya-blue/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #64B5F6;
+  background-color: rgba(100, 181, 246, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #383838;

public/themes/arya-green/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #81C784;
+  background-color: rgba(129, 199, 132, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #383838;

public/themes/arya-orange/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #FFD54F;
+  background-color: rgba(255, 213, 79, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #383838;

public/themes/arya-purple/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #BA68C8;
+  background-color: rgba(186, 104, 200, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #383838;

public/themes/bootstrap4-dark-blue/theme.css

@@ -4394,6 +4394,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #8dd0ff;
+  background-color: #8dd0ff;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #3f4b5b;
@@ -5959,15 +5963,12 @@
 }
 
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
-.p-breadcrumb .p-breadcrumb-chevron {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-.p-breadcrumb .p-breadcrumb-chevron:before {
-  content: "/";
-}
-
 .fc.fc-theme-standard .fc-highlight {
   background: #476880;
 }
 
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  background-color: #476880;
+}
+
 /* Customizations to the designer theme should be defined here */

public/themes/bootstrap4-dark-purple/theme.css

@@ -4394,6 +4394,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #c298d8;
+  background-color: #c298d8;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #3f4b5b;
@@ -5959,15 +5963,12 @@
 }
 
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
-.p-breadcrumb .p-breadcrumb-chevron {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-.p-breadcrumb .p-breadcrumb-chevron:before {
-  content: "/";
-}
-
 .fc.fc-theme-standard .fc-highlight {
   background: #614c6c;
 }
 
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  background-color: #614c6c;
+}
+
 /* Customizations to the designer theme should be defined here */

public/themes/bootstrap4-light-blue/theme.css

@@ -4394,6 +4394,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #007bff;
+  background-color: #007bff;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;
@@ -5959,15 +5963,12 @@
 }
 
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
-.p-breadcrumb .p-breadcrumb-chevron {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-.p-breadcrumb .p-breadcrumb-chevron:before {
-  content: "/";
-}
-
 .fc.fc-theme-standard .fc-highlight {
   background: #cce5ff;
 }
 
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  background-color: #cce5ff;
+}
+
 /* Customizations to the designer theme should be defined here */

public/themes/bootstrap4-light-purple/theme.css

@@ -4394,6 +4394,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #883cae;
+  background-color: #883cae;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;
@@ -5959,15 +5963,12 @@
 }
 
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
-.p-breadcrumb .p-breadcrumb-chevron {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-.p-breadcrumb .p-breadcrumb-chevron:before {
-  content: "/";
-}
-
 .fc.fc-theme-standard .fc-highlight {
   background: #e7d8ef;
 }
 
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  background-color: #e7d8ef;
+}
+
 /* Customizations to the designer theme should be defined here */

public/themes/fluent-light/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #0078d4;
+  background-color: #edebe9;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #edebe9;

public/themes/lara-dark-blue/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #93C5FD;
+  background-color: rgba(147, 197, 253, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #0b213f;

public/themes/lara-dark-indigo/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #A5B4FC;
+  background-color: rgba(165, 180, 252, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #0b213f;

public/themes/lara-dark-purple/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #C4B5FD;
+  background-color: rgba(196, 181, 253, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #0b213f;

public/themes/lara-dark-teal/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #5EEAD4;
+  background-color: rgba(94, 234, 212, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #0b213f;

public/themes/lara-light-blue/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #3B82F6;
+  background-color: #EFF6FF;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/lara-light-indigo/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #6366F1;
+  background-color: #EEF2FF;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/lara-light-purple/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #8B5CF6;
+  background-color: #F5F3FF;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/lara-light-teal/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #14B8A6;
+  background-color: #F0FDFA;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/luna-amber/theme.css

@@ -4369,6 +4369,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #FFE082;
+  background-color: #FFE082;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #4b4b4b;

public/themes/luna-blue/theme.css

@@ -4369,6 +4369,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #81D4FA;
+  background-color: #81D4FA;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #4b4b4b;

public/themes/luna-green/theme.css

@@ -4369,6 +4369,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #C5E1A5;
+  background-color: #C5E1A5;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #4b4b4b;

public/themes/luna-pink/theme.css

@@ -4369,6 +4369,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #F48FB1;
+  background-color: #F48FB1;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #4b4b4b;

public/themes/md-dark-deeppurple/theme.css

@@ -4406,6 +4406,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #CE93D8;
+  background-color: rgba(206, 147, 216, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid rgba(255, 255, 255, 0.12);

public/themes/md-dark-indigo/theme.css

@@ -4406,6 +4406,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #9FA8DA;
+  background-color: rgba(159, 168, 218, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid rgba(255, 255, 255, 0.12);

public/themes/md-light-deeppurple/theme.css

@@ -4406,6 +4406,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #673AB7;
+  background-color: rgba(103, 58, 183, 0.12);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid rgba(0, 0, 0, 0.12);

public/themes/md-light-indigo/theme.css

@@ -4406,6 +4406,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #3F51B5;
+  background-color: rgba(63, 81, 181, 0.12);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid rgba(0, 0, 0, 0.12);

public/themes/mdc-dark-deeppurple/theme.css

@@ -4406,6 +4406,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #CE93D8;
+  background-color: rgba(206, 147, 216, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid rgba(255, 255, 255, 0.12);

public/themes/mdc-dark-indigo/theme.css

@@ -4406,6 +4406,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #9FA8DA;
+  background-color: rgba(159, 168, 218, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid rgba(255, 255, 255, 0.12);

public/themes/mdc-light-deeppurple/theme.css

@@ -4406,6 +4406,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #673AB7;
+  background-color: rgba(103, 58, 183, 0.12);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid rgba(0, 0, 0, 0.12);

public/themes/mdc-light-indigo/theme.css

@@ -4406,6 +4406,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #3F51B5;
+  background-color: rgba(63, 81, 181, 0.12);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid rgba(0, 0, 0, 0.12);

public/themes/mira/theme.css

@@ -4410,6 +4410,10 @@
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #5E81AC;
+  background-color: #D8DEE9;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #E5E9F0;

public/themes/nano/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 1px;
   border-bottom-left-radius: 1px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #1174c0;
+  background-color: #44A1D9;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/nova-accent/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #007ad9;
+  background-color: #e02365;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #c8c8c8;

public/themes/nova-alt/theme.css

@@ -4369,6 +4369,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #007ad9;
+  background-color: #007ad9;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #c8c8c8;

public/themes/nova-vue/theme.css

@@ -4369,6 +4369,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #41b883;
+  background-color: #41b883;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #c8c8c8;

public/themes/nova/theme.css

@@ -4369,6 +4369,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #007ad9;
+  background-color: #007ad9;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #c8c8c8;

public/themes/rhea/theme.css

@@ -4357,6 +4357,10 @@
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #7B95A3;
+  background-color: #AFD3C8;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dadada;

public/themes/saga-blue/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #2196F3;
+  background-color: #E3F2FD;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/saga-green/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #4CAF50;
+  background-color: #E8F5E9;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/saga-orange/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #FFC107;
+  background-color: #FFF3E0;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/saga-purple/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #9C27B0;
+  background-color: #F3E5F5;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dee2e6;

public/themes/soho-dark/theme.css

@@ -4381,6 +4381,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #b19df7;
+  background-color: rgba(177, 157, 247, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #3e4053;

public/themes/soho-light/theme.css

@@ -4381,6 +4381,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #7254f3;
+  background-color: #e2dcfc;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #dfe7ef;

public/themes/tailwind-light/theme.css

@@ -4417,6 +4417,10 @@
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #4F46E5;
+  background-color: #EEF2FF;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #e5e7eb;

public/themes/vela-blue/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #64B5F6;
+  background-color: rgba(100, 181, 246, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #304562;

public/themes/vela-green/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #81C784;
+  background-color: rgba(129, 199, 132, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #304562;

public/themes/vela-orange/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #FFD54F;
+  background-color: rgba(255, 213, 79, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #304562;

public/themes/vela-purple/theme.css

@@ -4382,6 +4382,10 @@
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 1px dashed #BA68C8;
+  background-color: rgba(186, 104, 200, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #304562;

public/themes/viva-dark/theme.css

@@ -4414,6 +4414,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 2px solid #263238 dashed #9eade6;
+  background-color: rgba(158, 173, 230, 0.16);
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #263238;

public/themes/viva-light/theme.css

@@ -4414,6 +4414,10 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
+.p-fileupload .p-fileupload-content.p-fileupload-highlight {
+  border: 2px solid #ebebeb dashed #5472d4;
+  background-color: #ced6f1;
+}
 .p-fileupload .p-fileupload-file {
   padding: 1rem;
   border: 1px solid #ebebeb;