Search code examples
javascriptphphtmlfile-upload

How can I prepopulate a file input?

I'm working on a job board site which submits user applications to a third party site. The users have to provide following information while applying: name, contact details and resume. Since these fields are also available on user profile on the site, we want to pre populate the form fields, allowing users to change the information as they like.

Now, all other fields can be populated without an issue. However, file input field can't be populated due to security violations. Is there a work around possible using FILE API and BLOB objects?

What I'm planning to do is the following:

  1. Create a blob object from file URL on server
  2. Read the blob as an array buffer using FileReader.
  3. Attach this file to file input field <- this is what I'm not able to figure out and need help with.

Also, if there is any alternate way to achieve this, please let me know. I'm using PHP and JavaScript to generate the form, so I can do the preprocessing in PHP.

Solution
    1. Attach this file to file input field <- this is what I'm not able to figure out and need help with.

    It is not possible to set a value at FileList object of <input type="file"> element.

    You can create and append a File object to a FormData object and submit FormData using XMLHttpRequest()

    var data = new FormData();
data.append("file", /* Blob | File */, "filename.ext")