diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e5f9bc5069850f5918d16e8218215f2013ef65f..f69e641ed626f5f88c98a6bd16931951fa74c0a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+# 0.1.44
+
+_14th December 2020_
+
+### Changed
+
+- Upload is now smarter and will generate markdown for images, video and audio "automagically", media that is not recognised will be uploaded and generated as a plain URL (link).
+- Now using Cloudflare's IPFS Gateway as we move towards more robust upload support.
+- Video is using using infura gateway (cloudflares gateway doesnt like playing back video)
+
+### Added
+
+- You can now Drag and drop to upload.
+
# 0.1.43
_12th December 2020_
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..50e714c401d58aa5c0e535d99c7dfe1149d3a597 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.43",
+ "version": "0.1.44",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
@@ -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..28d32966cd60a2566705a065ec182f61a4a7145d 100644
--- a/app/src/components/UploadLayer.vue
+++ b/app/src/components/UploadLayer.vue
@@ -1,30 +1,185 @@
<template>
- <div class="ipfsupload">
- <form>
- <input
- id="file"
- class="fileInput"
- type="file"
- name="fileInput"
- ref="fileInput"
- @change="onFileSelected"
- />
-
- <textarea id="ipfshash" v-model="copytext"></textarea>
- <div class="btn-row">
- <button v-on:click.prevent="copyDone()" id="copyme" hidden>Copy</button>
- </div>
- </form>
+ <div v-if="this.currentroute.name == 'Organise'">
+ <div class="ipfsupload dropORG" id="dropContainer">
+ <form>
+ <input
+ id="file"
+ class="fileInput"
+ type="file"
+ name="fileInput"
+ ref="fileInput"
+ @change="onFileSelected"
+ />
+ <!-- -->
+ <p>Drop media here to upload.</p>
+ <svg
+ class="icon"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ height="50"
+ >
+ <g>
+ <circle cx="6.5" cy="30.5" r="5.5" fill="grey" />
+ <circle cx="40.5" cy="30.5" r="5.5" fill="grey" />
+ <circle cx="17.5" cy="27.5" r="8.5" fill="grey" />
+ <circle cx="28.5" cy="25.5" r="10.5" fill="grey" />
+ <rect
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ x="6"
+ y="31"
+ width="35"
+ height="5"
+ fill="grey"
+ />
+ <circle
+ cx="9.5"
+ cy="25.5"
+ r="4.5"
+ fill="white"
+ stroke="grey"
+ stroke-width="2"
+ />
+ <circle
+ cx="43.5"
+ cy="25.5"
+ r="4.5"
+ fill="white"
+ stroke="grey"
+ stroke-width="2"
+ />
+ <circle
+ cx="20.5"
+ cy="22.5"
+ r="7.5"
+ fill="white"
+ stroke="grey"
+ stroke-width="2"
+ />
+ <circle
+ cx="31.5"
+ cy="20.5"
+ r="9.5"
+ fill="white"
+ stroke="grey"
+ stroke-width="2"
+ />
+ <rect x="9" y="23" width="35" height="6" fill="white" />
+ <rect x="9" y="23" width="12" height="5" fill="white" />
+ <rect x="18" y="21" width="9" height="6" fill="white" />
+ <rect x="17" y="17" width="21" height="5" fill="white" />
+ <rect x="21" y="18" width="10" height="4" fill="white" />
+ <path
+ d="M30.5303 15.4697C30.2374 15.1768 29.7626 15.1768 29.4697 15.4697L24.6967 20.2426C24.4038 20.5355 24.4038 21.0104 24.6967 21.3033C24.9896 21.5962 25.4645 21.5962 25.7574 21.3033L30 17.0607L34.2426 21.3033C34.5355 21.5962 35.0104 21.5962 35.3033 21.3033C35.5962 21.0104 35.5962 20.5355 35.3033 20.2426L30.5303 15.4697ZM30.75 28L30.75 16L29.25 16L29.25 28L30.75 28Z"
+ fill="grey"
+ />
+ </g>
+ </svg>
+ <textarea id="ipfshash" v-model="copytext"></textarea>
+ <div class="btn-row">
+ <button v-on:click.prevent="copyDone()" id="copyme" hidden>
+ Copy
+ </button>
+ </div>
+ </form>
+ </div>
+ </div>
+ <div v-else>
+ <div class="ipfsupload dropList" id="dropContainer">
+ <form>
+ <input
+ id="file"
+ class="fileInput"
+ type="file"
+ name="fileInput"
+ ref="fileInput"
+ @change="onFileSelected"
+ />
+ <!-- -->
+ <p>Drop media here to upload.</p>
+ <svg
+ class="icon"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ height="50"
+ >
+ <g>
+ <circle cx="6.5" cy="30.5" r="5.5" fill="grey" />
+ <circle cx="40.5" cy="30.5" r="5.5" fill="grey" />
+ <circle cx="17.5" cy="27.5" r="8.5" fill="grey" />
+ <circle cx="28.5" cy="25.5" r="10.5" fill="grey" />
+ <rect
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ x="6"
+ y="31"
+ width="35"
+ height="5"
+ fill="grey"
+ />
+ <circle
+ cx="9.5"
+ cy="25.5"
+ r="4.5"
+ fill="white"
+ stroke="grey"
+ stroke-width="2"
+ />
+ <circle
+ cx="43.5"
+ cy="25.5"
+ r="4.5"
+ fill="white"
+ stroke="grey"
+ stroke-width="2"
+ />
+ <circle
+ cx="20.5"
+ cy="22.5"
+ r="7.5"
+ fill="white"
+ stroke="grey"
+ stroke-width="2"
+ />
+ <circle
+ cx="31.5"
+ cy="20.5"
+ r="9.5"
+ fill="white"
+ stroke="grey"
+ stroke-width="2"
+ />
+ <rect x="9" y="23" width="35" height="6" fill="white" />
+ <rect x="9" y="23" width="12" height="5" fill="white" />
+ <rect x="18" y="21" width="9" height="6" fill="white" />
+ <rect x="17" y="17" width="21" height="5" fill="white" />
+ <rect x="21" y="18" width="10" height="4" fill="white" />
+ <path
+ d="M30.5303 15.4697C30.2374 15.1768 29.7626 15.1768 29.4697 15.4697L24.6967 20.2426C24.4038 20.5355 24.4038 21.0104 24.6967 21.3033C24.9896 21.5962 25.4645 21.5962 25.7574 21.3033L30 17.0607L34.2426 21.3033C34.5355 21.5962 35.0104 21.5962 35.3033 21.3033C35.5962 21.0104 35.5962 20.5355 35.3033 20.2426L30.5303 15.4697ZM30.75 28L30.75 16L29.25 16L29.25 28L30.75 28Z"
+ fill="grey"
+ />
+ </g>
+ </svg>
+ <textarea id="ipfshash" v-model="copytext"></textarea>
+ <div class="btn-row">
+ <button v-on:click.prevent="copyDone()" id="copyme" hidden>
+ Copy
+ </button>
+ </div>
+ </form>
+ </div>
</div>
</template>
<script>
import VueIpfs from 'ipfs'
+import Router from '@/router'
const ipfs = VueIpfs.create()
var node
var output
var path = 'ready'
var copytext = ''
+let dropArea
//const fileContents = []
@@ -38,6 +193,7 @@ export default {
},
data: function () {
return {
+ currentroute: Router.currentRoute,
status: 'Connecting to IPFS...',
// id: '',
// agentVersion: '',
@@ -48,8 +204,16 @@ export default {
copytext: copytext,
}
},
+
+ // computed: {
+ // ...mapState({
+ // myNodes: (state) => state.myNodes,
+ // }),
+ // },
+
mounted: function () {
this.getIpfsNodeInfo()
+ setTimeout(this.dropReady, 300)
},
watch: {
@@ -69,12 +233,77 @@ export default {
},
},
methods: {
+ dropReady() {
+ dropArea = document.getElementById('dropContainer')
+ ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, this.preventDefaults, false)
+ })
+ ;['dragenter', 'dragover'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, overState)
+ })
+ ;['dragleave', 'dragend', 'drop'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, leaveState)
+ })
+ ;['dragenter', 'dragover'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, overStateList)
+ })
+ ;['dragleave', 'dragend', 'drop'].forEach((eventName) => {
+ dropArea.addEventListener(eventName, leaveStateList)
+ })
+
+ dropArea.addEventListener('drop', this.handleDrop, false)
+
+ function overStateList() {
+ if (document.getElementsByClassName('dropList')[0] != undefined) {
+ document.getElementsByClassName('dropList')[0].className =
+ 'ipfsupload dropList dragover'
+ }
+ }
+
+ function leaveStateList() {
+ if (document.getElementsByClassName('dropList')[0] != undefined) {
+ document.getElementsByClassName('dropList')[0].className =
+ 'ipfsupload dropList'
+ }
+ }
+
+ function overState() {
+ if (document.getElementsByClassName('dropORG')[0] != undefined) {
+ document.getElementsByClassName('dropORG')[0].className =
+ 'ipfsupload dropORG dragover'
+ }
+ }
+
+ function leaveState() {
+ if (document.getElementsByClassName('dropORG')[0] != undefined) {
+ document.getElementsByClassName('dropORG')[0].className =
+ 'ipfsupload dropORG'
+ }
+ }
+ },
+ 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()
@@ -97,7 +326,19 @@ export default {
async saveIPFS() {
try {
this.fileContents = await node.add(this.selectedFile)
- this.getIPFS()
+ this.getIPFS(this.selectedFile.type)
+ } catch (err) {
+ // Set error status text.
+ this.status = `Error: ${err}`
+ console.log(this.status)
+ }
+ },
+
+ async dropIPFS(files) {
+ try {
+ this.fileContents = await node.add(files)
+
+ this.getIPFS(files[0].type)
} catch (err) {
// Set error status text.
this.status = `Error: ${err}`
@@ -105,12 +346,12 @@ export default {
}
},
- async getIPFS() {
+ async getIPFS(type) {
try {
for await (const newfile of node.get(this.fileContents.path)) {
// console.log(newfile.path)
this.path = newfile.path
- this.copyClipBoard(this.path)
+ this.copyClipBoard(this.path, type)
}
} catch (err) {
// Set error status text.
@@ -119,15 +360,32 @@ export default {
}
},
- copyClipBoard(e) {
- this.copytext = ''
- //this.copyready = true
- // setTimeout(this.copyClick, 1000)
+ copyClipBoard(e, type) {
+ console.log(type)
+ switch (true) {
+ case type.includes('image/'):
+ this.copytext = ''
+ break
+ case type.includes('audio/'):
+ this.copytext =
+ '<audio src="https://cloudflare-ipfs.com/ipfs/' +
+ e +
+ '" controls></audio>'
+ break
+ case type.includes('video/'):
+ this.copytext =
+ '<video src="https://ipfs.infura.io/ipfs/' +
+ e +
+ '" controls></video>'
+ break
+ default:
+ this.copytext = 'https://cloudflare-ipfs.com/ipfs/' + e
+ }
},
- // copyClick() {
- // document.getElementById('copyme').click()
- // },
+ copyClick() {
+ document.getElementById('copyme').click()
+ },
copyDone() {
var copyHash = document.getElementById('ipfshash')
@@ -135,7 +393,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')
},
},
@@ -143,13 +401,52 @@ export default {
</script>
<style lang="css" scoped>
+.icon {
+ margin-top: -1.5em;
+ margin-left: 4.5em;
+}
.fileInput {
display: none;
}
+#dropContainer {
+ border: 1px solid rgb(180, 180, 180);
+ height: 100px;
+ margin: 1em;
+}
+
+.dropList {
+ padding: 1em;
+ background-color: white;
+}
+.dropORG {
+ margin: 0em;
+ position: fixed;
+ bottom: 0em;
+ left: 27em;
+ padding: 1em;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 20px;
+ height: 100px;
+ background-color: white;
+ outline: 2px dashed rgb(180, 180, 180);
+ outline-offset: -10px;
+}
+
+.dragover {
+ outline: 2px dashed black;
+ outline-offset: -10px;
+ background-color: rgb(180, 180, 180);
+}
+
textarea {
position: absolute;
- top: 0px;
+ top: 10px;
+ left: 0em;
height: 0px;
width: 0px;
padding: 0px;
diff --git a/app/src/experimental/ModeToolbar.vue b/app/src/experimental/ModeToolbar.vue
index 57b1e7412f22e48f932b8ef65893c13145d8618e..fb5713dcc7b7e70e34333f3bc579a3dc9eadaffc 100644
--- a/app/src/experimental/ModeToolbar.vue
+++ b/app/src/experimental/ModeToolbar.vue
@@ -12,7 +12,7 @@
/>
</button>
- <p>{{ clientid }} / {{ microcosm }}</p>
+ <!-- <p>{{ clientid }} / {{ microcosm }}</p> -->
</nav>
</template>
diff --git a/app/src/views/Cards.vue b/app/src/views/Cards.vue
index 758c23230eb49e16c88a591717c240e1b0b56380..f4b478f3cc384f5f0d4b929f493aa4c5e9689a68 100644
--- a/app/src/views/Cards.vue
+++ b/app/src/views/Cards.vue
@@ -7,45 +7,44 @@
<OtherCardslayer />
- <div class="btn-row">
- <!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
+ <!-- <BaseButton class="new" buttonClass="action" @click="addNode()"
>Create Node</BaseButton
> -->
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="80"
- viewBox="0 0 143 106"
- class="icon"
- @click="addNode()"
- >
- <g transform="translate(-1345 -843)">
- <g class="a" transform="translate(1345 865)">
- <rect class="d" width="127" height="84" />
- <rect class="e" x="0.5" y="0.5" width="126" height="83" />
- </g>
- <g class="b" transform="translate(1361 843)">
- <rect class="d" width="127" height="84" />
- <rect class="e" x="3.5" y="3.5" width="120" height="77" />
- </g>
- <line class="c" x2="41" transform="translate(1406.5 884.5)" />
- <line class="c" y2="41" transform="translate(1426.5 863.5)" />
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="80"
+ viewBox="0 0 143 106"
+ class="icon"
+ @click="addNode()"
+ >
+ <g transform="translate(-1345 -843)">
+ <g class="a" transform="translate(1345 865)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="0.5" y="0.5" width="126" height="83" />
</g>
- </svg>
-
- <UploadLayer
- v-bind:uploadready="uploadready"
- v-bind:copyready="copyready"
- @upload-added="uploadAdded()"
- @copy-done="copyDone()"
- />
+ <g class="b" transform="translate(1361 843)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="3.5" y="3.5" width="120" height="77" />
+ </g>
+ <line class="c" x2="41" transform="translate(1406.5 884.5)" />
+ <line class="c" y2="41" transform="translate(1426.5 863.5)" />
+ </g>
+ </svg>
+ <div class="btn-row">
+ <BaseButton class="new" buttonClass="action" @click="uploadAdded()"
+ >Upload</BaseButton
+ >
+ <BaseButton class="new" buttonClass="action" @click="copyDone()"
+ >Get Upload</BaseButton
+ >
</div>
- <BaseButton class="new" buttonClass="action" @click="uploadAdded()"
- >Upload</BaseButton
- >
- <BaseButton class="new" buttonClass="action" @click="copyDone()"
- >Get Upload</BaseButton
- >
+ <UploadLayer
+ v-bind:uploadready="uploadready"
+ v-bind:copyready="copyready"
+ @upload-added="uploadAdded()"
+ @copy-done="copyDone()"
+ />
</div>
<div v-else>
@@ -145,6 +144,10 @@ export default {
margin-bottom: 1em;
}
+.btn-row {
+ margin-left: 1em;
+}
+
.example {
width: 30px;
}
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>