CODEWITHSUNDEEP
javascriptnode.jsreactjs
meren
meren

Reputation: 442

I want to show a successful warning post after a file uploaded using React js

I upload the file using React js filepond component. Then I convert an uploaded file to base64 string format. I want to print a green text "successfully" after the props.values.addendumA = converted statement in if (file [0]). How can I do that?

React js

<Form className="orange-color ml-2">
  <FilePond
    ref={ref => ref}
    allowFileEncode={true}
    allowMultiple={false}
    oninit={() => console.log("FilePond A has initialised")}
    onupdatefiles={fileItems => {
      let file = fileItems.map(fileItem => fileItem.file);

      let coded = file[0];
      if (file[0]) {
        let reader = new FileReader();
        reader.onload = event => {
          console.log(event.target.result);
        };
        let converted = reader.readAsDataURL(coded);

        props.values.addendumA = converted;

        //TODO HERE
        ("Successfully uploaded");
      }
      console.log(props.values.addendumA);
    }}
  />
</Form>

Upvotes: 1

Views: 881

Answers (1)

Ajin Kabeer
Ajin Kabeer

Reputation: 2186

You can display a success toast using react-toastify. It's really simple and handy. Here's how you can do it. First, run yarn add react-toastify or npm install toastify.

Then import the package in the component you want to display toast.

import { toast } from "react-toastify";

props.values.addendumA = converted;
    toast.success("Successfully uploaded");
  }

Final step is to include the ToastContainer in your root component, most probably in your App.js file like this. Don't forget to import these packages in the root component too.

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

Add this component anywhere in your return method.

<ToastContainer autoClose={3000} hideProgressBar />

Upvotes: 1

Related Questions