Add Example for File Upload

[anthumchris]

Progress indicators for file uploads (specifically indicators for Request objects) would be a great example. At the time of writing, this doesn't seem possible yet, and the Request docs do indicate ReadableStream may be used as a request body

String body: sent

// Post "hello" body.  Browser sends and server responds with what it receives.
fetch(
  new Request('https://dev.anthum.com/post-test/', {
    body: 'hello',
    headers: {
      'content-type': 'text/plain'
    },
    method: 'POST'
  })
)
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));

ReadableStream body: not sent

This may just be bad experimental code on my part or the browsers do not yet support it.

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue(new TextEncoder().encode('hello'));
    controller.close();
  }
});

// Post ReadableStream body. Browser doesn't seem to send, and server responds with nothing received
fetch(
  new Request('https://dev.anthum.com/post-test/', {
    body: stream,
    headers: {
      'content-type': 'text/plain'
    },
    method: 'POST'
  })
)
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));

[anthumchris]

This implementation was also posted for discussion and resolution on Stack Overflow

https://stackoverflow.com/questions/49085424/

[fselcukcan]

@AnthumChris SO says Page Not Found. What is controller up in the original post.

[anthumchris]

StackOverflow redirects to this: https://stackoverflow.com/questions/49085424/constructing-fetch-request-with-readablestream-body does that work for you?

MDN has some good info on the controller, and I recommend starting here: https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams

[fselcukcan]

First link is still Not Found but thanks. I will read Streams API on mdn.

[anthumchris]

I wonder if StackOverflow is doing some special geo-based redirection. You could also try searching (with quotes) "Constructing Fetch Request with ReadableStream Body" and click the first result:

[aeimi]

I wonder if StackOverflow is doing some special geo-based redirection. You could also try searching (with quotes) "Constructing Fetch Request with ReadableStream Body" and click the first result:

Cannot find this in any way.

[anthumchris]

A ReadableStream can now be sent as a fetch() request body (see https://github.com/whatwg/fetch/pull/425). I'll plan on adding an example for upload progress indicators.

@jakearchibald wrote great article Streaming requests with the fetch API. This example shows a server responding with the streaming request it receives:

Demo: https://jsbin.com/piwewop/edit?js,output

fetch(new Request('https://dev.anthum.com/post-stream-test/', {
  body: new Response('🎉').body,  // new ReadableStream
  duplex: 'half',
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
}))
  .then(response => response.text())
  .then(console.log)
  .catch(console.error)

---

_@amdiv, @fselcukcan: Apologies, please ignore original StackOverflow URL (~https://stackoverflow.com/questions/49085424/~), It was marked as a duplicate question and deleted.