A Simple Pipe Routing Example: HTML Upload to HTML Display

March 24, 2017 by Ben Williams

One of our beta users was interested in how to use pipes to rout data to and from a static HTML page. We recently created an example of an output to HTML, but failed to show how an HTML input works.

So, I created a very simple HTML example, which let’s a user upload a text file via an HTML web form to a Flex.io pipe and then display the results:

Min blog example

Simple, eh?  You can play with example here. Just use a file with a .txt extension for the upload.

The Pipe

The pipe is very straightforward — we’re going to simply add one step to limit the size of the output file. Here’s a visual representation of the pipe:

Min blog pipe

Here are the specific steps for each step used in the pipe:

input from: stdin
output to: stdout

The Web Page

Here’s the code for the static index.html hosted on GitHub:

The API Call

The Flex.io API call that runs a pipe is simple:

https://www.flex.io/api/v1/pipes/your-pipe-alias-here/run?stream=0

Although this could be accomplished by simply using the <form> element’s action property, we want to display the output of the pipe on the same HTML page without having to navigate away to another page. To do this, we need to intercept the form’s submit action, and upload the files via an `XMLHttpRequest`. This will also give us the opportunity to specify our desired pipe name and api token.

Once the Ajax call has completed, we can retrieve the contents of the call and display them in the results <div> at the very end of the sample.

Files can be uploaded to this API endpoint. The stream=0 GET parameter instructs the API call to return the contents of the first output data stream of the pipe. Many, if not most pipes have only one data stream associated with them. The stream parameter is zero-indexed, so in this case, “0” simply indicates the first stream.

We hope you enjoyed seeing how easy it is to hook up an HTML form to a Flex.io pipe. Let us know what you think!