| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <style> |
| body, html { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| font-family: -apple-system; |
| } |
| |
| #input, #upload { |
| width: 100%; |
| height: 200px; |
| border: 1px blue dashed; |
| } |
| |
| #output { |
| width: 100%; |
| height: 100px; |
| font-size: 1em; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div><input type="file" id="input"></input></div> |
| <div id="upload"></div> |
| <div><h3>Uploaded file types: </h3><textarea disabled id="output"></textarea></div> |
| <script> |
| input.addEventListener("change", () => { |
| sendUploadedFileTypesToApp(input.files); |
| }); |
| |
| upload.addEventListener("dragenter", event => { |
| event.preventDefault(); |
| if (upload.dropEffect) |
| event.dataTransfer.dropEffect = upload.dropEffect; |
| }); |
| |
| upload.addEventListener("dragover", event => { |
| event.preventDefault(); |
| if (upload.dropEffect) |
| event.dataTransfer.dropEffect = upload.dropEffect; |
| }); |
| |
| upload.addEventListener("drop", event => { |
| sendUploadedFileTypesToApp(event.dataTransfer.files); |
| event.preventDefault(); |
| }); |
| |
| function sendUploadedFileTypesToApp(files) |
| { |
| output.value = Array.from(files).map(file => file.type).sort().join(", "); |
| } |
| </script> |
| </body> |
