Merge pull request #76 from AjithLalps/#74-fix

#74 chore: update README.md

README.md

@@ -138,6 +138,59 @@ export default {
 </script>
 ```
 
+### File Upload Sample
+You can upload file instead of using direct image link.
+*Usage*
+In your form add a `file input` along with `vue-croppie` component.
+```vue
+<template>
+  <input type="file" @change="croppie"/>
+  <vue-croppie ref="croppieRef" :enableOrientation="true" :boundary="{ width: 450, height: 300}" :viewport="{ width:400, height:250, 'type':'square' }">
+  </vue-croppie>
+  <!-- the result -->
+  <img :src="cropped">
+  <button @click="crop">Crop</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      croppieImage: '',
+      cropped: null
+    };
+  },
+  methods: {
+    croppie (e) {
+      var files = e.target.files || e.dataTransfer.files;
+      if (!files.length) return;
+
+      var reader = new FileReader();
+      reader.onload = e => {
+        this.$refs.croppieRef.bind({
+          url: e.target.result
+        });
+      };
+
+    reader.readAsDataURL(files[0]);
+    },
+    crop() {
+      // Options can be updated.
+      // Current option will return a base64 version of the uploaded image with a size of 600px X 450px.
+      let options = {
+        type: 'base64',
+        size: { width: 600, height: 450 },
+        format: 'jpeg'
+      };
+      this.$refs.croppieRef.result(options, output => {
+        this.cropped = this.croppieImage = output;
+          console.log(this.croppieImage);
+        });
+      }
+  }
+};
+```
+
 ### Using Options
 
 All [Croppie options](https://foliotek.github.io/Croppie/) were converted to props to be able use them in the `vue-croppie` component.