Resumable.js and dilab/resumable.php not working as expected

Question

I've been testing the resumable.js library with the resumable .php, but it doesn't work .Here's the file structures and codes. I modified the resumable.js to try and fix it with the help of Google's Bard but it still isn't working

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Resumable.js test</title>
    <script src="resumable.js-master/resumable.js"></script>
  </head>
  <body>
    <form>
      <input type="file" id="fileInput" />
      <button type="button" id="uploadButton">Upload</button>
    </form>

    <script>
      var r = new Resumable({
        target: "upload.php",
        chunkSize: 1 * 1024 * 1024, // 1MB chunks
      });

      r.assignBrowse(document.getElementById("fileInput"));

      document
        .getElementById("uploadButton")
        .addEventListener("click", function () {
          r.upload();
        });

      r.on("fileAdded", function (file, event) {
        console.log("File added:", file);
      });

      r.on("fileSuccess", function (file, message) {
        console.log("File upload successful:", file, message);
        // Call the PHP script
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "upload.php");
        xhr.onload = function () {
          if (xhr.status == 200) {
            console.log("PHP script executed successfully");
          } else {
            console.log("PHP script execution failed");
          }
        };
        xhr.send("file=" + file);
      });

      r.on("fileError", function (file, message) {
        console.error("File upload failed:", file, message);
      });
    </script>
  </body>
</html>

and here's the original code

 var r = new Resumable({
 target: "upload.php", testChunks: true, 
});  
// Log an error message if the target folder is not found
  if (!document.getElementById("add-file-btn")) {
    console.error("Target folder not found");
  } else {
    r.assignBrowse(document.getElementById("add-file-btn"));
  }

  $("#upload-button").click(function () {
    r.upload();
  });

and finally the upload.php code

include_once __DIR__ . '/vendor/autoload.php';
use Dilab\Network\SimpleRequest;
use Dilab\Network\SimpleResponse;
use Dilab\Resumable;

$request = new SimpleRequest(); 
$response = new SimpleResponse();

$resumable = new Resumable($request, $response);
 $resumable->tempFolder = 'tmps';
 $resumable->uploadFolder = 'uploads'; 
$resumable->process();

And this is the file strucuture

C:\wamp64\www\database\chunktest
├── index.html
├── resumable.js-master
│   └── resumable.js
└── vendor
    └── dilab
        └── resumable.php

when i checked the return message in the console the file added and file message poped up but the full php script together with its tag was logged as well i.e file added message[.......] file succedfull message[........] and '<?php [code..........] ?>

I would like the file to be uploaded into the uploads folder. i want to know if there's anything wrong with the code or there's a setup error or any other problem. and i would like to know ways to fix them

Resumable.js and dilab/resumable.php not working as expected

0 Answers0