Загрузить изображение DnD с помощью jQuery + PHP

Question

Я пытаюсь настроить систему загрузки изображений с помощью перетаскивания и не знаю, как записать данные в файл с использованием PHP.

В настоящее время я использую FileReader.readAsDataURL() получить URI данных для загруженного изображения и сохранить его в var data,

var base64_start = data.indexOf(',') + 1;
$.ajax({
    type : 'POST',
    url : 'save_image.php',
    ...
    data : data.substring(base64_start)
});

внутри save_image.php:

foreach($_POST as $key => $val) {
    $file = $key; 
    break;  
}

$binary = base64_decode($file);
$fh = fopen('images/test.png', 'w');
fwrite($fh, $binary);

Я пытался скачать test.png и это говорит, что изображение повреждено.

Я также пытался использовать imagecreatefromstring():

$binary = base64_decode($file);
$img = imagecreatefromstring($binary);