Send file from clipboard

Question

I want to be able to paste an image taken via the print screen button in a textarea and upload it to my server.

I am using onpaste and it seems to work, I can get a hold of a file object but whenever I try to send it it's empty.

onpaste(event) {
  if (event.clipboardData.files.length) {
    let file = event.clipboardData.files[0];

    var oReq = new XMLHttpRequest();
    var data = new FormData();

    data.append("file", file);
    data.append("csrf", CSRF_TOKEN);

    oReq.open("POST", exports.url("/file"));
    oReq.setRequestHeader("Accept", "application/json");

    oReq.send(data);
  }
}

I observe the network tab in my dev tools and a request is properly being sent with all of the information about the file except there is no contents

Request payload:

------WebKitFormBoundaryWggS2BbKcZV6v4tn
Content-Disposition: form-data; name="file"; filename="image.png"
Content-Type: image/png


------WebKitFormBoundaryWggS2BbKcZV6v4tn
Content-Disposition: form-data; name="csrf"

58718518696317230756900774635415
------WebKitFormBoundaryWggS2BbKcZV6v4tn--

Answer 1

In this case the file you access via event.clipboardData.files[0]; is really just a handle to the file, it doesn't contain the actual file data. To access this you must use a FileReader per the FileAPI documentation.

There are four different ways to read this data through the FileReader:

void readAsArrayBuffer(Blob blob);
void readAsBinaryString(Blob blob);
void readAsText(Blob blob, optional DOMString label);
void readAsDataURL(Blob blob);

See below an example which you can modify to fit your needs.

function onPaste(event) {
  if (event.clipboardData.files.length) {
    let file = event.clipboardData.files[0];
    var oReq = new XMLHttpRequest();
    var data = new FormData();

    data.append("csrf", "TOKEN");

    oReq.open("POST", "/file");
    oReq.setRequestHeader("Accept", "application/json");

    /* Create a new FileReader. */
    var fileReader = new FileReader();
    
    fileReader.onload = function(event) {
      /* Once the file has finished loading, run the following: */
      data.append("file", this.result);
      oReq.send(data);
    };
    
    /* Tell the file reader to asynchronously load the files contents. */
    fileReader.readAsDataURL(file);
  }
}

<textarea onpaste="onPaste(event)" ></textarea>

Answer 2

In this case the file you access via event.clipboardData.files[0]; is really just a handle to the file, it doesn't contain the actual file data. To access this you must use a FileReader per the FileAPI documentation.

There are four different ways to read this data through the FileReader:

void readAsArrayBuffer(Blob blob);
void readAsBinaryString(Blob blob);
void readAsText(Blob blob, optional DOMString label);
void readAsDataURL(Blob blob);

See below an example which you can modify to fit your needs.

function onPaste(event) {
  if (event.clipboardData.files.length) {
    let file = event.clipboardData.files[0];
    var oReq = new XMLHttpRequest();
    var data = new FormData();

    data.append("csrf", "TOKEN");

    oReq.open("POST", "/file");
    oReq.setRequestHeader("Accept", "application/json");

    /* Create a new FileReader. */
    var fileReader = new FileReader();
    
    fileReader.onload = function(event) {
      /* Once the file has finished loading, run the following: */
      data.append("file", this.result);
      oReq.send(data);
    };
    
    /* Tell the file reader to asynchronously load the files contents. */
    fileReader.readAsDataURL(file);
  }
}

<textarea onpaste="onPaste(event)" ></textarea>