Why exchanging between javascript FormData and PHP, does not work?

Question

I don't understand. I have the following JavaScript function that sends a blob object to PHP side:

function createDownloadLink(blob,encoding) {

        fetch('https://localhost:443/process.php', {method: "POST", body: blob}).then( (response) => response.json() ).then( (aidata) => {

                textInputG.value = aidata.text;
        } );
}

On PHP side I catch the blob with the following code and everything simply works:

<?php
    $data = file_get_contents('php://input');
    // PROCESSING HERE //
    $reply = array('text' => $text);
    echo json_encode($reply);
?>

Now the problem is that I need to send MORE THAN ONE OBJECT from the JavaScript side, so I tryed to modify the function using FormData, but on PHP side I'm unable to read the blob:

function createDownloadLink(blob,encoding) {

        const formData = new FormData();
        formData.append('blob', blob);
        formData.append('text', text);
 
        fetch('https://localhost:443/process.php', {method: "POST", body: formData}).then( (response) => response.json() ).then( (aidata) => {

                textInputG.value = aidata.text;
        } );
}

This is what in theory I would have expected to work, but it doesn't!

<?php
    $blob_data = $_FILES['blob'];  # THIS IS NOT READ CORRECTLY #
    $text_data = $_POST['text'];   # This works instead #
    // PROCESSING HERE //

It seems that instead of the bytes of the blob, what I receive on PHP is the string "[object Blob]" inside the $_POST['blob'] array, and nothing inside the $_FILES['blob'] array.

What am I doing wrong, and how can I fix the issue?

I'm trying to get the JavaScript blob along with the text in FormData on the PHP side.

This question is NOT a duplicate of "How to convert Blob to File in JavaScript", NONE of the solutions posted there works for me.

The blob already works when attached directly to POST body in the fetch method, but DOES not work anymore if I try to encapsulate it in FormData object. Weather I transform it into a file or not, makes absolutely NO DIFFERENCE... is there a way to get the blob object transmitted correctly to the PHP processing page?

Please add the code that creates the blob, as well as where it is passed into createDownloadLink — Davi
– Davi, Commented Oct 28, 2024 at 20:45
@Davi, I receive the blob from a plugin and know nothing of how it is created. The only thing I know is that it works perfectly when it is passed "as it is" and does NOT work at all when passed in FormData. Converting the blob to a file before appending it to FormData object changed nothing, unfortunately. — Dario Russo
– Dario Russo, Commented Oct 28, 2024 at 21:53
I suspect the problem is in the caller. formData.append() is supposed to handle blobs properly. If you're getting a string, the caller must have converted it. — Barmar
– Barmar, Commented Oct 28, 2024 at 23:41

suvro · Accepted Answer · 2024-10-29 05:14:05Z

1

Try adding these contentType & processData options, Here is an example

let data = new FormData()
for (var x = 0; x < files.length; x++){
    data.append("file" + x, files[x]);
}
fetch(url, {
    method: 'POST',
    mode: 'cors',
    contentType: false,
    processData: false,
    body:  data
})
.then(parseResponse)
.then(resolve)
.catch(reject);

answered Oct 29, 2024 at 5:14

suvro

788 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dvicemuse Over a year ago

This is a good answer but you might want to clarify how the promise is working with fetch/then... The person asking might not understand javascript promises.

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Dario Russo Over a year ago

Hi suvro, it does not work. PHP still does not receive the attachment. I'm not even sure where the issue is, if on JS or on PHP side: I'm not very skilled with web frameworks.

Collectives™ on Stack Overflow

Why exchanging between javascript FormData and PHP, does not work?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related