Inject cropped file as input:file value

Question

I am using jQuery Croppie lib for cropping user's uploaded file. When user uploads file, I am opening modal in which user can crop image. After that I want to set this cropped image as file input value so that, user can submit form then when everything is ready, but I don't know how to "set" cropped image as input value.

Here is my code.

$scope.openCropModal = function(files) {
            if (!(files[0] instanceof Object) || (fileUploadMaxSize * 1100000) < files[0].size) {
                Alertify.alert('File size must be less than ' + fileUploadMaxSize + 'mb');

                return false;
            }
            $('#cropLogoModal').modal({});

            var $uploadCrop = $('#cropperMainContainer').croppie({
                viewport: {
                    width: 200,
                    height: 200,
                    type: 'square'
                },
                boundary: {
                    width: 300,
                    height: 300
                },
                enableExif: true,
                enableOrientation: true,
                orientation: 4,
            });

            var reader = new FileReader();

            reader.onload = function (e) {
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                }).then(function() {

                });

            };

            reader.readAsDataURL(files[0]);

            $('#ready').on('click', function() {
                $uploadCrop.croppie('result', 'blob').then(function(blob) {

                });
            });

            $('.vanilla-rotate').on('click', function() {
                $uploadCrop.croppie('rotate', parseInt($(this).data('deg')));
            });
        }

Answer 1

Instead of putting it as file attachment, create hidden field for bas64 encoded blob data.

        var reader = new FileReader();

        reader.onload = function (e) {
            $uploadCrop.croppie('bind', {
                url: e.target.result
            }).then(function(blob) {
                $('#hiddenContent').val(btoa(blob));
            });
        };

And than when on server side, read this base64 encoded image content and put it to new file.

Warning Code not tested.