javascriptcurlfilereader

How to get the equivalent data format of curl -T --upload-data option from <input type="file"/> using JavaScript in browser?


curl has -T, --upload-file option to "transfer the specified local file to the remote URL".

curl -v "http://some/data/consumer" -XPOST -T "some/file/name"

How can I get the equivalent data of a file using curl -T, from <input type="file" /> using JavaScript?


Solution

  • If what you want is to access the data from javascript, e.g through a data-view, then you can use the Blob.arrayBuffer() method, which will return a Promise resolving to an ArrayBuffer. Since the File interface inherits from Blob, this method is also available on File objects directly.

    document.getElementById('inp').onchange = async function(evt) {
      const buf = await this.files[0].arrayBuffer();
      console.log( buf.byteLength );
      const view = new Uint8Array(buf, 0, 4); // create a view of 4 first bytes
      console.log(view);
    };
    <input type="file" id="inp">

    Note that this method may require a polyfill in older browsers.


    But if what you wish is simply to send that File as binary to a server, then XHR and fetch accept Blob as request body:

    // using XHR
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    xhr.send(input.files[0]);
    
    // using fetch
    fetch(url, { method: "POST", body: inp.files[0] } );
    
    // using axios
    axios.post(url, inp.files[0]);