Created
September 7, 2015 23:28
-
-
Save macu/3d4c8d2adc0bb55c6b39 to your computer and use it in GitHub Desktop.
Demo loading a blob in a webpage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <body> | |
| <style> | |
| .drop-area { | |
| display: inline-block; | |
| padding: 1em; | |
| border: thin dotted grey; | |
| border-radius: 1em; | |
| color: grey; | |
| } | |
| </style> | |
| <input type="file" multiple /> | |
| <br/> | |
| <br/> | |
| <div class="drop-area">Drop files here</div> | |
| <br/> | |
| <br/> | |
| <output>No files selected.</output> | |
| <script> | |
| var inputElement = document.getElementsByTagName('input')[0]; | |
| var dropAreaElement = document.getElementsByClassName('drop-area')[0]; | |
| var outputElement = document.getElementsByTagName('output')[0]; | |
| // Wait for user to select file(s) via <input> | |
| inputElement.addEventListener('change', function(evt) { | |
| // evt.target.files is a FileList object, | |
| // which is an array of File objects | |
| handleFiles(evt.target.files); | |
| }); | |
| // Wait for user to select file(s) via drag-and-drop on <div> | |
| dropAreaElement.addEventListener('dragover', function(evt) { | |
| evt.stopPropagation(); | |
| evt.preventDefault(); | |
| // Display as copy operation | |
| evt.dataTransfer.dropEffect = 'copy'; | |
| }); | |
| dropAreaElement.addEventListener('drop', function(evt) { | |
| evt.stopPropagation(); | |
| evt.preventDefault(); | |
| // evt.dataTransfer.files is a FileList object | |
| handleFiles(evt.dataTransfer.files); | |
| }); | |
| function handleFiles(fileList) { | |
| if (fileList.length == 1) { | |
| // Load single file contents | |
| renderSingleFile(fileList[0], outputElement); | |
| } else { | |
| // Show info on selected files | |
| renderFileList(fileList, outputElement); | |
| } | |
| } | |
| </script> | |
| <script> | |
| function renderSingleFile(file, outputElement) { | |
| // Available read methods: | |
| // https://developer.mozilla.org/en/docs/Web/API/FileReader | |
| var reader = new FileReader(); | |
| reader.onload = function() { | |
| var fileContents = reader.result; | |
| outputElement.innerHTML = '<strong>Read ' + file.size + ' bytes from ' | |
| + escape(file.name) + '</strong><br/>' + escape(fileContents); | |
| }; | |
| reader.onerror = function(err) { | |
| outputElement.innerHTML = escape(err); | |
| }; | |
| reader.readAsText(file); | |
| } | |
| function renderFileList(fileList, outputElement) { | |
| var output = []; | |
| for (var i = 0, f; f = fileList[i]; i++) { | |
| // Available properties on File objects (File inherits from Blob): | |
| // https://developer.mozilla.org/en/docs/Web/API/File | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Blob | |
| output.push('<li>'); | |
| output.push('<strong>name:</strong> ' + escape(f.name)); | |
| output.push('<ul>') | |
| output.push('<li><strong>size:</strong> ' + f.size + '</li>'); | |
| output.push('<li><strong>type:</strong> ' + (f.type ? f.type : 'n/a') + '</li>'); | |
| var lastMod = f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a'; | |
| output.push('<li><strong>last modified:</strong> ' + lastMod + '</li>'); | |
| output.push('</ul>') | |
| output.push('</li>'); | |
| } | |
| outputElement.innerHTML = '<ul>' + output.join('') + '</ul>'; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment