Uploading File Using XHR

Uppy
1

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
Screenshot 2024-12-20 at 6.21.16 PM1508×1158 88.3 KB

Here is my sample code:

<!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

<?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";
2

Hi, perhaps our example helps: uppy/examples/php-xhr at main · transloadit/uppy · GitHub

3

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

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!!!

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);
4

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

5

I would, but my GIT skills are poor. :frowning: