davidbgk
/
upload-images

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=en>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Avoid indexation of the content as it is private. -->
<meta name="robots" content="noindex, nofollow">
<!-- Prevent access via referrers, only the domain will be available. -->
<meta content="origin-when-cross-origin" name="referrer">
<!-- Required to make a valid HTML5 document. -->
<title>Upload images form</title>
<!-- Lightest blank gif, avoids an extra query to the server. -->
<link rel=icon href="data:;base64,iVBORw0KGgo=">

<link rel="stylesheet" href="/static/css/upload_images.css">
<link rel="stylesheet" href="/static/css/custom.css">

<script src="/static/js/stimulus.js"></script>
<script type="text/javascript">
    // In your real world application, you probably do not want to do that.
    ;(() => window.application = Stimulus.Application.start())()
</script>
<script src="/static/js/upload_images_controller.js"></script>

<form
    action="/upload_images" method="post" enctype="multipart/form-data"
    data-controller="upload-images"
    data-upload-images-max-size-kb="500">
    <fieldset>
        <input
            type="file" name="images" id="images"
            accept="image/*" multiple
            data-target="upload-images.input"
            data-action="upload-images#handleImages">
        <label for="images"
            data-target="upload-images.label">
            Click to upload image(s) or drag & drop below
        </label>
        <output data-target="upload-images.output"></output>
        <canvas
            data-target="upload-images.dropzone"
            data-action="click->upload-images#openFileSelector
                drop->upload-images#handleImages
                dragenter->upload-images#addActiveClass
                dragover->upload-images#addActiveClass
                focus->upload-images#addActiveClass
                dragleave->upload-images#removeActiveClass
                blur->upload-images#removeActiveClass"
            ></canvas>
    </fieldset>
    <input type="submit" name="submit"
        data-target="upload-images.submit"
        data-action="upload-images#submit">
</form>

</html>