index.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Uppy :tl: playground</title>
  7. </head>
  8. <body>
  9. <style>
  10. html {
  11. background: #f1f1f1;
  12. }
  13. main {
  14. padding: 20px;
  15. font: 12pt sans-serif;
  16. background: white;
  17. width: 800px;
  18. margin: auto;
  19. }
  20. hr {
  21. border: 0;
  22. background-color: #111e33;
  23. height: 1px;
  24. }
  25. .error { color: red; }
  26. #logo { height: 1em; vertical-align: middle; }
  27. </style>
  28. <main>
  29. <h1>Uppy <img src="https://transloadit.edgly.net/assets/images/logo-small.svg" alt="Transloadit" id="logo"> playground</h1>
  30. <hr>
  31. <h2>transloadit.form()</h2>
  32. <form id="test-form" method="post" action="http://localhost:9967/test">
  33. <p><strong>leave a message</strong>
  34. <p>
  35. <label>name:
  36. <input type="text" name="name">
  37. </label>
  38. <p>
  39. <label>message: <br>
  40. <textarea name="message"></textarea>
  41. </label>
  42. <p>
  43. <label>
  44. attachments:
  45. <span class="dashboard"></span>
  46. </label>
  47. <div class="progress"></div>
  48. <p>
  49. <button type="submit">
  50. Upload
  51. </button>
  52. <span class="error"></span>
  53. </form>
  54. <hr>
  55. <h2>transloadit.pick()</h2>
  56. <p>
  57. <button onclick="openModal()">Open</button>
  58. <hr>
  59. <h2>transloadit.upload()</h2>
  60. <p>
  61. An &lt;input type=file&gt; backed by `transloadit.upload`:
  62. <p>
  63. <input type="file" multiple onchange="doUpload(event)">
  64. </main>
  65. <link href="uppy.min.css" rel="stylesheet">
  66. <script src="bundle.js"></script>
  67. </body>
  68. </html>