'how can I get my file directory / file path when file selected by input in react or html

I selected file and put it in state - everything about file object work properly but the but the webkitRelativePath is null ,

     <input type="file" onChange={changeHandler} id="main_img" name="img" style{{display:'none'}} webkitdirectory  />//this my input

state{//this is my state
  name:"1112.PNG"
  lastModified:1645438409236
  lastModifiedDate:Mon Feb 21 2022 13:43:29 GMT+0330 (Iran Standard Time)
  webkitRelativePath:""
  size:1158291
  type:"image/png"
  arrayBuffer:ƒ arrayBuffer() {}
  slice:ƒ slice() {}
  stream:ƒ stream() {}
  text:ƒ text() {}
}

this object is that get from input-- why webkit is empty ?

javascripthtmlreactjs


Solution 1:[1]

The short answer is, you can't get full path of a file with JavaScript. For security reasons this is not allowed in most browsers.

webkitRelativePath only works in Chrome. This allows a user to select a folder instead of files, and every single file is read recursively. The webkitRelativePath contains the relative path of the file within the hierarchy.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Juan Pablo Rubio

Related Questions