Upload a blob file created using javascript to a php server

Question

Javascript:

let myFile = new Blob(["A file"], { type: "text/plain"});

fetch("server_location.php", {
  method: "POST",
  body: myFile,
  headers: {
    "Content-Type": "text/plain"
  })
  .then((res) => { return res.text(); }
  .then((text) => { console.log(text) };

Php:

<?php
var_dump($_FILES)

Required Should show the file in the file array Output array (0)

Please give me a solution so that I can upload custom text blob file created in javascript to my php server.

What have you tried to resolve the problem? Where are you stuck? — Nico Haase, Mar 07 '23 at 10:30
Did you try to search for similar problems? Maybe https://stackoverflow.com/questions/38630690/how-to-post-blob-as-a-file-using-javascript helps — Nico Haase, Mar 07 '23 at 10:31
Or https://stackoverflow.com/questions/25101609/retrieve-uploaded-blob-with-php — Nico Haase, Mar 07 '23 at 10:32
Read the manual: [Be sure your file upload form has attribute enctype="multipart/form-data" otherwise the file upload will not work.](https://www.php.net/manual/en/features.file-upload.post-method.php) — Thomas Sablik, Mar 07 '23 at 10:32
Or this one: https://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob — Nico Haase, Mar 07 '23 at 10:33
Either use `multipart/form-data` or don't use `$_FILES`. These are your two options. — Thomas Sablik, Mar 07 '23 at 10:33

score 2 · Accepted Answer · answered Mar 07 '23 at 10:35

$_FILES is populated when you upload a request formatted as Multipart Form Data and labeled with the current content-type.

You are uploading a blob labelled as plain text, and stringifed (probably to [object Object]).

To send a multipart request, use a FormData object.

const myFile = new Blob(["A file"], { type: "text/plain"});
const data = new FormData();
data.append("myFile", myFile, "filename.txt");
fetch("server_location.php", {
    method: "POST",
    body: data,
})

To send plain text and read it:

Don't use a blob
Do read from STDIN

fetch("server_location.php", {
    method: "POST",
    body: "a plain text string",
    headers: { "Content-Type": "text/plain" }
})

and

$data = file_get_contents("php://input");

There is nothing wrong with using a blob or along with fetch, and he isn't stringifing anything, it may just be a dummy blob, demonstration us currently how he uploads a file with fetch. i do think `file_get_contents` would be the right answer. — Endless, Mar 07 '23 at 10:47

Daniyal Hussain Siddiqui · Answer 2 · 2023-03-07T10:44:07.140

-4

If you are sending a file then "Content-Type" shouldn't be "text/plain".

Set Content-Type to "multipart/form-data".

{
    "Content-Type": 'multipart/form-data'
}

edited Mar 07 '23 at 10:44

answered Mar 07 '23 at 10:41

Daniyal Hussain Siddiqui

1
1

The body **isn't** multipart/form-data so that won't work. Even if it was, the content-type for `multipart/form-data` has a **mandatory** `boundary` parameter that you omitted. – Quentin Mar 07 '23 at 10:44

Upload a blob file created using javascript to a php server

2 Answers2