Merge pull request #343 from h3poteto/iss-327

closes #327 Allow drop file to upload files
h3poteto · May 27, 2018 · 06ee016 · 06ee016
2 parents 77592f2 + c663ded
commit 06ee016
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/main/index.js b/src/main/index.js
@@ -213,6 +213,8 @@ function createWindow () {
 
       mainWindow.loadURL(winURL)
 
+      mainWindow.webContents.on('will-navigate', (event) => event.preventDefault())
+
       mainWindow.on('closed', () => {
         mainWindow = null
       })

diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -21,7 +21,7 @@
     <div slot="footer" class="dialog-footer">
       <div class="upload-image">
         <el-button size="small" type="text" @click="selectImage"><icon name="camera"></icon></el-button>
-        <input name="image" type="file" class="image-input" ref="image" @change="updateImage" :key="attachedImageId"/>
+        <input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedImageId"/>
       </div>
       <div class="privacy">
         <el-dropdown trigger="click" @command="changeVisibility">
@@ -127,6 +127,14 @@ export default {
       }
     }
   },
+  mounted () {
+    document.addEventListener('drop', e => {
+      e.preventDefault()
+      e.stopPropagation()
+      this.onDrop(e)
+      return false
+    })
+  },
   methods: {
     close () {
       this.resetImage()
@@ -192,19 +200,23 @@ export default {
     selectImage () {
       this.$refs.image.click()
     },
-    updateImage (e) {
-      this.resetImage()
+    onChangeImage (e) {
       if (e.target.files.item(0) === null || e.target.files.item(0) === undefined) {
         return
       }
-      if (!e.target.files.item(0).type.includes('image')) {
+      const file = e.target.files.item(0)
+      if (!file.type.includes('image')) {
         this.$message({
           message: 'You can only attach images',
           type: 'error'
         })
         return
       }
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/uploadImage', e.target.files.item(0))
+      this.updateImage(file)
+    },
+    updateImage (file) {
+      this.resetImage()
+      this.$store.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
         .catch(() => {
           this.$message({
             message: 'Could not attach the file',
@@ -223,6 +235,20 @@ export default {
     },
     changeSensitive () {
       this.$store.commit('TimelineSpace/Modals/NewToot/changeSensitive', !this.sensitive)
+    },
+    onDrop (e) {
+      if (e.dataTransfer.files.item(0) === null || e.dataTransfer.files.item(0) === undefined) {
+        return
+      }
+      const file = e.dataTransfer.files.item(0)
+      if (!file.type.includes('image')) {
+        this.$message({
+          message: 'You can only attach images',
+          type: 'error'
+        })
+        return
+      }
+      this.updateImage(file)
     }
   }
 }