From ecd77323c7778a9adef998baccfa391f0c7180ba Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Sun, 13 Dec 2020 15:51:36 +0000
Subject: [PATCH] trying some drag and drop
---
app/package-lock.json | 14 +++---
app/package.json | 2 +-
app/src/components/UploadLayer.vue | 78 +++++++++++++++++++++++++++---
app/src/views/Organise.vue | 3 ++
4 files changed, 81 insertions(+), 16 deletions(-)
diff --git a/app/package-lock.json b/app/package-lock.json
index 7f2dc2e..c75d07e 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 9ad7f0c..687213b 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 980bb6b..9d516ca 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 = ''
+ 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 39fe72a..b70b401 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>
--
GitLab