diff --git a/app/package-lock.json b/app/package-lock.json
index 7f2dc2eb4f597746c8eff168cd46df129a5bd2a8..c75d07efeb9c709a2164c08077d29307d06ca06e 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nodenogg.in",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8913,9 +8913,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "inquirer": {
       "version": "7.3.3",
@@ -12209,9 +12209,9 @@
       }
     },
     "marked": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.5.tgz",
-      "integrity": "sha512-2AlqgYnVPOc9WDyWu7S5DJaEZsfk6dNh/neatQ3IHUW4QLutM/VPSH9lG7bif+XjFWc9K9XR3QvR+fXuECmfdA=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.6.tgz",
+      "integrity": "sha512-7vVuSEZ8g/HH3hK/BH/+7u/NJj7x9VY4EHzujLDcqAQLiOUeFJYAsfSAyoWtR17lKrx7b08qyIno4lffwrzTaA=="
     },
     "md5.js": {
       "version": "1.3.5",
diff --git a/app/package.json b/app/package.json
index 9ad7f0c932fe64b6b475a5eb5955e490723e393a..687213bae57f06f1bc2ac8f8e65f1d03c64eecce 100644
--- a/app/package.json
+++ b/app/package.json
@@ -12,7 +12,7 @@
     "core-js": "^3.8.1",
     "file-loader": "^6.2.0",
     "ipfs": "^0.52.2",
-    "marked": "^1.2.5",
+    "marked": "^1.2.6",
     "pouchdb": "^7.2.2",
     "vue": "^2.6.12",
     "vue-draggable-resizable": "^2.2.0",
diff --git a/app/src/components/UploadLayer.vue b/app/src/components/UploadLayer.vue
index 980bb6bdce6174a423bb5ffc583c3cfd66c7ee91..9d516ca5b3f162f3bde087c1963a6e5c79d632e5 100644
--- a/app/src/components/UploadLayer.vue
+++ b/app/src/components/UploadLayer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ipfsupload">
+  <div class="ipfsupload" id="dropContainer">
     <form>
       <input
         id="file"
@@ -9,6 +9,8 @@
         ref="fileInput"
         @change="onFileSelected"
       />
+      <!--  -->
+      <p>Drop here to upload.</p>
 
       <textarea id="ipfshash" v-model="copytext"></textarea>
       <div class="btn-row">
@@ -20,12 +22,13 @@
 
 <script>
 import VueIpfs from 'ipfs'
+import { mapState } from 'vuex'
 const ipfs = VueIpfs.create()
 var node
 var output
 var path = 'ready'
 var copytext = ''
-
+let dropArea
 //const fileContents = []
 
 //  The below code should create an IPFS node to add files to
@@ -48,8 +51,16 @@ export default {
       copytext: copytext,
     }
   },
+
+  computed: {
+    ...mapState({
+      myNodes: (state) => state.myNodes,
+    }),
+  },
+
   mounted: function () {
     this.getIpfsNodeInfo()
+    setTimeout(this.dropReady, 300)
   },
 
   watch: {
@@ -69,12 +80,37 @@ export default {
     },
   },
   methods: {
+    dropReady() {
+      dropArea = document.getElementById('dropContainer')
+      ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+        dropArea.addEventListener(eventName, this.preventDefaults, false)
+      })
+
+      dropArea.addEventListener('drop', this.handleDrop, false)
+    },
+    preventDefaults(e) {
+      e.preventDefault()
+      e.stopPropagation()
+    },
+
+    handleDrop(e) {
+      let dt = e.dataTransfer
+      let files = dt.files
+      this.handleFiles(files)
+    },
+
+    handleFiles(files) {
+      // console.log(files)
+      this.dropIPFS(files)
+
+      // ;[...files].forEach(this.dropIPFS(files))
+    },
+
     async getIpfsNodeInfo() {
       try {
         // Await for ipfs node instance.
         node = await ipfs
 
-        // console.log(node)
         // Call ipfs `id` method.
         // Returns the identity of the Peer.
         //  const { agentVersion, id } = await node.id()
@@ -105,6 +141,17 @@ export default {
       }
     },
 
+    async dropIPFS(files) {
+      try {
+        this.fileContents = await node.add(files)
+        this.getIPFS()
+      } catch (err) {
+        // Set error status text.
+        this.status = `Error: ${err}`
+        console.log(this.status)
+      }
+    },
+
     async getIPFS() {
       try {
         for await (const newfile of node.get(this.fileContents.path)) {
@@ -121,13 +168,14 @@ export default {
 
     copyClipBoard(e) {
       this.copytext = '![](https://ipfs.io/ipfs/' + e + ')'
+      this.$store.dispatch('addNode')
       //this.copyready = true
-      // setTimeout(this.copyClick, 1000)
+      setTimeout(this.copyClick, 3000)
     },
 
-    // copyClick() {
-    //   document.getElementById('copyme').click()
-    // },
+    copyClick() {
+      document.getElementById('copyme').click()
+    },
 
     copyDone() {
       var copyHash = document.getElementById('ipfshash')
@@ -135,7 +183,7 @@ export default {
 
       copyHash.setSelectionRange(0, 99999) /*For mobile devices*/
       document.execCommand('copy')
-      this.$emit('upload-added')
+      // this.$emit('upload-added')
       this.$emit('copy-done')
     },
   },
@@ -146,6 +194,20 @@ export default {
 .fileInput {
   display: none;
 }
+#dropContainer {
+  margin: 0em;
+  position: fixed;
+  background-color: white;
+  bottom: 1em;
+  left: 30em;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid rgb(180, 180, 180);
+  border-radius: 20px;
+  height: 100px;
+}
 
 textarea {
   position: absolute;
diff --git a/app/src/views/Organise.vue b/app/src/views/Organise.vue
index 39fe72a2e6ca6a7576369219c3e52f2b09ab7ae8..b70b40109c28d96211533ff198a6db1844ddb0c0 100644
--- a/app/src/views/Organise.vue
+++ b/app/src/views/Organise.vue
@@ -65,6 +65,7 @@
         />
         <ViewToolbar />
         <UploadLayer
+          class="orgupload"
           v-bind:uploadready="uploadready"
           v-bind:copyready="copyready"
           @upload-added="uploadAdded()"
@@ -233,4 +234,6 @@ export default {
   margin: 0px;
   position: relative;
 }
+.orgupload {
+}
 </style>