From 3caf634307aac867eb8ddb2875da2c6ba7c315a0 Mon Sep 17 00:00:00 2001
From: indr <mail@indr.ch>
Date: Mon, 11 Sep 2017 11:40:56 +0200
Subject: [PATCH] Add prefill options

---
 .gitignore       |  1 +
 PictureInput.vue | 19 ++++++++++++-------
 README.md        |  6 ++++++
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0f4b4b9..729e0ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
+.idea/
 dev/
 node_modules/
 dist/
diff --git a/PictureInput.vue b/PictureInput.vue
index 50c3901..9e0f424 100644
--- a/PictureInput.vue
+++ b/PictureInput.vue
@@ -88,6 +88,10 @@ export default {
       type: [String, File],
       default: ''
     },
+    prefillOptions: {
+      type: Object,
+      default: {}
+    },
     crop: {
       type: Boolean,
       default: true
@@ -126,7 +130,7 @@ export default {
   watch: {
     prefill () {
       if (this.prefill) {
-        this.preloadImage(this.prefill)
+        this.preloadImage(this.prefill, this.prefillOptions)
       } else {
         this.removeImage()
       }
@@ -157,7 +161,7 @@ export default {
   mounted () {
     this.updateStrings()
     if (this.prefill) {
-      this.preloadImage(this.prefill)
+      this.preloadImage(this.prefill, this.prefillOptions)
     }
 
     this.$nextTick(() => {
@@ -425,7 +429,8 @@ export default {
       }
       reader.readAsArrayBuffer(file.slice(0, 65536))
     },
-    preloadImage (source) {
+    preloadImage (source, options) {
+      options = Object.assign({}, options)
       if (typeof source === 'object') {
         this.imageSelected = true
         this.image = ''
@@ -447,10 +452,10 @@ export default {
       })
       .then(imageBlob => {
         let e = { target: { files: [] } }
-        const fileName = source.split('/').slice(-1)[0]
-        let fileType = fileName.split('.').slice(-1)[0]
-        fileType = fileType.replace('jpg', 'jpeg')
-        e.target.files[0] = new File([imageBlob], fileName, { type: 'image/' + fileType })
+        const fileName = options.fileName || source.split('/').slice(-1)[0]
+        let mediaType = options.mediaType || ('image/' + options.fileType || fileName.split('.').slice(-1)[0])
+        mediaType = mediaType.replace('jpg', 'jpeg')
+        e.target.files[0] = new File([imageBlob], fileName, { type: mediaType })
         this.onFileChange(e)
       })
       .catch(err => {
diff --git a/README.md b/README.md
index 33e3a2c..103c814 100755
--- a/README.md
+++ b/README.md
@@ -89,6 +89,12 @@ You can find an example project here: https://github.com/alessiomaffeis/vue-pict
 - **removeButtonClass**: (string, optional) the class which will be applied to the 'Remove Photo' button.
   Default value: 'btn btn-secondary button secondary'.
 - **prefill**: (image url or File object, optional) use this to specify the path to a default image (or a File object) to prefill the input with. Default value: empty.
+- **prefillOptions**: (object, optional) use this if you prefill with a data uri scheme to specify a file name and a media or file type:
+```
+  fileName: (string, optional) the file name
+  fileType: (string, optional) the file type of the image, i.e. "png", or
+  mediaType: (string, optional) the media type of the image, i.e. "image/png"
+```
 - **toggleAspectRatio**: (boolean, optional) set *:toggleAspectRatio="true"* to show a button for toggling the canvas aspect ratio (Landscape/Portrait) on a non-square canvas. Default value: false.
 - **autoToggleAspectRatio**: (boolean, optional) set *:autoToggleAspectRatio="true"* to enable automatic canvas aspect ratio change to match the selected picture's. Default value: false.
 - **aspectButtonClass**: (string, optional) the class which will be applied to the 'Landscape/Portrait' button.