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: event.target.files[0] });
        
        };
        
        // On file upload (click the upload button)
        onFileUpload = () => {
        
        // Create an object of formData
        const formData = new FormData();
        
        // Update the formData object
        formData.append(
        "myFile",
        this.state.selectedFile,
        this.state.selectedFile.name
        );
        
        // Details of the uploaded file
        console.log(this.state.selectedFile);
        
        // Request made to the backend api
        // Send formData object
        axios.post("api/uploadfile", formData);
        };
        
        // File content to be displayed after
        // file upload is complete
        fileData = () => {
        
        if (this.state.selectedFile) {
        
        return (
        <div>
          <h2>File Details:</h2>
          
      <p>File Name: {this.state.selectedFile.name}</p>
      
          
      <p>File Type: {this.state.selectedFile.type}</p>
      
          
      <p>
          Last Modified:{" "}
          {this.state.selectedFile.lastModifiedDate.toDateString()}
          </p>
      
        </div>
        );
        } else {
        return (
        <div>
          <br />
          <h4>Choose before Pressing the Upload button</h4>
        </div>
        );
        }
        };
        
        render() {
        
        return (
        <div>
          <h1>
          GeeksforGeeks
          </h1>
          <h3>
          File Upload using React!
          </h3>
          <div>
          <input type="file" onChange={this.onFileChange} />
          <button onClick={this.onFileUpload}>
          Upload!
          </button>
          </div>
        {this.fileData()}
        </div>
        );
        }
      }
      
      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 axios.post() 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.

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.