Upload and crop using CropperJS & VueJS

upload-preview.html

<link rel="stylesheet" href="cropper.min.css">

<div>
    <div v-if="uploadError" class="alert alert-danger">{{ uploadError }}</div>

    <label class="upload-label btn btn-sm btn-default">
        Browse...
        <input type="file" accept="image/*" v-on:change="previewCropUpload" multiple />
    </label>

    <img id="image-preview" style="height:25em; max-width:100%;" />
</div>

<script src="vue.min.js"></script>
<script src="cropper.min.js"></script>
<script>
const app = new Vue({
    el:'#app',
    data: {
        uploads: uploads,
        upload: {},
        uploadFile: null,
        uploadError: ''
    },
    methods: {
        // Upload & crop
        previewCropUpload: function(e){
            var self = this;
            var {uploads, upload} = self;

            var files = e.target.files;
            var image = document.getElementById('image-preview');
            var cropper;

            var done = function (url) {
                e.target.value = '';
                image.src = url;

                cropper = new Cropper(image, {
                    aspectRatio: 4/3,
                    viewMode: 2
                });
            }
            var reader, file, url;

            if (files && files.length > 0) {
                file = files[0];

                if(URL){
                    done(URL.createObjectURL(file));
                }
                else if(FileReader){
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    }
                    reader.readAsDataURL(file);
                }
            }

            $('#btn-upload').click(function(e){
                if(cropper){
                    canvas = cropper.getCroppedCanvas({ width: 960, height: 480 });

                    canvas.toBlob(function(blob){
                        var formData = new FormData();

                        formData.append('upload', blob, 'file.jpg');

                        $.ajax({
                            url: `/upload.php`, // Upload as usual and return JSON response
                            method: 'post',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(data){
                                console.log(data);

                                if(data.error){
                                    self.upload.error = data.error;
                                }
                                else{
                                    // Return list of uploads
                                    self.uploads = data;

                                    self.upload.error = '';
                                }
                            },
                            error: function(e){
                                self.upload.error = 'Could not complete upload';
                            },
                            complete: function(){
                                cropper.destroy();
                                cropper = null;

                                image.src = '';
                            },
                        });

                    }, 'image/jpeg', 100); // Important for sending correct image data
                }
                else{
                    console.log('Cropper was not initialized')
                }
            });
        }
    }
});
</script>