0

I am trying to build a form, with multiple image upload. In my JSON object i need to get Path of the images when input selections are made. In bootstrap-vue you can get file.name image.png that is the image name, but i need the full path like C:\YourFileSyste\image.png How can i retrieve that or, append that if its impossible to retrieve.

I have been Following official documentation at https://bootstrap-vue.js.org/docs/components/form-file/#form-file-input

(Also on side note can i limit the max files uploaded using bootstrap-vue.)

Alternatively I have tried to create a custom handle event previosly but i cant seem to access the event with each file and save that in my json

handleFileChange(evt){
        console.log(evt.target.files);
        for(var i in evt.target.files)
        {
        this.infoModal.case.images.push({ //infoModal.case.images is the array where images are stored
              id:0,
              name:null,
              url: evt.target.files[i].name
              });
        }
        console.log(this.infoModal.case.images);

      }
Mohammed
  • 121
  • 2
  • 8

1 Answers1

0

For security reasons, inputs of type file (<input type="file">) will not return the full path of the file with respect to the client's (browser) file system. <b-form-file> is just a wrapper around the native file input.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Value

Note: BootstrapVue's file input returns the file object (or array of file objects) instead of the file names (as the native file input returns just the file names). the File object has the same limitations of only returning a relative path (or no path at all).

Troy Morehouse
  • 5,320
  • 1
  • 27
  • 38
  • Is there any way to work around that? – Mohammed Oct 28 '19 at 15:12
  • It is a browser limitation. https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Getting_information_about_selected_file(s) "The file's name as a read-only string. This is just the file name, and does not include any path information." – Troy Morehouse Oct 28 '19 at 15:15