如何在事件 oninput 上的文件输入值之前添加值

Question

I am trying to add text "img/books/" before the image file name in the file upload, to be concatenated and submitted this way the the db: "img/books/imageName.png", but this is not working :/

<script type="text/javascript">
   function addDir()
   {
        const imgDir = 'img/books/'
        document.getElementById('book_img').value =  imgDir +
        document.getElementById('book_img').file.value

   }
</script>

here is html code

<label for="fname">Book Image</label><br>
<input type="file" name="book_img" id="book_img" oninput="addDir()">

Answer 1

It is not possible to change or set the value of the input file. This is for user safety reasons. However, it is possible to read the file name, associate it with the required address and save it in the input hidden. The backend must be prepared for this.