How to get absolute path of image in react `` and store it in local state?

Question

I have a simple shopping app that I made with react, react-router and bootstrap. I've got a form on a certain page where I can add a new product to the database.

There I can provide a name, description, category, and upload a product image.

The thing is when I upload an image through <input ="file">, I want to somehow get the absolute path of the image when I press open and store it inside the local state.

Till now my code is like this...

function Form() {
  const [imageUrl, setImageUrl] = useState("");

  // ... a bunch of code here

  return (
    <form style={styles.form}>

      // ... a bunch of code here

      <div className="form-group">
        <label htmlFor="image" className="form-label" style={styles.label}>
          Picture
        </label>
        <input className="form-control" type="file" id="image" required />
      </div>

      // ... a bunch of code here

    </form>
  )
}

I've tried this but that is for Jquery.

I'm new to React, so please be kind, and thanks in advance :)

Answer 1

You have to add one onChange Function inside input tag, So while you will make onChange on same event will be trigger, on that event you will get target file path which will be like (event.target.files[0]), that you have to wrap into URL.createObjectURL. So for above code you will have to add below things, that will work:-

function Form() {
  const [imageUrl, setImageUrl] = useState("");
const fileBrowseHandler = (event) => {
        let value = URL.createObjectURL(event.target.files[0]);
        setImageUrl(value]);
    };

  return (
    <form style={styles.form}>
      <div className="form-group">
        <label htmlFor="image" className="form-label" style={styles.label}>
          Picture
        </label>
        <input className="form-control" type="file" id="image"  onChange={fileBrowseHandler} required />
      </div>

      // ... a bunch of code here

    </form>
  )
}

Answer 2

Short answer; you can't.

The input file element will deliberately hide the full path for security reasons:

The string is prefixed with C:\fakepath, to prevent malicious software from guessing the user's file structure. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)

In general, when you use the file input, it's to upload the file; you shouldn't need the path at all.

Edit for example upload to Google Drive

NOTE: this requires you to be authenticated

Assume you have your html like so:

<form id="load-image-form">
    <input type="file" id="chosen-image" accept=".jpg,.png">
    <button type="submit">Upload</button>
</form>

Then your script to upload the file would look like this:

const fileInput = document.getElementById('chosen-image')
document.getElementById('load-image-form').addEventListener('submit', e => {
    e.preventDefault();

    // check if there's any actual files chosen
    if (fileInput.files.length == 0) {
        console.log(`No files chosen`);
        return;
    }

    // assume only one file - read it, and when it's ready, upload to google drive
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onload = () => {
        console.log(`File loaded locally - uploading`)
        fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=media', {
            method: 'POST',
            headers: {
                'Content-Type': file.type,
                'Content-Length': file.size
            },
            body: reader.result
        })
        .then(data => data.json())
        .then(console.log)
        .catch(console.error)
    }
    reader.readAsArrayBuffer(file);
})

Basically once the form is submitted, check if there's a file selected, if so load it using FileReader, then POST it to Google Drive

When I test this locally, I get an Authorization Login Required error, so you need to be logged in for this.

To upload it to your server (e.g. Node), use the link I posted in my comment: https://stackoverflow.com/a/15773267/639441

Answer 3

You can't get the full path due to security reasons. You can try fs-js module to work with files https://www.npmjs.com/package/fs-js