You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=en>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Avoid indexation of the content as it is private. -->
  12. <meta name="robots" content="noindex, nofollow">
  13. <!-- Prevent access via referrers, only the domain will be available. -->
  14. <meta content="origin-when-cross-origin" name="referrer">
  15. <!-- Required to make a valid HTML5 document. -->
  16. <title>Upload images form</title>
  17. <!-- Lightest blank gif, avoids an extra query to the server. -->
  18. <link rel=icon href="data:;base64,iVBORw0KGgo=">
  19. <link rel="stylesheet" href="/static/css/upload_images.css">
  20. <link rel="stylesheet" href="/static/css/custom.css">
  21. <script src="/static/js/stimulus.js"></script>
  22. <script type="text/javascript">
  23. // In your real world application, you probably do not want to do that.
  24. ;(() => window.application = Stimulus.Application.start())()
  25. </script>
  26. <script src="/static/js/upload_images_controller.js"></script>
  27. <form
  28. action="/upload_images" method="post" enctype="multipart/form-data"
  29. data-controller="upload-images"
  30. data-upload-images-max-size-kb="500">
  31. <fieldset>
  32. <input
  33. type="file" name="images" id="images"
  34. accept="image/*" multiple
  35. data-target="upload-images.input"
  36. data-action="upload-images#handleImages">
  37. <label for="images"
  38. data-target="upload-images.label">
  39. Click to upload image(s) or drag & drop below
  40. </label>
  41. <output data-target="upload-images.output"></output>
  42. <canvas
  43. data-target="upload-images.dropzone"
  44. data-action="click->upload-images#openFileSelector
  45. drop->upload-images#handleImages
  46. dragenter->upload-images#addActiveClass
  47. dragover->upload-images#addActiveClass
  48. focus->upload-images#addActiveClass
  49. dragleave->upload-images#removeActiveClass
  50. blur->upload-images#removeActiveClass"
  51. ></canvas>
  52. </fieldset>
  53. <input type="submit" name="submit"
  54. data-target="upload-images.submit"
  55. data-action="upload-images#submit">
  56. </form>
  57. </html>