Html Canvas & Javascript FileReader

[mategvo]

Hi, I have somewhat modern implementation of the file upload. It combines "croppie", a tool that allows a user to move and crop the image, and Javascript FileReader feature. Result is POSTed to the PHP API as an encoded string:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AA...

Unfortunately the Upload library doesn't recognise this format.

Cannot find uploaded file identified by key: image
codeguy/upload/src/Upload/File.php

Is there a way around this?

[mategvo]

Here's the full code, maybe someone will find it useful

	<form method="post" enctype="multipart/form-data" id="groupImageForm">
		<link  href="css/croppie.css" rel="stylesheet">
		<script src="js/croppie.min.js"></script>
		<div id="upload-demo"></div>
		<input type="hidden" id="imagebase64" name="image">
		<input type="file" id="upload" value="Choose a file">
		<a href="#" class="upload-result">Send</a>
		<script type="text/javascript">
		$( document ).ready(function() {
		    var $uploadCrop;

		    function readFile(input) {
		        if (input.files && input.files[0]) {
		            var reader = new FileReader();
		            reader.onload = function (e) {
		                $uploadCrop.croppie('bind', {
		                    url: e.target.result
		                });
		                $('.upload-demo').addClass('ready');
		            }
		            reader.readAsDataURL(input.files[0]);
		        }
		    }

		    $uploadCrop = $('#upload-demo').croppie({
		        viewport: {
		            width: 200,
		            height: 200,
		            type: 'circle'
		        },
		        boundary: {
		            width: 300,
		            height: 300
		        }
		    });

		    $('#upload').on('change', function () { readFile(this); });
		    $('.upload-result').on('click', function (ev) {
		        $uploadCrop.croppie('result', {
		            type: 'canvas',
		            size: 'original'
		        }).then(function (resp) {
		            $('#imagebase64').val(resp);
		            $('#groupImageForm').submit();
		        });
		    });

		});
		</script>
    </form>