import axios from 'axios';
      import React,{Component} from 'react';
      class App extends Component {
        state = {
        // Initially, no file is selected
        selectedFile: null
        // On file select (from the pop up)
        onFileChange = event => {
        // Update the state
        this.setState({ selectedFile:[0] });
        // On file upload (click the upload button)
        onFileUpload = () => {
        // Create an object of formData
        const formData = new FormData();
        // Update the formData object
        // Details of the uploaded file
        // Request made to the backend api
        // Send formData object"api/uploadfile", formData);
        // File content to be displayed after
        // file upload is complete
        fileData = () => {
        if (this.state.selectedFile) {
        return (
          <h2>File Details:</h2>
      <p>File Name: {}</p>
      <p>File Type: {this.state.selectedFile.type}</p>
          Last Modified:{" "}
        } else {
        return (
          <br />
          <h4>Choose before Pressing the Upload button</h4>
        render() {
        return (
          File Upload using React!
          <input type="file" onChange={this.onFileChange} />
          <button onClick={this.onFileUpload}>
      export default App;

      Javascript language logo
      your recipe card header background
      File Handling

      React Project

      In the code above, the following functions are being implemented:

      • onFileChange() – This function is called when a file is selected from the file selector pop up or when the upload button is clicked. This function updates the state with the new selected file.

      • onFileUpload() – This function is called when the user uploads a file. This function creates an object of formData and then calls the function to send the formData object to the backend.

      • fileData() – This function is called when the upload is complete. This function returns the content of the file that was uploaded.


        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.