Please add an Upload example

[Marius A]

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?

[Eduar Bastidas]

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

[Ajith Lal]

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>

[Joff Tiquez]

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.

[Joff Tiquez]

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