HTTP PUT File/BLOB with fetch or XMLHttpRequest

Question

Is it possible to upload a File with fetch ? I'm not talking about FormData , but I want to be the file the actual body of the HTTP PUT , and the Content-Type the correct ContentType?

If its not possible with fetch , can it be dont with the XMLHttpRequest ? This code isnt working for me (event is a drop event):

fetch('/foo', {
  method: 'PUT',
  body: event.dataTransfer.files[0],
});

Edit:

I'm specifically talking about FILE uploads. This does work if body is a Text, but not if its a FILE / BLOB !

Answer 1

You can just create the form data, something like:

const body = new FormData();
const file = event.dataTransfer.files[0];
body.append('files', file , file.name);

fetch('/foo', {
  method: 'PUT',
  body
});

However, if you want to just send the data directly you'll have to change the header and use a Blob :

const body = new Blob(event.dataTransfer.files, { type: 'application/octet-stream' });

fetch('/foo', {
  method: 'PUT',
  headers: new Headers({ 'Content-Type': 'application/octet-stream' }),
  body
});