Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .button1 { | |
| background-color: #00eaff; | |
| border: none; | |
| border-radius: 24px; | |
| padding: 10px; | |
| width: 100%; | |
| margin: auto; | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| font-weight: bolder; | |
| } | |
| .form-control-file { | |
| position: relative; | |
| width: 100%; | |
| margin: 10px; | |
| height: 81dvh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| justify-items: center; | |
| outline: none; | |
| visibility: hidden; | |
| cursor: pointer; | |
| background-color: blueviolet; | |
| box-shadow: 0 0 5px solid blueviolet; | |
| } | |
| .form-control-file:before { | |
| content: attr(data-title); | |
| position: absolute; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| justify-items: center; | |
| font-size: large; | |
| font-weight: bolder; | |
| top: 0; | |
| left: 0; | |
| width: 95%; | |
| height: 80dvh; | |
| opacity: 1; | |
| visibility: visible; | |
| text-align: center; | |
| border: 0.25em blueviolet dashed; | |
| border-radius: 24px; | |
| transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .form-control-file:hover:before { | |
| border-style: solid; | |
| box-shadow: inset blueviolet 0px 0px 0px 0.25em; | |
| } | |
| body { | |
| background-color: #f7f7f9; | |
| } | |
| </style> | |
| <title>Upload Files</title> | |
| </head> | |
| <body> | |
| <h2 style="text-align: center; font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold;">Upload New Files</h2> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| <ul> | |
| {% for message in messages %} | |
| <li>{{ message }}</li> | |
| {% endfor %} | |
| </ul> | |
| {% endif %} | |
| {% endwith %} | |
| <form method="post" class="container" enctype="multipart/form-data"> | |
| <input type="file" name="file" multiple class="form-control-file" id="inputFile" onchange="readUrl(this)" data-title="Drag and drop a file"> | |
| <input type="submit" class="button1" style="cursor: pointer;" value="Upload"> | |
| </form> | |
| <script> | |
| function readUrl(input) { | |
| if (input.files && input.files[0]) { | |
| let reader = new FileReader(); | |
| reader.onload = (e) => { | |
| let imgData = e.target.result; | |
| let imgName = input.files[0].name; | |
| input.setAttribute("data-title", imgName); | |
| console.log(e.target.result); | |
| } | |
| reader.readAsDataURL(input.files[0]); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |