diff --git a/css/main.css b/css/main.css
index 43c4a467..9a25a17a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -122,3 +122,34 @@
   color: var(--color-error);
 }
 
+
+/* File drag and drop */ 
+ 
+.filesListDragDropNotice{ 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  width: 100%; 
+  min-height: 113px; 
+  margin: 0; 
+  user-select: none; 
+  color: var(--color-text-maxcontrast); 
+  background-color: var(--color-main-background); 
+  border-color: #000; 
+} 
+ 
+.filesListDragDropNoticeWrapper{ 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  height: 15vh; 
+  max-height: 70%; 
+  padding: 0 5vw; 
+  border: 2px var(--color-border-dark) dashed; 
+  border-radius: var(--border-radius-large); 
+} 
+ 
+.filesListDragDropNoticeTitle{ 
+  margin-left: 16px; 
+  color: inherit; 
+}
diff --git a/src/composables/UseFileSelection.js b/src/composables/UseFileSelection.js
new file mode 100644
index 00000000..69b79672
--- /dev/null
+++ b/src/composables/UseFileSelection.js
@@ -0,0 +1,95 @@
+import { useDropZone, useFileDialog } from '@vueuse/core'
+import { ref, computed } from 'vue'
+import { publicationStore } from './../store/store.js'
+
+/**
+ * File selection composable
+ * @param options
+ *
+ * Special thanks to Github user adamreisnz for creating most of this file
+ * https://github.com/adamreisnz
+ * https://github.com/vueuse/vueuse/issues/4085
+ *
+ */
+export function useFileSelection(options) {
+
+	// Extract options
+	const {
+		dropzone,
+		allowMultiple,
+		allowedFileTypes,
+		onFileDrop,
+	} = options
+
+	// Data types computed ref
+	const dataTypes = computed(() => {
+		if (allowedFileTypes?.value) {
+			if (!Array.isArray(allowedFileTypes.value)) {
+				return [allowedFileTypes.value]
+			}
+			return allowedFileTypes.value
+		}
+		return null
+	})
+
+	// Accept string computed ref
+	const accept = computed(() => {
+		if (Array.isArray(dataTypes.value)) {
+			return dataTypes.value.join(',')
+		}
+		return '*'
+	})
+
+	// Handling of files drop
+	const onDrop = files => {
+		if (!files || files.length === 0) {
+			return
+		}
+		if (files instanceof FileList) {
+			files = Array.from(files)
+		}
+		if (files.length > 1 && !allowMultiple.value) {
+			files = [files[0]]
+		}
+		filesList.value = files
+		onFileDrop && onFileDrop()
+	}
+
+	const reset = () => {
+		filesList.value = null
+	}
+
+	// const onLeave = () => {
+	// let timer
+	// document.addEventListener('mousemove', () => {
+	// clearTimeout(timer)
+	// timer = setTimeout(isOverDropZone.value = false, 300)
+	// })
+	// }
+
+	const setFiles = (files) => {
+		filesList.value = files
+		publicationStore.setAttachmentFile(null)
+	}
+
+	// Setup dropzone and file dialog composables
+	const { isOverDropZone } = useDropZone(dropzone, { dataTypes, onDrop })
+	const { onChange, open } = useFileDialog({
+		accept: accept.value,
+		multiple: allowMultiple?.value,
+	})
+
+	const filesList = ref(null)
+
+	// Use onChange handler
+	onChange(fileList => onDrop(fileList))
+
+	// Expose interface
+	return {
+		isOverDropZone,
+		openFileUpload: open,
+		files: filesList,
+		reset,
+		setFiles,
+	}
+}
diff --git a/src/modals/Modals.vue b/src/modals/Modals.vue
index 224a7064..e3422dd1 100644
--- a/src/modals/Modals.vue
+++ b/src/modals/Modals.vue
@@ -1,7 +1,11 @@
+<script setup>
+import { publicationStore } from './../store/store.js'
+</script>
+
 <template>
 	<!-- Placeholder Div -->
 	<div>
-		<AddAttachmentModal />
+		<AddAttachmentModal :drop-files="publicationStore.attachmentFile" />
 		<EditAttachmentModal />
 		<AddPublicationModal />
 		<EditPublicationModal />
diff --git a/src/modals/attachment/AddAttachmentModal.vue b/src/modals/attachment/AddAttachmentModal.vue
index 0f4fc0fc..619cb6bb 100644
--- a/src/modals/attachment/AddAttachmentModal.vue
+++ b/src/modals/attachment/AddAttachmentModal.vue
@@ -7,72 +7,84 @@ import { navigationStore, publicationStore } from '../../store/store.js'
 		ref="modalRef"
 		label-id="AddAttachmentModal"
 		@close="navigationStore.setModal(false)">
-		<div class="modal__content">
+		<div ref="dropZoneRef" class="modal__content">
 			<h2>Bijlage toevoegen</h2>
-			<div v-if="success !== null || error">
-				<NcNoteCard v-if="success" type="success">
-					<p>Bijlage succesvol toegevoegd</p>
-				</NcNoteCard>
-				<NcNoteCard v-if="!success" type="error">
-					<p>Er is iets fout gegaan bij het toevoegen van bijlage</p>
-				</NcNoteCard>
-				<NcNoteCard v-if="error" type="error">
-					<p>{{ error }}</p>
-				</NcNoteCard>
-			</div>
-			<div v-if="success === null" class="form-group">
-				<NcTextField :disabled="(files && true) || loading"
-					label="Titel"
-					maxlength="255"
-					:value.sync="publicationStore.attachmentItem.title"
-					required />
-				<NcTextField :disabled="loading"
-					label="Samenvatting"
-					maxlength="255"
-					:value.sync="publicationStore.attachmentItem.summary" />
-				<NcTextArea :disabled="loading"
-					label="Beschrijving"
-					maxlength="255"
-					:value.sync="publicationStore.attachmentItem.description" />
-				<NcTextField :disabled="loading"
-					label="Toegangs URL"
-					maxlength="255"
-					:value.sync="publicationStore.attachmentItem.accessUrl" />
-				<NcTextField :disabled="(files && true) || loading"
-					label="Download URL"
-					maxlength="255"
-					:value.sync="publicationStore.attachmentItem.downloadUrl" />
-				<div class="addFileButtonGroup">
-					<NcButton v-if="success === null && !files"
-						:disabled="checkIfDisabled() || loading"
-						type="primary"
-						@click="openFileUpload()">
-						<template #icon>
-							<Plus :size="20" />
-						</template>
-						Bestand toevoegen
-					</NcButton>
-
-					<NcButton v-if="success === null && files"
-						:disabled="checkIfDisabled() || loading"
+			<div v-if="!isOverDropZone">
+				<div v-if="success !== null || error">
+					<NcNoteCard v-if="success" type="success">
+						<p>Bijlage succesvol toegevoegd</p>
+					</NcNoteCard>
+					<NcNoteCard v-if="!success" type="error">
+						<p>Er is iets fout gegaan bij het toevoegen van bijlage</p>
+					</NcNoteCard>
+					<NcNoteCard v-if="error" type="error">
+						<p>{{ error }}</p>
+					</NcNoteCard>
+				</div>
+				<div v-if="success === null" class="form-group">
+					<NcTextField :disabled="(files && true) || loading"
+						label="Titel"
+						maxlength="255"
+						:value.sync="publicationStore.attachmentItem.title"
+						required />
+					<NcTextField :disabled="loading"
+						label="Samenvatting"
+						maxlength="255"
+						:value.sync="publicationStore.attachmentItem.summary" />
+					<NcTextArea :disabled="loading"
+						label="Beschrijving"
+						maxlength="255"
+						:value.sync="publicationStore.attachmentItem.description" />
+					<NcTextField :disabled="loading"
+						label="Toegangs URL"
+						maxlength="255"
+						:value.sync="publicationStore.attachmentItem.accessUrl" />
+					<NcTextField :disabled="(files && true) || loading"
+						label="Download URL"
+						maxlength="255"
+						:value.sync="publicationStore.attachmentItem.downloadUrl" />
+					<div class="addFileButtonGroup">
+						<NcButton v-if="success === null && !files"
+							:disabled="checkIfDisabled() || loading"
+							type="primary"
+							@click="openFileUpload()">
+							<template #icon>
+								<Plus :size="20" />
+							</template>
+							Bestand toevoegen
+						</NcButton>
+
+						<NcButton v-if="success === null && files"
+							:disabled="checkIfDisabled() || loading"
+							type="primary"
+							@click="reset()">
+							<template #icon>
+								<Minus :size="20" />
+							</template>
+							<span v-for="file of files" :key="file.name">{{ file.name }}</span>
+						</NcButton>
+					</div>
+					<NcButton v-if="success === null"
+						:disabled="loading"
 						type="primary"
-						@click="reset()">
+						@click="addAttachment()">
 						<template #icon>
-							<Minus :size="20" />
+							<NcLoadingIcon v-if="loading" :size="20" />
+							<Plus v-if="!loading" :size="20" />
 						</template>
-						<span v-for="file of files" :key="file.name">{{ file.name }}</span>
+						Toevoegen
 					</NcButton>
 				</div>
-				<NcButton v-if="success === null"
-					:disabled="loading"
-					type="primary"
-					@click="addAttachment()">
-					<template #icon>
-						<NcLoadingIcon v-if="loading" :size="20" />
-						<Plus v-if="!loading" :size="20" />
-					</template>
-					Toevoegen
-				</NcButton>
+			</div>
+			<div v-if="isOverDropZone">
+				<div class="filesListDragDropNotice">
+					<div class="filesListDragDropNoticeWrapper">
+						<TrayArrowDown :size="48" />
+						<h3 class="filesListDragDropNoticeTitle">
+							Drag and drop files here to upload
+						</h3>
+					</div>
+				</div>
 			</div>
 		</div>
 	</NcModal>
@@ -80,14 +92,18 @@ import { navigationStore, publicationStore } from '../../store/store.js'
 
 <script>
 import { NcButton, NcLoadingIcon, NcModal, NcNoteCard, NcTextArea, NcTextField } from '@nextcloud/vue'
-import { useFileDialog } from '@vueuse/core'
+import { useFileSelection } from './../../composables/UseFileSelection.js'
+
+import { ref } from 'vue'
 
 import Minus from 'vue-material-design-icons/Minus.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import TrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
 
 import axios from 'axios'
 
-const { files, open: openFileUpload, reset } = useFileDialog({ multiple: false })
+const dropZoneRef = ref()
+const { isOverDropZone, openFileUpload, files, reset, setFiles } = useFileSelection({ allowMultiple: false, dropzone: dropZoneRef })
 
 export default {
 	name: 'AddAttachmentModal',
@@ -98,8 +114,13 @@ export default {
 		NcButton,
 		NcLoadingIcon,
 		NcNoteCard,
-		// Icons
-		Plus,
+	},
+	props: {
+		dropFiles: {
+			type: Array,
+			required: false,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -108,14 +129,22 @@ export default {
 			error: false,
 		}
 	},
+	watch: {
+		dropFiles: {
+			handler(addedFiles) {
+				publicationStore.attachmentFile && setFiles(addedFiles)
+			},
+			deep: true,
+		},
+	},
 	mounted() {
 		publicationStore.setAttachmentItem([])
 	},
 	methods: {
+
 		closeModal() {
 			navigationStore.modal = false
 		},
-
 		checkIfDisabled() {
 			if (publicationStore.attachmentItem.downloadUrl || publicationStore.attachmentItem.title) return true
 			return false
diff --git a/src/store/modules/publication.js b/src/store/modules/publication.js
index 1c577416..bbce3ef9 100644
--- a/src/store/modules/publication.js
+++ b/src/store/modules/publication.js
@@ -9,6 +9,7 @@ export const usePublicationStore = defineStore(
 			publicationList: [],
 			publicationDataKey: false,
 			attachmentItem: false,
+			attachmentFile: null,
 			publicationAttachments: false,
 			conceptPublications: [],
 			conceptAttachments: [],
@@ -157,6 +158,10 @@ export const usePublicationStore = defineStore(
 				this.attachmentItem = attachmentItem && new Attachment(attachmentItem)
 				console.log('Active attachment item set to ' + attachmentItem)
 			},
+			setAttachmentFile(files) {
+				this.attachmentFile = files
+				console.log('Active attachment files set to ' + files)
+			},
 		},
 		setPublicationList(publicationList) {
 			this.publicationList = publicationList.map((publicationItem) => new Publication(publicationItem))
@@ -254,5 +259,8 @@ export const usePublicationStore = defineStore(
 			this.attachmentItem = attachmentItem && new Attachment(attachmentItem)
 			console.log('Active attachment item set to ' + attachmentItem)
 		},
+		setAttachmentFile(files) {
+			this.attachmentFile = files
+		},
 	},
 )
diff --git a/src/views/publications/PublicationDetail.vue b/src/views/publications/PublicationDetail.vue
index 86a20d3f..db1a1218 100644
--- a/src/views/publications/PublicationDetail.vue
+++ b/src/views/publications/PublicationDetail.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { catalogiStore, metadataStore, navigationStore, publicationStore } from '../../store/store.js'
+import { ref } from 'vue'
+
 </script>
 
 <template>
@@ -205,9 +207,20 @@ import { catalogiStore, metadataStore, navigationStore, publicationStore } from
 							Geen eigenschappen gevonden
 						</div>
 					</BTab>
-					<BTab title="Bijlagen">
+					<BTab  title="Bijlagen">
+						<div ref="dropZoneRef">
+						<div v-if="isOverDropZone">
+							<div class="filesListDragDropNotice">
+								<div class="filesListDragDropNoticeWrapper">
+									<TrayArrowDown :size="48" />
+									<h3 class="filesListDragDropNoticeTitle">
+										Drag and drop files here to upload
+									</h3>
+								</div>
+							</div>
+						</div>
 						<div
-							v-if="publicationStore.publicationAttachments.length > 0"
+							v-if="publicationStore.publicationAttachments.length > 0 && !isOverDropZone"
 							class="tabPanel">
 							<NcListItem v-for="(attachment, i) in publicationStore.publicationAttachments"
 								:key="`${attachment}${i}`"
@@ -270,7 +283,7 @@ import { catalogiStore, metadataStore, navigationStore, publicationStore } from
 							</NcListItem>
 						</div>
 
-						<div v-if="publicationStore.publicationAttachments.length === 0" class="tabPanel">
+						<div v-if="publicationStore.publicationAttachments.length === 0 && !isOverDropZone" class="tabPanel">
 							Geen bijlagen gevonden
 						</div>
 						<div v-if="publicationStore.publicationAttachments.length !== 0 && !publicationStore.publicationAttachments.length > 0" class="tabPanel">
@@ -280,6 +293,7 @@ import { catalogiStore, metadataStore, navigationStore, publicationStore } from
 								appearance="dark"
 								name="Bijlagen aan het laden" />
 						</div>
+					</div>
 					</BTab>
 					<BTab title="Logging">
 						<table width="100%">
@@ -347,6 +361,7 @@ import { catalogiStore, metadataStore, navigationStore, publicationStore } from
 <script>
 // Components
 import { NcActionButton, NcActions, NcButton, NcListItem, NcLoadingIcon, NcNoteCard, NcSelectTags } from '@nextcloud/vue'
+import { useFileSelection } from './../../composables/UseFileSelection.js'
 import { BTab, BTabs } from 'bootstrap-vue'
 import VueApexCharts from 'vue-apexcharts'
 
@@ -357,6 +372,7 @@ import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
+import TrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import ExclamationThick from 'vue-material-design-icons/ExclamationThick.vue'
 import FilePlusOutline from 'vue-material-design-icons/FilePlusOutline.vue'
@@ -370,6 +386,15 @@ import Publish from 'vue-material-design-icons/Publish.vue'
 import PublishOff from 'vue-material-design-icons/PublishOff.vue'
 import TimelineQuestionOutline from 'vue-material-design-icons/TimelineQuestionOutline.vue'
 
+function onDrop() {
+	publicationStore.setAttachmentItem([])
+	publicationStore.setAttachmentFile(files)
+	navigationStore.setModal('AddAttachment')
+}
+
+const dropZoneRef = ref()
+const { isOverDropZone, files } = useFileSelection({ allowMultiple: false, dropzone: dropZoneRef, onFileDrop: onDrop })
+
 export default {
 	name: 'PublicationDetail',
 	components: {
@@ -403,6 +428,7 @@ export default {
 		Download,
 		ArchivePlusOutline,
 		HelpCircleOutline,
+		TrayArrowDown,
 	},
 	props: {
 		publicationItem: {
@@ -554,7 +580,9 @@ export default {
 		openLink(url, type = '') {
 			window.open(url, type)
 		},
+
 	},
+
 }
 </script>
 
diff --git a/tsconfig.json b/tsconfig.json
index 773fdce7..959331fa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,6 @@
             "@/*": ["src/*"]
         },
     },
-    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/composables/UseFileSelection.js"],
     "exclude": ["node_modules"]
 }
\ No newline at end of file