Search code examples
javascripthtmlinputbinaryfiles

Populating an input type tag with a Binary response

I have a PHP script where the response from the API is a binary file "resumeBinary" is the key from the response. So, what I did was to encode it to base64, so that I can easily access its key in in my constructed JSON response data. Here's how the response looks like on the console after fetching it using AJAX:

Response from API with base64 encoded Binary

What I have done so far is that convert the resumeBinary to its original using atob() function here's how it looks like and its now back to its original binary text strings:

decoded binaryResume

My question is, is it possible to append the name of the file and the binary value to the HTML input file tag? This is to conform with the request of my client.

The user will authorized the APP then the APP would fetch the users' resume, after receiving the response from the API, I will then append it to the input file type with the other candidate's information. After that they can change that resume file, if they want to or they can just submit the form, I would then post it to another API.

Append Binary File here

Solution

  • At the time you received this response as text it's already too late, the binary data has been corrupted and you won't be able to retrieve it.
    You need to fetch this data as an ArrayBuffer or a Blob. Since you don't show how you made this request, we can't help you much here.

    Then you'll be able to convert either of these to a File object that you could pass in a DataTransfer and grab the resulting FileList to the input as demonstrated in this answer of mine.

    However, setting the file like this is still a hack, and it still doesn't work in browsers like Safari and will never work in IE.

    Whatever you thought you needed this for, I'm sure there is a better way to do the same, for instance if your goal was to POST this data to your server, then simply use a FormData to make the request the same as with your file input.

    const data = new Uint8Array( 128 );
crypto.getRandomValues( data ); // some noisy data

const dT = new DataTransfer();
dT.items.add( new File( [data], "file.ext" ) );
document.querySelector("input").files = dT.files;

const the_form = document.querySelector("form");
const formdata_from_DOM = new FormData( the_form );
new Response( formdata_from_DOM ).text()
  .then( txt => console.log( "from DOM: \n", txt ) );

const formdata_from_JS = new FormData();
formdata_from_JS.append( "the-file", new Blob( [ data ] ), "file.ext" );
new Response( formdata_from_JS ).text()
  .then( txt => console.log( "from JS: \n", txt ) );
    <form>
  <input type="file" name="the-file">
</form>

    As you can see, both Request's payloads are the same, so better go with the one with better support.

    And if possible, it would be even better to make the request to the API from your server directly.