diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bc9103d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log
diff --git a/LICENSE b/LICENSE
new file mode 100755
index 0000000..f84f83e
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Alessio Maffeis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/PictureInput.vue b/PictureInput.vue
new file mode 100644
index 0000000..699f34a
--- /dev/null
+++ b/PictureInput.vue
@@ -0,0 +1,326 @@
+<template>
+  <div id="picture-input" class="picture-input">
+    <div v-if="!supportsUpload">
+      <h3>Your device doesn't support file uploading.</h3>
+    </div>
+    <div v-else-if="supportsPreview">
+      <div class="preview-container" 
+        :style="{maxWidth: previewWidth + 'px', height: previewHeight + 'px'}">
+          <canvas ref="previewCanvas"
+            class="picture-preview" 
+            :class="computedClasses"
+            @drag.stop.prevent="" 
+            @dragover.stop.prevent="" 
+            @dragstart.stop.prevent="onDragStart"
+            @dragenter.stop.prevent="onDragStart"
+            @dragend.stop.prevent="onDragStop"
+            @dragleave.stop.prevent="onDragStop"
+            @drop.stop.prevent="onFileDrop"
+            @click="selectImage"
+            :style="{height: previewHeight + 'px'}">
+          </canvas>
+        <div v-if="!image" 
+          class="picture-inner"
+            :style="{top: -previewHeight + 'px', marginBottom: -previewHeight + 'px' }">
+          <span v-if="supportsDragAndDrop" class="picture-inner-text">Drag an image or <br>click here to select a file</span>
+          <span v-else class="picture-inner-text" >Tap here to select a photo <br>from your gallery</span>
+        </div>
+      </div>
+      <button v-if="image" @click="selectImage" class="btn btn-primary button">Change Photo</button>
+    </div>
+    <div v-else>
+      <button v-if="!image" class="btn btn-primary button" @click="selectImage">Select a Photo</button>
+      <div v-else>
+        <h3>Photo successfully selected!</h3>
+        <button @click="selectImage" class="btn btn-primary button">Change Photo</button>
+      </div>
+    </div>
+    <input ref="fileInput" type="file" :name="name" :id="id" :accept="accept" @change="onFileChange">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'picture-input',
+  props: {
+    width: {
+      default: Number.MAX_VALUE
+    },
+    height: {
+      default: Number.MAX_VALUE
+    },
+    margin: {
+      default: 0
+    },
+    accept: {
+      default: 'image/*'
+    },
+    name: {
+      default: null
+    },
+    id: {
+      default: null
+    }
+  },
+  data () {
+    return {
+      image: '',
+      previewHeight: 0,
+      previewWidth: 0,
+      draggingOver: false
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {
+      window.addEventListener('resize', this.onResize)
+      this.onResize()
+    })
+    if (this.supportsPreview) {
+      this.pixelRatio = Math.round(window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI)
+      const canvas = this.$refs.previewCanvas
+      if (canvas.getContext) {
+        this.context = canvas.getContext('2d')
+        this.context.scale(this.pixelRatio, this.pixelRatio)
+      }
+    }
+    if (this.accept !== 'image/*') {
+      this.fileTypes = this.accept.split(',')
+      this.fileTypes = this.fileTypes.map(s => s.trim())
+    }
+  },
+  methods: {
+    onResize () {
+      let previewRatio = this.width / this.height
+      let newWidth = document.documentElement.clientWidth
+      if (newWidth === this.viewportWidth) {
+        return
+      }
+      this.viewportWidth = newWidth
+      this.previewWidth = Math.min(this.viewportWidth - this.margin * 2, this.width)
+      this.previewHeight = this.previewWidth / previewRatio
+      if (this.imageObject) {
+        this.drawImage(this.imageObject)
+      }
+    },
+    onDragStart () {
+      if (!this.supportsDragAndDrop) {
+        return
+      }
+      this.draggingOver = true
+    },
+    onDragStop () {
+      if (!this.supportsDragAndDrop) {
+        return
+      }
+      this.draggingOver = false
+    },
+    onFileDrop (e) {
+      this.onDragStop()
+      this.onFileChange(e)
+    },
+    onFileChange (e) {
+      let files = e.target.files || e.dataTransfer.files
+      if (!files.length) {
+        return
+      }
+
+      if (this.accept === 'image/*') {
+        if (files[0].type.substr(0, 6) !== 'image/') {
+          return
+        }
+      } else {
+        if (this.fileTypes.indexOf(files[0].type) === -1) {
+          alert('This file type is not supported.')
+          return
+        }
+      }
+
+      if (this.supportsPreview) {
+        this.loadImage(files[0])
+      } else {
+        this.image = true
+      }
+    },
+    loadImage (file) {
+      this.getEXIFOrientation(file, (orientation) => {
+        this.setOrientation(orientation)
+        let reader = new FileReader()
+        reader.onload = (e) => {
+          this.image = e.target.result
+          this.imageObject = new Image()
+          this.imageObject.onload = () => {
+            this.drawImage(this.imageObject)
+          }
+          this.imageObject.src = this.image
+        }
+        reader.readAsDataURL(file)
+      })
+    },
+    drawImage (image) {
+      this.imageWidth = image.width
+      this.imageHeight = image.height
+      this.imageRatio = image.width / image.height
+      let offsetX = 0
+      let offsetY = 0
+      let scaledWidth = this.previewWidth
+      let scaledHeight = this.previewHeight
+      if (this.imageRatio > 1) {
+        scaledWidth = scaledHeight * this.imageRatio
+        offsetX = (this.previewWidth - scaledWidth) / 2
+      } else {
+        scaledHeight = scaledWidth / this.imageRatio
+        offsetY = (this.previewHeight - scaledHeight) / 2
+      }
+      const canvas = this.$refs.previewCanvas
+      canvas.width = this.previewWidth * this.pixelRatio
+      canvas.height = this.previewHeight * this.pixelRatio
+      this.context.setTransform(1, 0, 0, 1, 0, 0)
+      this.context.clearRect(0, 0, canvas.width, canvas.height)
+      if (this.rotate) {
+        this.context.translate(offsetX * this.pixelRatio, offsetY * this.pixelRatio)
+        this.context.translate(scaledWidth / 2 * this.pixelRatio, scaledHeight / 2 * this.pixelRatio)
+        this.context.rotate(this.rotate)
+        offsetX = -scaledWidth / 2
+        offsetY = -scaledHeight / 2
+      }
+      this.context.drawImage(image,
+        offsetX * this.pixelRatio,
+        offsetY * this.pixelRatio,
+        scaledWidth * this.pixelRatio,
+        scaledHeight * this.pixelRatio)
+    },
+    selectImage () {
+      this.$refs.fileInput.click()
+    },
+    setOrientation (orientation) {
+      this.rotate = false
+      if (orientation === 8) {
+        this.rotate = -Math.PI / 2
+      } else if (orientation === 6) {
+        this.rotate = Math.PI / 2
+      } else if (orientation === 3) {
+        this.rotate = -Math.PI
+      }
+    },
+    getEXIFOrientation (file, callback) {
+      var reader = new FileReader()
+      reader.onload = function (e) {
+        var view = new DataView(e.target.result)
+        if (view.getUint16(0, false) !== 0xFFD8) {
+          return callback(-2)
+        }
+        var length = view.byteLength
+        var offset = 2
+        while (offset < length) {
+          var marker = view.getUint16(offset, false)
+          offset += 2
+          if (marker === 0xFFE1) {
+            if (view.getUint32(offset += 2, false) !== 0x45786966) {
+              return callback(-1)
+            }
+            var little = view.getUint16(offset += 6, false) === 0x4949
+            offset += view.getUint32(offset + 4, little)
+            var tags = view.getUint16(offset, little)
+            offset += 2
+            for (var i = 0; i < tags; i++) {
+              if (view.getUint16(offset + (i * 12), little) === 0x0112) {
+                return callback(view.getUint16(offset + (i * 12) + 8, little))
+              }
+            }
+          } else if ((marker & 0xFF00) !== 0xFF00) {
+            break
+          } else {
+            offset += view.getUint16(offset, false)
+          }
+        }
+        return callback(-1)
+      }
+      reader.readAsArrayBuffer(file.slice(0, 65536))
+    }
+  },
+  computed: {
+    supportsUpload () {
+      if (navigator.userAgent.match(/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|(Windows Phone (OS 7|8.0))|(XBLWP)|(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|(Kindle\/(1.0|2.0|2.5|3.0))/)) {
+        return false
+      }
+      const el = document.createElement('input')
+      el.type = 'file'
+      return !el.disabled
+    },
+    supportsPreview () {
+      return window.FileReader && !!window.CanvasRenderingContext2D
+    },
+    supportsDragAndDrop () {
+      const div = document.createElement('div')
+      return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && !('ontouchstart' in window || navigator.msMaxTouchPoints)
+    },
+    computedClasses () {
+      const classObject = {}
+      classObject['dragging-over'] = this.draggingOver
+      return classObject
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.onResize)
+  }
+}
+</script>
+
+<style scoped>
+.picture-input {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+.preview-container {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 1em auto;
+  cursor: pointer;
+  overflow: hidden;
+}
+.picture-preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  background-color: rgba(200,200,200,.25);
+}
+.picture-preview.dragging-over {
+  filter: brightness(0.5); 
+}
+.picture-inner {
+  position: relative;
+  z-index: 2;
+  pointer-events: none;
+  box-sizing: border-box;
+  margin: 1em auto;
+  padding: 3em;
+  border: .3em dashed rgba(66,66,66,.15);
+  border-radius: 8px;
+  width: calc(100% - 2.5em);
+  height: calc(100% - 2.5em);
+  display: table;
+}
+.picture-inner .picture-inner-text {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 2em;
+}
+.button {
+  cursor: pointer;
+}
+input[type=file] {
+  display: none;
+}
+@media (max-width: 767px) {
+  .picture-inner {
+    padding: 2vw;
+  }
+  .picture-inner .picture-inner-text {
+    font-size: 5vw;
+  }
+}
+</style>
diff --git a/README.md b/README.md
new file mode 100755
index 0000000..f9aaf2c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,59 @@
+vue-picture-input
+=============
+
+Mobile-friendly picture file input component with image preview and drag and drop.
+
+## Installation
+---------------
+###npm
+``` sh
+npm install --save vue-picture-input
+```
+
+## Usage
+---------------
+
+```javascript
+<script>
+import vue from 'vue';
+import PictureInput from 'vue-picture-input';
+
+vue.component('PictureInput', PictureInput);
+
+export default {
+  name: 'hello',
+  data() {
+    return {
+      msg: 'Just another Vue.js app',
+    };
+  },
+};
+</script>
+```
+
+```HTML
+<template>
+  <div class="hello">    
+    <picture-input width="600" height="600" margin="16" accept="image/jpeg,image/png"></picture-input>    
+  </div>
+</template>
+```
+
+## Props
+---------------
+
+- width, height: (pixels, optional) the width and the height of the preview container. The picture will be resized and centered to cover this area. If not specified, the preview container will expand to full width, 1:1 square ratio.
+- margin: (pixels, optional) the margin around the preview container.
+- accept: (media type, optional) the accepted image type(s) (e.g. image/jpeg, image/gif, etc.) Default value: image/*. 
+- id, name: (string, optional) the id and name attributes of the HTML input element
+
+
+## TODOs
+---------------
+- Add support for multiple files 
+- Demo GitHub pages
+
+
+## Contributions
+---------------
+All contributions are welcome.
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..cc7467b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "vue-picture-input",
+  "version": "1.0.0",
+  "description": "Mobile-friendly picture file input component with image preview and drag and drop.",
+  "main": "PictureInput.vue",
+  "scripts": {
+    "test": "npm run unit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alessiomaffeis/vue-picture-input.git"
+  },
+  "keywords": [
+    "VueJs",
+    "picture",
+    "image",
+    "input",
+    "preview",
+    "form",
+    "upload"
+  ],
+  "author": "alessio@maffe.is",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alessiomaffeis/vue-picture-input/issues"
+  },
+  "homepage": "https://github.com/alessiomaffeis/vue-picture-input"
+}