Upload Multiple Files using the Fetch API - JavaScript Tutorial

👉 Source code: openjavascript.info/2022/12/2...
⚡ Need hosting for a website, WordPress blog or Node.js app? We use HostWithLove: bit.ly/3V2RM9Q ❤️
How to upload multiple files using the JavaScript Fetch API, with examples of files from multiple input elements and from a single input that has the multiple attribute.
#fetch #upload #post #files #javascript #javascript_tutorial #multiple

[@sherifezzat4983]

That's awesome! Thanks buddy! I hope you get some time soon to create a playlist so we can easier follow through it thanks so much again 😊

[@OpenJavaScript]

Thanks for the reminder, I've been busy recently but this is coming soon!
FYI: Not all videos will be in playlists as they are more standalone tips than part of a series. But I will be placing them in thematic lists so they can be followed one by one, if you want to really deep dive into a particular topic (e.g. locaStorage, fetch, files, etc.)

[@sherifezzat4983]

@@OpenJavaScript Great thanks so much! Can't wait to see that! ❤️

[@jimshtepa5423]

Thank you for the educational material. Is there any reason you pushed files of the input nodes to an array only to iterate over that array to extract data and add such data for an instance of formdata class? i.e. not appending to the fd right away when iterating the input nodes and skipping pushing all files to a files array in the mid? or has it been done for our benefit to understand what's happening step by step?

[@OpenJavaScript]

You are welcome!
And great question.
You could just go ahead and append the files into a FormData object without pushing them into the array first.
I decided to do this for two reasons. First, it's often quite useful to separate out processes. Putting the files in the array means that, whether the files are from a single or multiple inputs, they will end up on an array at the end of the step. And then further steps work on the assumption that the data is in this format.
Second, and related, this this example it's useful: I can switch between getting data from multiple or a single input. As long as I end the first step with the files in the array, I don't need to modify the following code.
If I hadn't done this in this tutorial, things would have been much more messy when switching beteween file input sources.
This is just one example, but having this kind of flexibility can often be useful in practice if you want to modify something without everything being too interdependent.