How to send image blob data over regular HTML form to be used in a PHP script

Question

I am having some issues with sending image blob data from the clipboard into a regular POST form. I have scoured the Internet looking for ways to do this on regular forms, but 95% of all solutions I have come across use AJAX, and I was wondering if there was a way to do this without AJAX.

Using the code below I manage to get blob data from the clipboard, and generate its URL. However, on trying to send this data over a regular form, I can't seem to figure out how to do it. I've tried sending over as a "file" (attempting to get the data with $_FILES in PHP) but it either just sent the string [object File], the blob URL as a string, or nothing at all.

Using some code I came across, I managed to get up to here with my JavaScript:

window.addEventListener('paste', e => {
    if (document.activeElement != document.getElementById('post-text')) return; // Check active element and stop if not in text box
    let blobData = e.clipboardData.items[0].getAsFile(); // Blob object
    let blobUrl = e.createObjectURL(blobData); // Blob URL
    document.getElementById('upload-display').src = blobUrl; // Display pasted image
    document.getElementById('upload-display-container').style.display = 'block';
    // Here I want to put a piece of code which adds the image data to a hidden input element, but I'm not sure how to do this.
});

How would I go about adding the image data to a hidden input element which when sent over a HTML POST form, PHP can understand and deal with it the same way as sending over an uploaded file?

Ideally, I'd like to add it to an actual <input> of type files, but after some trial and error along with some research I concluded that's not possible.

Use [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) to `.append` the `Blob` and send via AJAX. — StackSlave, Apr 18 '19 at 00:03
Something like this might help: https://stackoverflow.com/a/33298252/11298742 — ludovico, Apr 18 '19 at 00:10

score 0 · Answer 1 · answered Apr 18 '19 at 00:56

Thank you to @ludovico for pointing me in the right direction. For anyone who is wondering, here is how I solved it:

For my JavaScript (with the page styling functions removed):

window.addEventListener('paste', e => {
    if (document.activeElement != document.getElementById('post-text')) return; // Check active element and stop if not in text box

    let reader = new FileReader();
    reader.addEventListener('load', function() {
        document.getElementById('blob').value = reader.result;
    }, false);

    let blobData = e.clipboardData.items[0].getAsFile(); // Blob object
    let blobUrl = URL.createObjectURL(blobData); // Blob URL
    reader.readAsDataURL(blobData);
});

Then in PHP I did something mildly strange, but that was to make it compatible with my current code which uses the $_FILES array from regular file uploading:

...
if (strlen($_FILES['image']['tmp_name']) == 0 && strlen($_POST['filename']) != 0) {
    $temp = tmpfile();
    $tempPath = tempnam(sys_get_temp_dir(), 'pastedimage');
    file_put_contents($tempPath,base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $_POST['filename'])));
    $fileType = getimagesize($tempPath)['mime'];
    if ($fileType == false) {
        // Handle error
        die();
    }
    $_FILES['image']['name'] = 'image.'.substr($fileType, 6);
    $_FILES['image']['type'] = $fileType;
    $_FILES['image']['tmp_name'] = $tempPath;
    $_FILES['image']['error'] = 0;
    $_FILES['image']['size'] = filesize($tempPath);
}
...

How to send image blob data over regular HTML form to be used in a PHP script

1 Answers1