Merge pull request #1 from CraftLogan/add-croppie

Add croppie

Author: CraftLogan

package.json

@@ -24,5 +24,8 @@
         "vue-router": "^3.0.1",
         "vue-template-compiler": "^2.5.21",
         "vue-textarea-autosize": "^1.0.4"
+    },
+    "dependencies": {
+        "vue-croppie": "^1.3.13"
     }
 }

public/app.js

@@ -1,6 +1,6 @@
 {
-    "/app.js": "/app.js?id=a1763873e1bd0b22663f",
-    "/light.css": "/light.css?id=00726a847dc6b2cb132a",
-    "/dark.css": "/dark.css?id=aa5f40a240d2b1df06e2",
+    "/app.js": "/app.js?id=046923f5b38e64fc7dd8",
+    "/light.css": "/light.css?id=d21f3947f53c6df3990a",
+    "/dark.css": "/dark.css?id=2a6bef4dae7be9601f06",
     "/favicon.png": "/favicon.png?id=b0b34b4095fcdbb8942d"
 }

public/dark.css

@@ -4,9 +4,12 @@ import {Bus} from './bus.js';
 import Routes from './routes';
 import VueRouter from 'vue-router';
 import VueTextareaAutosize from 'vue-textarea-autosize';
+import VueCroppie from 'vue-croppie';
+
 
 Vue.use(VueRouter);
 Vue.use(VueTextareaAutosize);
+Vue.use(VueCroppie);
 
 const router = new VueRouter({
     routes: Routes,
@@ -26,6 +29,7 @@ Vue.component('mini-editor', require('./components/MiniEditor').default);
 Vue.component('editor', require('./components/Editor').default);
 Vue.component('form-errors', require('./components/FormErrors').default);
 Vue.component('image-picker', require('./components/ImagePicker').default);
+Vue.component('croppie-modal', require('./components/CroppieModal').default);
 Vue.component('date-time-picker', require('./components/DateTimePicker').default);
 Vue.component('multiselect', require('./components/MultiSelect').default);
 Vue.directive('loading', require('./components/loadingButton'));

public/light.css

@@ -0,0 +1,132 @@
+<script type="text/ecmascript-6">
+    import _ from 'lodash';
+
+    export default {
+        props: ['file','viewport', 'boundary'],
+
+
+        data() {
+            return {
+                image: null,
+                cropped: null,
+                uploadProgress: 0,
+                uploading: false
+            }
+        },
+
+
+        mounted() {
+
+            this.image = this.file;
+            this.readFile(this.file);
+
+        },
+
+
+        methods: {
+            /**
+             * This method will close() the modal.
+             */
+            close() {
+                this.$emit('cancelCroppie');
+            },
+            /**
+             * This method closes croppie and sends the
+             * cropped image back in the event
+             */
+            closeCroppie() {
+                this.$emit('closeCroppie', {
+                    avatar: this.avatar
+                });
+            },
+
+            /**
+             * This method emits a cancel event.
+             */
+            cancelCroppie() {
+                this.$emit('cancelCroppie');
+            },
+
+            /**
+             * This method is used to crop the image
+             */
+            crop() {
+                // Here we are getting the result via callback function
+                // and set the result to this.cropped which is being
+                // used to display the result above.
+                let options = {
+                    format: 'png',
+                    quality: 1
+                }
+                this.$refs.croppieRef.result(options, (output) => {
+                    this.cropped = output;
+                    this.uploadSelectedImage(output);
+                });
+            },
+
+
+            /**
+             * Read File with FileReader Class. So that croppie
+             * can be binded to the file.
+             */
+
+            readFile(file) {
+
+                let reader = new FileReader();
+
+                reader.onload = (e) => {
+                    this.$refs.croppieRef.bind({
+                        url: e.target.result,
+                        zoom: 0
+                    });
+                }
+                reader.readAsDataURL(file);
+
+            },
+
+            /**
+             * Upload the selected image.
+             */
+            uploadSelectedImage(base64) {
+                let formData = new FormData();
+
+                fetch(base64)
+                    .then(res => res.blob())
+                    .then(blob => {
+                        let file = new File([blob], "filename.jpeg");
+                        formData.append('image', file, file.name);
+                        this.uploading = true;
+                        this.http().post('/api/uploads', formData, {
+                            onUploadProgress: progressEvent => {
+                                this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                            }
+                        }).then(response => {
+                            this.avatar = response.data.url;
+                            this.uploading = false;
+                            this.closeCroppie();
+                        }).catch(error => {
+                        });
+                    });
+            }
+        }
+    }
+</script>
+
+<template>
+    <modal @close="close">
+        <div :style="{'height':viewport}">
+            <vue-croppie
+                    ref="croppieRef"
+                    :enableOrientation="true"
+                    :viewport ="viewport"
+                    :boundary="boundary"
+                    :enableResize="true">
+            </vue-croppie>
+            </div>
+
+        <div class="mt-10">
+            <button class="btn-sm ml-1 btn-light" @click="cancelCroppie()">Cancel</button>
+            <button class="btn-sm btn-primary float-right" @click="crop()">Crop Image</button>
+        </div>
+    </modal>
+</template>

public/mix-manifest.json

@@ -20,6 +20,6 @@
 
 <template>
     <transition name="modal">
-        <slot/>
+            <slot/>
     </transition>
 </template>

resources/js/app.js

@@ -7,15 +7,15 @@
 
         data() {
             return {
+                file: null,
                 imageUrl: '',
                 uploadProgress: 100,
-
                 selectedUnsplashImage: null,
-
                 unsplashSearchTerm: '',
                 unsplashPage: 1,
                 searchingUnsplash: false,
                 unsplashImages: [],
+                croppieModalShown: false,
             }
         },
 
@@ -67,6 +67,14 @@
             },
 
 
+            /**
+             * Load the selected image into Croppie.
+             */
+            loadSelectedImage(event){
+                this.file = event.target.files[0];
+                this.croppieModal();
+            },
+
             /**
              * Upload the selected image.
              */
@@ -121,14 +129,37 @@
             closeUnsplashModal() {
                 this.unsplashSearchTerm = '';
                 this.selectedUnsplashImage = null;
+            },
+
+            /**
+             * Open Croppie modal.
+             */
+            croppieModal() {
+                this.croppieModalShown = true;
+            },
+
+            /**
+             * Close the Croppie modal.
+             */
+            closeCroppieModal({avatar}) {
+                this.croppieModalShown = false;
+                this.imageUrl = avatar;
+                this.$emit('changed', {url: avatar});
+            },
+
+            /**
+             * Close and Cancel the Croppie modal.
+             */
+            cancelCroppieModal() {
+                this.croppieModalShown = false;
             }
         }
     }
 </script>
 
 <template>
     <div>
-        <input type="file" class="hidden" :id="'imageUpload'+_uid" accept="image/*" v-on:change="uploadSelectedImage">
+        <input type="file" class="hidden" :id="'imageUpload'+_uid" accept="image/*" v-on:change="loadSelectedImage">
 
         <div class="mb-0">
             Please <label :for="'imageUpload'+_uid" class="cursor-pointer underline">upload</label> an image
@@ -167,5 +198,11 @@
                 </div>
             </div>
         </fullscreen-modal>
+        <croppie-modal v-if="croppieModalShown"
+                       :file="file"
+                       :viewport ="{ width: 600, height: 400 }"
+                       :boundary="{ width: 600, height: 400 }"
+                       @closeCroppie="closeCroppieModal"
+                       @cancelCroppie="cancelCroppieModal"></croppie-modal>
     </div>
 </template>