Adding More Functions to `user-workflow.js`
In this lesson, you will add more functions to `user-workflow.js` for the visualization of the workflow.
We'll cover the following...
index.html #
Next, you can start composing the visual part of the workflow. First, let’s create a simple web page that will let you show different steps of the workflow. The web page also needs to load the client application JavaScript from an external file. A new file is created called index.html in the web-site directory, with content similar to the following:
Press + to interact
<html><body><div step="initial"><h1>Select a file</h1><input type="hidden" id="apiurl" value="${API_URL}" /><input type="file" id="picker"/></div><div step="uploading" style="display: none">Please wait, uploading...<br/><progress id="progressbar" max="100" value="0" /></div><div step="converting" style="display: none">Please wait, converting your file...</div><div step="result" style="display: none"><h1>Your thumbnail is ready</h1><a id="resultlink">download it</a></div><div step="error" style="display: none"><h1>There was an error creating the thumbnail</h1><p id="errortext"></p></div><script src="user-workflow.js"></script></body></html>
Notice the placeholder for the API URL on line 5 of the previous listing. In earlier ...