# Uploading File Using XHR

**URL:** <https://community.transloadit.com/t/uploading-file-using-xhr/17400>\
**Category:** Uppy\
**Created:** [December 20, 2024, 11:24pm UTC](https://community.transloadit.com/t/uploading-file-using-xhr/17400 "2024-12-20T23:24:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jim](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/jim/32/1273_2.png) [@Jim](https://community.transloadit.com/u/Jim)\
**Post date:** [December 20, 2024, 11:24pm UTC](https://community.transloadit.com/t/uploading-file-using-xhr/17400/1 "2024-12-20T23:24:26Z")

</div>

When I upload a file, it uploads to the server fine, but uppy does not show that is has completed even though it shows 100%. There is still an X and not a green checkmark.

 ![Screenshot 2024-12-20 at 6.21.16 PM](https://canada1.discourse-cdn.com/flex032/uploads/transloadit/original/2X/e/e56969466bba9e437336d53a42715b7b8881d41e.jpeg)

Here is my sample code:

```auto
<!DOCTYPE html>
<html lang="en">
	<head>
		<link href="https://releases.transloadit.com/uppy/v4.8.0/uppy.min.css" rel="stylesheet" />
	</head>
	<body>
		<div id="uppy"></div>
	</body>
</html>
<script type="module">
	import { Uppy, Dashboard, ImageEditor, XHRUpload } from "https://releases.transloadit.com/uppy/v4.8.0/uppy.min.mjs";

	const uppy = new Uppy({ debug: true, restrictions: { maxFileSize: 32000000, allowedFileTypes: ["image/jpeg", "image/png"] } });

	uppy.use(Dashboard, { target: "#uppy", inline: true }).use(XHRUpload, {
		responseType: "text",
		fieldName: "my_file",
		endpoint: "fileUpload.php?id=xyz",
	});
	uppy.use(ImageEditor);
</script>

```

fileUpload.php

```auto
<?php
$id = $_GET['id'];
$files = $_FILES['my_file'];
$file_path = $files['tmp_name']; // temporary upload path of the first file
$file_type = $files['type']; // type of the first file
$file_name = $_POST['name']; // desired name of the file
$stepDir = '../projects/' . $id . "/1";
if (!file_exists($stepDir)) {
    mkdir($stepDir, 0777, true);
}
move_uploaded_file($file_path, $stepDir . "/" . basename($file_name));
echo "ok";

```

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [December 23, 2024, 9:58am UTC](https://community.transloadit.com/t/uploading-file-using-xhr/17400/2 "2024-12-23T09:58:18Z")

</div>

Hi, perhaps our example helps: [uppy/examples/php-xhr at main · transloadit/uppy · GitHub](https://github.com/transloadit/uppy/tree/main/examples/php-xhr)

---

<div class="post-metadata">

**Author:** ![Jim](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/jim/32/1273_2.png) [@Jim](https://community.transloadit.com/u/Jim)\
**Post date:** [December 23, 2024, 3:19pm UTC](https://community.transloadit.com/t/uploading-file-using-xhr/17400/3 "2024-12-23T15:19:36Z")

</div>

YES! The documentation at the bottom of this page is insufficient:

> **[XHR | Uppy](https://uppy.io/docs/xhr-upload/)**
>
> The @uppy/xhr-upload plugin is for regular uploads to a HTTP server.

It does not describe the return information needed from the server. Your example did. I just added this code and everything worked fine. THANK YOU!!!

```auto
header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');
$data = ['url' => $stepDir, 'message' => 'The file ' . $file_name . ' has been uploaded.'];
http_response_code(201);
echo json_encode($data);

```

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [December 23, 2024, 9:50pm UTC](https://community.transloadit.com/t/uploading-file-using-xhr/17400/4 "2024-12-23T21:50:05Z")

</div>

Are you willing to make a PR to improve the docs?

---

<div class="post-metadata">

**Author:** ![Jim](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/jim/32/1273_2.png) [@Jim](https://community.transloadit.com/u/Jim)\
**Post date:** [December 26, 2024, 5:20pm UTC](https://community.transloadit.com/t/uploading-file-using-xhr/17400/5 "2024-12-26T17:20:28Z")

</div>

I would, but my GIT skills are poor. ☹