Question 73954 in Reactjs Question posted in
The new location for the React Documentation can be found here.

upload images in react js public without api – Reactjs

I want to know can we create an upload functionality in react which will upload images to the PUBLIC folder in react or anywhere in local system without an API?

I was looking for solution but I could not find anything. one thing that I did find is- I can store image inside an array and display it but I am guessing that is cleared once I refresh the page. If you have any suggestion on this as well please.

Tags:

2

Answers


  1. 0

    You can use filereader to upload images. Furthermore follow this link
    https://blog.logrocket.com/using-filereader-api-preview-images-react/

    other than that you can use this code

    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;

    Login or Signup to reply.
  2. 0

    You don’t need an API if you just want to move one file from your local disk to the react public folder. If I’ve understood correctly your question, you just need to do this:

    import fs from 'fs';

function moveFileToPublic(filePath, fileName) {
  const source = fs.createReadStream(filePath);
  const destination = fs.createWriteStream(`<public folder>/${fileName}`);
  source.pipe(destination);
}

    fs is a Node.JS module which allows you to interact with the file system in a Node.js environment.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search