Please add an Upload example

[mariusa]

Please add an Upload example similar to https://foliotek.github.io/Croppie/ > upload

How to get cropped image to upload to server after user crops it?

[mreduar]

I'm trying to do the same thing, first I want to crop the image before sending it to the server and I don't know how to pass the image to the bind method.

Some help would be appreciated

[AjithLalps]

Here is how I have done upload

form

 <input :class="form-control"  type="file" id="banner_image" @change="bannerCroppie($event)/>
 <vue-croppie   ref="bannerRef"  :enableOrientation="true"  :boundary="{ width: 450, height: 300}" :viewport="{ width:400, height:250, 'type':'square' }">
 </vue-croppie>
<!-- the result -->
<img v-bind:src="cropped">
<button @click="crop()">Crop</button>

Script

<script>
export default {
    data() {
        return {
            banner_image: "",
        };
    },
    methods: {
        bannerCroppie(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;

            var reader = new FileReader();
            reader.onload = e => {
                this.$refs.bannerRef.bind({
                    url: e.target.result
                });
            };

            reader.readAsDataURL(files[0]);
        },
        crop() {
            let options = {
                type: "base64",
                size: { width: 600, height: 450 },
                format: "jpeg"
            };
            this.$refs.bannerRef.result(options, output => {
                this.banner_image = output;
            });
        }
    }
};
</script>

[jofftiquez]

FYI the implementation of uploading the cropped photo to the serve is out of context to the features of vue-croppie. This will fall under the implementation work. Meaning, it is up to you. I can just give an example, but not a feature.

[jofftiquez]

Closing now, please create a new issue for creating an example.