I'm using codeigniter 4 as backend for my react js project which uses react-dropzone-uploader. my code works in the sense that I can choose a file and I see the status property is done, but I have no idea how to communicate to the backend. does getUploadParams automatically uploads the file to the server like a fetch API? or do I have to put a fetch API in the handleChangeStatus function?
here's the code I'm using for the react-dropzone-uploader
import React from "react";
import "react-dropzone-uploader/dist/styles.css";
import Dropzone from "react-dropzone-uploader";
import "./styles.css";
export default function App() {
const toast = (innerHTML) => {
const el = document.getElementById("toast");
el.innerHTML = innerHTML;
el.className = "show";
setTimeout(() => {
el.className = el.className.replace("show", "");
}, 3000);
};
const getUploadParams = ({ file, meta }) => {
const myurl = ('http://localhost:3000/users/upload_file');
console.log('getuploadparams', myurl, file, meta);
return { url: myurl }
}
const handleChangeStatus = ({ meta, file, xhr }, status) => {
console.log("handlechangestatus", status, meta, file);
if (status === "done") {
console.log('xhr', xhr);
let response = JSON.parse(xhr.response);
}
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<React.Fragment>
<div id="toast">Upload</div>
<Dropzone
getUploadParams={getUploadParams}
onChangeStatus={handleChangeStatus}
maxFiles={1}
multiple={false}
canCancel={false}
inputContent="Drop A File"
styles={{
dropzone: { height: 200 },
dropzoneActive: { borderColor: "green" }
}}
/>
</React.Fragment>
</div>
);
}
and here's my code on the server side:
<?php
namespace App\Controllers;
use CodeIgniter\RESTful\ResourceController;
use CodeIgniter\API\ResponseTrait;
use App\Models\UserModel;
use App\Libraries\Utils;
class Users extends ResourceController
{
use ResponseTrait;
private $tblname = 'users';
// other code e.g. index, get, post, update, delete
public function upload_file()
{
// move_uploaded_file($_FILES["myFile"]["tmp_name"], "../../public/assets/img/" . $_FILES["myFile"]["name"]);
$response = [
'status' => 200,
'messages' => 'testing upload file',
'post' => $this->request->getVar(),
'files' => $_FILES,
];
return $this->respond($response);
}
}