Created
July 10, 2020 06:24
-
-
Save MasoodGit/27e16d1bc9e13eef0586361fba8641c8 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/tigapodonu
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> | |
| <head> | |
| <meta name="description" content="Upload file and read its content and parse textarea"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .ids-section { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .upload-file { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .results-section { | |
| margin-top: 50px; | |
| width: 800px; | |
| height: 350px; | |
| overflow: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="ids-section"> | |
| <textarea id="data"></textarea> | |
| <button onclick="update()" style="width:100px">Update</button> | |
| <button onclick="clearResults()" style="width:100px">Clear</button> | |
| </div> | |
| <div class="upload-file"> | |
| <label> Upload file</label> | |
| <input type="file" onChange="fileUploaded(event)"> | |
| </div> | |
| <div class="results-section"> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| function update() { | |
| const textData = document.querySelector('#data').value; | |
| const resultsSection = document.querySelector('.results-section'); | |
| resultsSection.innerHTML = ''; | |
| resultsSection.innerHTML = textData.split('\r\n'); | |
| } | |
| function clear() { | |
| const resultsSection = document.querySelector('.results-section'); | |
| resultsSection.innerHTML = ''; | |
| } | |
| function fileUploaded(event) { | |
| console.log(event.target.files); | |
| var reader = new FileReader(); | |
| reader.onload = () => { | |
| console.log(reader.result); | |
| } | |
| reader.readAsText(event.target.files[0]); | |
| } | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.ids-section { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .upload-file { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .results-section { | |
| margin-top: 50px; | |
| width: 800px; | |
| height: 350px; | |
| overflow: auto; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| function update() { | |
| const textData = document.querySelector('#data').value; | |
| const resultsSection = document.querySelector('.results-section'); | |
| resultsSection.innerHTML = ''; | |
| resultsSection.innerHTML = textData.split('\r\n'); | |
| } | |
| function clear() { | |
| const resultsSection = document.querySelector('.results-section'); | |
| resultsSection.innerHTML = ''; | |
| } | |
| function fileUploaded(event) { | |
| console.log(event.target.files); | |
| var reader = new FileReader(); | |
| reader.onload = () => { | |
| console.log(reader.result); | |
| } | |
| reader.readAsText(event.target.files[0]); | |
| }</script></body> | |
| </html> |
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
| .ids-section { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .upload-file { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .results-section { | |
| margin-top: 50px; | |
| width: 800px; | |
| height: 350px; | |
| overflow: auto; | |
| } |
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
| function update() { | |
| const textData = document.querySelector('#data').value; | |
| const resultsSection = document.querySelector('.results-section'); | |
| resultsSection.innerHTML = ''; | |
| resultsSection.innerHTML = textData.split('\r\n'); | |
| } | |
| function clear() { | |
| const resultsSection = document.querySelector('.results-section'); | |
| resultsSection.innerHTML = ''; | |
| } | |
| function fileUploaded(event) { | |
| console.log(event.target.files); | |
| var reader = new FileReader(); | |
| reader.onload = () => { | |
| console.log(reader.result); | |
| } | |
| reader.readAsText(event.target.files[0]); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment