hi i'm cameron mckenzie at cameron mcnz on twitter and i wanted to show you how to implement a file
uploader in pure javascript no jquery no dojo no funny business just pure javascript and html5 on
the client side and of course we're working on the apache web server that's where we're uploading it
and so i've got a little php component on the server that captures the incoming request
and file and saves it but everything in the browser everything on the client side is pure
javascript and html5 before i kick this off i just wanted to show you my setup here i've
got an apache web server it was part of a bitnami stack install but it's just a
pure normal apache web server with that htdocs folder in it and in that htdocs folder that's
where i'm going to create my html file that's got my javascript and html file uploader in it
i'll call it.uploader.html that's the name that i'm going to give the file
and that's going to run in the browser and provide an html5 file uploader to the user and it will
also send the request to the server using ajax and pure javascript no jquery in this example now
when i kick things off the first thing you want to do with any html5 file is just start it off
nicely make sure it's well formed get your html tags your body tags even your title tag in there
that all looks handsome now that's really not that interesting what's going to be interesting
is an input field that is of type file if you put this into your html pages say
input id equals file type id equals file upload type equals file that's what's key
all of a sudden you'll get a file uploader in there a little button allow you to select files on
your file system and it will subsequently help you upload them to the server so that's the cool html5
input file selector that they have and of course if you want to actually submit something to the
server you're going to need a button and that will put the button in there and you know
i could actually open up a browser window and type that url in there localhost uploader.html
and you actually see the choose file and upload option here that maps to the choose file uploader
right there and the upload button right here but yeah that's actually how it would look so that
looks pretty good but it's fairly non-functional we want that file to be saved to the server
as soon as somebody clicks that upload button so i'm going to implement a save
file method that happens on this on click that means having a little bit of a script tag in here
and that script tag is just going to respond asynchronously to that
save file command so i'll open up the script here i'm going to end the script here
and then in the middle i'm going to have this save file function and this is what's getting called
there and i should probably close that bracket and then inside here what am i going to do i'm
first going to declare an instance of a form so create a new form data object to represent all of
this form data that's coming in the file i'm going to have to append now notice that the name of the
field is file upload so i'm going to say form data dot append so append to my form data
that file and i'm only going to have one file in this example so that'll be file at
zero from there i am going to asynchronously call
on the upload.php file which i'm about to create now in order to upload a file you need a resource
in the server to capture that file and save it and that's going to be the upload php file it's not
going to be too intimidating but i need to create that and i'll create that in a moment i'm going
to call that through a post method i'm going to pass all my form data and that form data is going
to include appended to it all the information about that file well not just the information
about the file but the file all this is going to run the client it's going to run asynchronously
when it all succeeds i'm just going to send a little message out here you can do as much
ajax as you want update divs i'm just going to do a little alert messages the file has been
uploaded successfully and that will conclude my javascript now as i said this is going to be pure
javascript it's not going to be any jquery it's not going to be any dojo
it's just pure javascript asynchronously forcing that button to upload a file to the server when
it's clicked so i'm going to save that now this is all going to get uploaded to a file named
upload so i'm going to create a new for our folder named upload so i'm going to create a
new folder called upload and then i need a php resource on this server i'm going to call it
upload.php this is what is going to capture the incoming file if you
go back to this piece of code right here you'll notice that it's calling on upload.php to handle
the request that's this file here i need to code it so it's going to be a php file so you got to
put in the standard php script in here let me see if i can kick it off start off with some php and
then end that with the terminating php tag there and then what are we going to do inside here well
first of all i am going to get the name of the file that was uploaded so i create a variable
hold the file name perhaps me the file name here based on what was being uploaded i am going to
save that file to this upload folder using that file name so i create a variable representing
that location there and the file name i call it the upload folder slash the name of the file that
was declared right here and then i use some move uploaded file php razzle dazzle to take the file
that's been uploaded that's the file there and save it to this location that i've just specified
and if everything's successful i just echo success otherwise echo failure i can handle that through
ajax but on the client side i'm just gonna upload and say hey everything was good but that's the php
side of it not what saves the file to that upload folder you see upload right there now i'm going to
open that upload folder and i'm going to open my pure javascript file uploader here that's the
uploader.html file i'm going to choose a file i'm going to take a look at my friend cali there she's
always taken selfies i'll click this upload button and magically it gets uploaded to the server i can
take a look at the viper there upload a photo of the viper i could even go in here and take
a look at my book pickering in springfield and upload that file as well i could do all of this
i could do this all day long just uploading files and i could feel real good about myself
knowing that this is really nothing more than just php on the apache web server and pure
javascript on the client and there you go that's how easy it is to create a file uploader using
html5 and pure javascript don't get your hands dirty with dojo or jquery or anything like that
you don't need the overhead you don't need the library just like bootstrap 5 we don't need jquery
anymore for a lot of these simple tasks so if you enjoyed that tutorial you found it entertaining
why don't you head over to the serverside.com i'm the editor editor-in-chief over there
we've got lots of great tutorials on enterprise software development java html javascript angular
devops automation rpa you name it anything to do with enterprise software development it really is
within our valley work and you know uh if you're interested in my personal antics
why don't you follow me on twitter at cameronmcnz and subscribe on youtube