how to communicate/handle file on the server side when using react dropzone uploader in react js?

Viewed 18

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);
    }
}
0 Answers
Related