- [Instructor] In the last lesson we actually
added an upload stream to our http server,
so we can actually upload files.
And we took our upload request stream
and we piped it to several different writable streams.
So, in this lesson, we're actually gonna handle
parsing the multi-part form data
and we're gonna use an npm to do that.
The work to parse multi-part requests
has been done many times over
and it's been published to many different npms,
so there's a lot of options when it comes to
parsing a multi-part form data request.
Since we're streaming experts, I've decided to use an npm
that also supports streams.
All right, so I'm gonna come over to my terminal,
and before I install multi-party I just want to npm init
to create a package.json and I can send it a dash-y
just to answer all the questions as yes
and then I get a package.json file in my root.
It's always a good idea to have a package.json file
once you start installing things with nmp,
so I'm gonna go ahead and do an nmp install multiparty.
And there we go.
So now that I have multiparty I'm ready to implement it
to help me parse this form.
So I can come over here to my server
and go to the top of the file
and make sure that we include multiparty.
(keyboard sound)
And once we have multiparty, we can use it,
so we're going to use it when the file is being uploaded.
We're gonna use it in this section,
so I'm no longer just going to pipe our request stream
to standard output and to a file and to the browser
What we're gonna do is use multiparty here,
so I'm going to create a new variable
within this if statement called "form."
And we'll do a new multiparty dot form.
And then what we're gonna do is we're gonna
take the form and we're going to parse the request.
So now the form will actually parse our multiparty request
and it will give us any files
that are inside that upload request as parts.
It will also give us any form data.
So if we actually had a form where users were
inserting text and filling that out,
all of that would come inside of the same request stream
and this multiparty will simply parse it off.
We only have one value in our form
and that's the upload file, so we're gonna go ahead
and validate that by listening for a part event.
So if I take our multiparty form and add on part,
what happens is, as multiparty parses our request,
when they find a file or a form field,
that's going to be sent as a part.
So I can take that and handle it
within this callback function.
So when we find a part, what do we want to do with it?
Well the neat thing about multiparty
is a part is a readable stream.
So when we find a part, what we're actually going to do
is just upload it. So I'll take the part
and I'll pipe it to a create write stream.
What we're going to do here is use the file name itself
when we create the write stream.
So I'm gonna go ahead and just upload it
to the current directory for now
and we will take the part dot filename.
And I need to make sure I use backticks
instead of single quotes. There we go.
So in addition to actually giving us the file contents
as a stream, the multiparty also parses out
the filename of the upload file.
So we're simply gonna move it to the current directory.
Now once we actually have the upload completed,
we're gonna go ahead and listen for an on close event.
So I'm just chaining that on there.
Let me get rid of this semicolon, actually, to do that.
So we have part dot pipe dot on close.
It's all one line of code thus far.
And when this closes, I'm gonna go ahead
and handle that inside of a callback function here.
So when the part closes we'll just go ahead
and let our users know that the file upload was successful.
So we'll write ahead with a 200
and we will let them know that the content type
for this message is going to be text, html text.
And then we will just end the response
by sending a heading one.
So we're just gonna send an html part,
you really should be sending full pages,
but for brevity we're gonna go ahead
and say that the file was uploaded
and then we can actually grab that file part,
part dot filename slash h one.
Now I made my common mistake,
which is single quotes as opposed to backticks.
Also, I'm using a template string here
so that we can get the filename.
I need to be sure to use backticks. There we go.
So let's go ahead and save it.
Now we are handling our file upload with multiparty.
And we're just simply gonna upload the file and let the user
know that the file upload was successful.
So I could come over here to the terminal,
I'll clear out what I have and then run our application
by typing node dot. Then come over here to the browser
and make a request for localhost 3000.
And this time when I upload the file
I'm actually gonna upload our "Powder Day" video.
So I will choose a larger file, I'll go ahead and open that
and then I'll click upload file, and then you can see here
that we have our file uploaded, powder day dot mp4.
If I come over here to our terminal and stop the server,
I should be able to open the current folder
by typing open dot.
If you're on a PC, you can type explore dot
and it will do the same thing.
And look at this, it looks like I have a copy
of my powder day mp4. Let's see if that's
a working copy that was just uploaded. Yes it is.
So, it looks like, by using multiparty, to help us
parse our multipart requests, we can actually take the
part, which represents the file itself,
and because that's a readable stream,
pipe it to any readable stream that we choose to use.
So, that actually concludes our little server project here.
So we are successfully able to stream videos
to the client on this video server.
And handle range requests, as well as handle upload files.
So, we're able to actually stream data from the client.
And we can see that we're doing that here with an npm
called multiparty. Let me just go ahead and add this last
little semicolon here before we stop.