file input

components/InputFile.vue

@@ -0,0 +1,92 @@
+<template>
+  <div :name="id" class="file-input">
+    <label
+      class="file-input-label"
+    > {{ label }}
+    </label>
+    <div
+      class="image-container"
+      @click="changeFile"
+      @dragover="(event) => {
+        event.preventDefault();
+      }"
+      @drop="handleDrop"
+    >
+      <!-- to jest podglad obrazka -->
+      <img
+        v-if="url"
+        :src="url"
+        :title="size ? size: ''"
+        alt="obrazek"
+      >
+      <!-- z tego labela zrob ten element w figmie ktory jest pustym prostokątem i na niego masz upuscic obrazek -->
+      <label v-else :for="id">
+        kliknij /  upuść tutaj
+      </label>
+      <div style="opacity: 0; position: absolute; pointer-events: none;">
+        <input
+          :id="id"
+          type="file"
+          @change="onFileChange"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    id: {
+      type: String,
+      default: 'input-file'
+    }
+  },
+  data () {
+    return {
+      url: null,
+      size: null,
+      file: null,
+      name: null
+    }
+  },
+  methods: {
+    handleDrop (event) {
+      event.preventDefault()
+
+      if (event.dataTransfer.items) {
+        for (let i = 0; i < event.dataTransfer.items.length; i++) {
+          if (event.dataTransfer.items[i].kind === 'file') {
+            this.getFileInfo(event.dataTransfer.items[i].getAsFile())
+          }
+        }
+      } else {
+        for (let i = 0; i < event.dataTransfer.files.length; i++) {
+          this.getFileInfo(event.dataTransfer.files[i])
+        }
+      }
+    },
+    onFileChange (event) {
+      this.getFileInfo(event.target.files[0])
+    },
+    changeFile () {
+      document.getElementById(this.id).click()
+    },
+    getFileInfo (file) {
+      try {
+        this.url = URL.createObjectURL(file)
+        this.name = file.name
+        this.file = file
+      } catch (e) {
+        this.url = null
+        this.name = null
+        this.file = null
+      }
+    }
+  }
+}
+</script>

pages/sandbox.vue

@@ -2,6 +2,7 @@
   <div>
     <Button text="Hello World" :icon="['fas', 'undo']" @click.native="submitPhoto" />
     <Button text="Without Icon" />
+    <InputFile label="Twój obrazek" />
   </div>
 </template>