how to send file to server with react dropzone uploader in react js

Question

I want to use react-dropzone-uploader to choose image file and then upload it to my php server (codeigniter 4, if it matters). but even though I already defined xhr in the parameters, it gives an error xhr is undefined. why is that?

here's my code: codesandbox

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

Saurabh Shelar · Accepted Answer · 2022-09-01 19:48:44Z

1

First of all, handleChangeStatus wouldn't accept XHR param. It only accepts meta & file.

You would need to set getUploadParams.

  const getUploadParams = ({ meta }) => {
    return { url: "https://httpbin.org/post" };
  };

<Dropzone
          // getUploadParams={getUploadParams}
          onChangeStatus={handleChangeStatus}
          getUploadParams={getUploadParams}
          maxFiles={1}
          multiple={false}
          canCancel={false}
          inputContent="Drop A File"
          styles={{
            dropzone: { height: 200 },
            dropzoneActive: { borderColor: "green" }
          }}
        />

Try to read the documentation. You'll get it.

Additional Links: https://react-dropzone-uploader.js.org/docs/quick-start#dropzone https://react-dropzone-uploader.js.org/docs/api#onsubmit

edited Sep 1, 2022 at 19:48

answered Sep 1, 2022 at 19:46

Saurabh Shelar

285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to send file to server with react dropzone uploader in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related