Created
June 26, 2022 16:30
-
-
Save prof3ssorSt3v3/da1e00072c995cf657a33fef3ad63b74 to your computer and use it in GitHub Desktop.
Code from Video about Uploading Multiple Files with Fetch
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
| document.addEventListener('DOMContentLoaded', () => { | |
| document.getElementById('inputFile').addEventListener('change', filesPicked); | |
| // document.getElementById('btnToggle').addEventListener('click', toggleInput); | |
| // document.getElementById('btnPick').addEventListener('click', askForFiles); | |
| // document.getElementById('btnInfo').addEventListener('click', showFileInfo); | |
| }); | |
| function filesPicked(ev) { | |
| //any time one or more files are picked in the file picker dialog | |
| let input = ev.target; | |
| let files = input.files; | |
| console.log({ files }); | |
| if (files.length > 0) { | |
| showFileInfo(ev); | |
| //upload a file or file(s) to a web server/api | |
| let url = 'https://jsonplaceholder.typicode.com/users'; | |
| // let h = new Headers(); | |
| // h.append('content-type', files[0].type); | |
| // h.append('content-length', files[0].size); | |
| // "Content-disposition": "Multipart/Form-Data;boundary=--asdlkasjdflksdjflkds" | |
| let fd = new FormData(); | |
| fd.append('name', 'Steve'); | |
| for (let i = 0, len = files.length; i < len; i++) { | |
| fd.append(`files-${i}`, files[i], files[i].name); | |
| } | |
| let request = new Request(url, { | |
| body: fd, | |
| // headers: h, | |
| mode: 'no-cors', | |
| method: 'POST', | |
| }); | |
| fetch(request) | |
| .then((response) => { | |
| console.log(response.status, response.statusText); | |
| }) | |
| .catch(console.warn); | |
| } | |
| } | |
| function toggleInput(ev) { | |
| //hide or show the <input type="file"> | |
| ev.preventDefault(); | |
| let control = document.getElementById('inputFile').parentElement; | |
| //we want to apply this class to the parent | |
| control.classList.toggle('hidden'); | |
| } | |
| function askForFiles(ev) { | |
| //open the file picker dialog | |
| ev.preventDefault(); | |
| let control = document.getElementById('inputFile'); | |
| control.click(); | |
| } | |
| function showFileInfo(ev) { | |
| if (ev.type == 'click') ev.preventDefault(); | |
| //loop through all the files in the filelist | |
| //and display the name, size, type, and lastModified date | |
| let files = document.getElementById('inputFile').files; | |
| let len = files.length; | |
| for (let i = 0; i < len; i++) { | |
| console.group(); | |
| console.log(files[i].name); | |
| console.log(files[i].size); | |
| console.log(files[i].type); | |
| console.log(files[i].lastModified); | |
| console.groupEnd(); | |
| } | |
| } |
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="files.js" defer></script> | |
| <title>File and FileList</title> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>File and FileList (and fetch too)</h1> | |
| </header> | |
| <main> | |
| <h2>Gather Your Files</h2> | |
| <form name="myform" id="myform" action="#"> | |
| <p> | |
| <label>Pick Files</label> | |
| <input | |
| type="file" | |
| id="inputFile" | |
| multiple | |
| accept="application/json,.json,text/json" | |
| /> | |
| </p> | |
| <!-- | |
| text/html,.html,text/xml,.xml | |
| text/css,.css | |
| application/json,.json,text/json | |
| image/*,.png,.jpg,.gif,.webp,image/jpeg,image/gif,image/webp,image/png | |
| --> | |
| <!-- <p><button id="btnToggle">Toogle File Input</button></p> | |
| <p><button id="btnPick">Pick Files</button></p> | |
| <p><button id="btnInfo">Show File Info</button></p> --> | |
| </form> | |
| </main> | |
| <footer> | |
| <p>© 2022</p> | |
| </footer> | |
| <!-- | |
| Images from | |
| https://unsplash.com/@dorographie | |
| https://unsplash.com/photos/0o_GEzyargo | |
| --> | |
| </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
| * { | |
| box-sizing: border-box; | |
| font: inherit; | |
| } | |
| html { | |
| font-size: 20px; | |
| font-family: sans-serif; | |
| margin: 0; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| header { | |
| padding: 1rem 3rem; | |
| background-color: coral; | |
| color: white; | |
| border-bottom: 1px solid #000; | |
| } | |
| :is(main, footer) { | |
| padding: 1rem 3rem; | |
| } | |
| header h1 { | |
| font-size: 2rem; | |
| } | |
| form { | |
| padding: 0 4rem; | |
| } | |
| .hidden { | |
| opacity: 0; | |
| height: 0; | |
| line-height: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| footer img { | |
| width: 300px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
useful knowledge, thanx for sharing! @prof3ssorSt3v3