WEBVTT

00:00:08.320 --> 00:00:12.220
In this video we're going to learn how to upload files using PSP.

00:00:12.690 --> 00:00:17.610
So first of all we're going to create a form that we're going to use to upload files and then we're

00:00:17.610 --> 00:00:22.030
going to write some piece of code to process the user inputs.

00:00:22.110 --> 00:00:23.940
So let's start with the form.

00:00:24.740 --> 00:00:29.230
So going to create a form using the form tags.

00:00:29.230 --> 00:00:40.690
So the first inputs are going to put it inside a phone group or a div of class from Group.

00:00:41.160 --> 00:00:45.080
OK.

00:00:45.550 --> 00:00:48.820
And they're going to place our inputs inside.

00:00:49.350 --> 00:00:56.330
So the input this time is going to be of type file type file.

00:00:57.050 --> 00:01:11.520
And let's give it a name file for example an ID as well file and we can also give as a placeholder file

00:01:12.440 --> 00:01:14.080
.

00:01:15.870 --> 00:01:16.150
Ok

00:01:20.240 --> 00:01:22.740
let's not a label just before the input

00:01:27.510 --> 00:01:31.360
saying Choose file.

00:01:31.550 --> 00:01:44.430
Now when it's our submit button it's going to be an input of type submit and they'll give us a name

00:01:45.330 --> 00:01:55.100
submit and let's stylist's using the class and the success class.

00:01:56.340 --> 00:01:57.440
OK.

00:01:58.320 --> 00:01:58.520
OK.

00:01:58.530 --> 00:02:01.140
Now let's make our a little bit bigger.

00:02:01.140 --> 00:02:03.050
Using the bus in large class

00:02:07.800 --> 00:02:17.360
and also let's change the value of the button to upload.

00:02:19.380 --> 00:02:24.140
OK so now we got our form ready.

00:02:24.260 --> 00:02:25.110
OK.

00:02:25.170 --> 00:02:28.050
So we can choose a file OK.

00:02:28.310 --> 00:02:34.760
Then submit the form once we have chosen our file.

00:02:34.770 --> 00:02:40.430
Now we get to write some code to process the form before we do that.

00:02:40.770 --> 00:02:45.940
We will need to give our form a method.

00:02:46.290 --> 00:02:48.750
So the method needs to be post.

00:02:49.230 --> 00:02:50.720
OK.

00:02:51.470 --> 00:02:52.770
All right.

00:02:53.220 --> 00:02:57.300
And the action is going to be the same file that we're using.

00:02:57.300 --> 00:02:59.960
So by default it's the same file.

00:02:59.960 --> 00:03:01.660
So you don't have to write the action.

00:03:01.950 --> 00:03:09.960
And we have to use another attribute it's called encoding site.

00:03:10.800 --> 00:03:21.390
So when we are uploading files we have to use these attributes to ensure that we have the right encoding

00:03:21.450 --> 00:03:28.350
of the of the data because we are uploading big quantities of binary data.

00:03:28.350 --> 00:03:29.640
Since we are uploading files.

00:03:29.670 --> 00:03:30.240
OK.

00:03:30.390 --> 00:03:32.760
So we need to set this two

00:03:35.220 --> 00:03:37.130
multipart form data.

00:03:37.690 --> 00:03:40.440
OK.

00:03:41.070 --> 00:03:42.070
All right.

00:03:42.780 --> 00:03:51.240
So now we are ready to write our PSP code which is going to check if the user has submitted the form

00:03:52.980 --> 00:03:57.550
and then it's going to check if there are any errors.

00:03:58.040 --> 00:04:03.450
If there are errors we are going to print them on the screen OK.

00:04:03.570 --> 00:04:10.440
Otherwise we are going to upload the file to a specific location.

00:04:10.470 --> 00:04:11.100
OK.

00:04:11.610 --> 00:04:28.150
So let's go to our FY FCP now and this creates a directory inside workspace and this Callie's uploads

00:04:28.220 --> 00:04:29.120
.

00:04:30.000 --> 00:04:33.230
So that's where that's where we want to upload our files.

00:04:33.360 --> 00:04:36.240
OK.

00:04:36.240 --> 00:04:38.770
All right.

00:04:39.990 --> 00:04:45.150
So if we have any error messages we're going to bring them just before the fall so we can write our

00:04:45.510 --> 00:04:49.370
code just before the formal rights of the header.

00:04:49.540 --> 00:04:54.010
Ok so these rights are BHB tag there.

00:04:55.380 --> 00:04:57.290
OK.

00:05:02.890 --> 00:05:09.950
Pilot inputs how to file inputs then this follows variable would have two elements.

00:05:10.110 --> 00:05:11.460
So only one element.

00:05:11.580 --> 00:05:12.390
OK.

00:05:12.450 --> 00:05:14.380
And the value of those elements.

00:05:14.400 --> 00:05:24.360
He's also an array and this array has got all these elements inside so he's got an element of key name

00:05:24.360 --> 00:05:24.870
.

00:05:25.320 --> 00:05:30.360
And we can see the value of the element that has the original name of the file unless we are applauding

00:05:31.050 --> 00:05:33.020
the type of the file.

00:05:33.260 --> 00:05:34.190
OK.

00:05:34.350 --> 00:05:44.450
And by the way this type is what we call the mime type of the file which sends four multi-purpose Internet

00:05:44.540 --> 00:05:49.930
Mail extensions and it's just a way of identifying files on the internets.

00:05:50.070 --> 00:05:50.530
OK.

00:05:50.670 --> 00:05:53.870
Depending on their formats.

00:05:54.420 --> 00:05:56.560
And then of course a temporary name.

00:05:56.910 --> 00:06:00.960
So this is the temporary name of the file.

00:06:01.110 --> 00:06:02.700
OK.

00:06:02.890 --> 00:06:09.900
And basically this file is going to be stored somewhere temporarily and that's the full part of the

00:06:09.960 --> 00:06:10.920
file.

00:06:11.640 --> 00:06:12.410
OK.

00:06:12.660 --> 00:06:18.090
Or the file that's all temporary and then calls and other elements of key error.

00:06:18.120 --> 00:06:26.560
So this error at the moment is has got a value zero because there is there is no problem at the moment

00:06:26.570 --> 00:06:26.740
.

00:06:27.030 --> 00:06:28.390
Uploading this file.

00:06:28.580 --> 00:06:29.170
OK.

00:06:29.310 --> 00:06:33.580
If you had eight issues this error would be greater than zero.

00:06:33.670 --> 00:06:35.460
OK there are many cities codes.

00:06:35.640 --> 00:06:41.220
One of them is for for example if we are missing the file there is no file being uploaded.

00:06:41.340 --> 00:06:42.090
OK.

00:06:42.540 --> 00:06:45.890
And finally we've got the size of the file in bytes.

00:06:46.130 --> 00:06:57.160
OK so if we try for example to upload new file just like not we still have elements of key file and

00:06:57.170 --> 00:07:04.590
the array this time is different because we don't have we have no name no type no name no size but we've

00:07:04.590 --> 00:07:07.800
got an error and a seizure code this time is for.

00:07:08.410 --> 00:07:17.490
OK so now we can write some simple code OK before we start looking for errors.

00:07:17.940 --> 00:07:19.930
We can write some code.

00:07:20.460 --> 00:07:23.180
Just checking.

00:07:23.850 --> 00:07:27.060
Well getting the values all these values.

00:07:27.100 --> 00:07:35.330
OK if we have no errors OK then we can guess the name of the file.

00:07:35.380 --> 00:07:39.040
That's the type with the file name and the size of the file.

00:07:39.160 --> 00:07:41.640
OK let's go ahead and with us.

00:07:41.640 --> 00:07:44.040
So basically First we're going to do.

00:07:44.040 --> 00:07:55.170
We're going to check if the elements of key error is strictly greater than zero pay me that we have

00:07:55.260 --> 00:07:57.310
no error.

00:07:57.390 --> 00:08:00.080
OK.

00:08:01.140 --> 00:08:05.430
If it's greater than zero meaning that we have an error OK then we're going to say that there was an

00:08:05.430 --> 00:08:08.260
error and we say well the status could have the error.

00:08:08.370 --> 00:08:12.690
Otherwise we're going to print the name type and so on of the file.

00:08:12.690 --> 00:08:13.350
So if

00:08:15.870 --> 00:08:27.810
files OK and we're going to access the elements of key file first and then inside this one inside this

00:08:27.810 --> 00:08:31.090
one we can access the error.

00:08:32.700 --> 00:08:34.760
All the elements of key.

00:08:35.650 --> 00:08:40.020
OK so you want to check if this is strictly greater than zero.

00:08:40.080 --> 00:08:41.500
OK.

00:08:43.230 --> 00:08:49.020
Then we are going to echo a paragraph

00:08:51.870 --> 00:08:53.610
saying there was an error

00:08:55.640 --> 00:08:58.040
.

00:08:58.490 --> 00:08:59.070
OK.

00:08:59.260 --> 00:09:08.020
And basically we can just say what the error was.

00:09:12.720 --> 00:09:17.140
The error is going to be this.

00:09:19.000 --> 00:09:21.850
OK.

00:09:21.930 --> 00:09:25.680
Else we are going to bring the other elements.

00:09:25.890 --> 00:09:31.600
So first of all we're going to echo the file name.

00:09:32.010 --> 00:09:34.420
So let's have a paragraph.

00:09:35.690 --> 00:09:35.970
OK.

00:09:35.970 --> 00:09:45.420
And then inside the paragraph that writes file on is the file name here.

00:09:45.630 --> 00:09:48.970
So it's to get the file name as we have done with the error.

00:09:49.230 --> 00:09:56.460
So who's going to access the name y axis in the file first and then getting to the name.

00:09:56.840 --> 00:09:57.880
OK.

00:09:58.830 --> 00:10:00.930
And we're going to do the same thing with the other elements.

00:10:00.930 --> 00:10:06.300
Are you going to get the type K so file type

00:10:10.130 --> 00:10:15.040
and then we are going to get the temporary location of the file

00:10:22.150 --> 00:10:23.230
need to use the

00:10:26.770 --> 00:10:31.180
name elements and

00:10:36.870 --> 00:10:44.680
let's gets this good the size of the file file size

00:10:50.030 --> 00:10:51.850
replace these with size.

00:10:52.070 --> 00:10:52.870
OK.

00:10:53.340 --> 00:10:53.960
And I.

00:10:54.230 --> 00:10:57.240
We've got the elements we could also of another one.

00:10:57.460 --> 00:11:06.290
So we want to store our files or our file in the folder uploads.

00:11:06.510 --> 00:11:07.000
OK.

00:11:07.270 --> 00:11:13.480
And we want to keep the same name of the file so we know and what's the final destination of our file

00:11:13.560 --> 00:11:18.250
is and what this nation we call its permanent destination.

00:11:18.690 --> 00:11:19.450
OK.

00:11:19.660 --> 00:11:22.080
Permanent destination.

00:11:23.690 --> 00:11:24.350
OK.

00:11:24.520 --> 00:11:24.940
So

00:11:27.820 --> 00:11:32.490
this W-K this Unger's right.

00:11:34.120 --> 00:11:37.000
Feminines destination

00:11:39.570 --> 00:11:41.770
OK and we are going to send that to

00:11:52.480 --> 00:11:53.290
uploads

00:11:57.360 --> 00:11:58.690
for a slash.

00:11:59.140 --> 00:11:59.950
OK.

00:11:59.950 --> 00:12:05.950
And since we want to keep the same name of the file all the same original name of the file we are going

00:12:05.950 --> 00:12:08.440
to use the name of the file.

00:12:08.680 --> 00:12:10.240
OK.

00:12:11.020 --> 00:12:12.640
Which is this

00:12:14.910 --> 00:12:17.470
.

00:12:18.290 --> 00:12:19.130
OK.

00:12:19.920 --> 00:12:23.980
So let's try this.

00:12:23.980 --> 00:12:27.570
So if you choose a file it is one.

00:12:27.940 --> 00:12:28.510
OK.

00:12:28.810 --> 00:12:30.900
OK can I play it.

00:12:30.910 --> 00:12:34.830
All right so you can see here the file is this one.

00:12:34.830 --> 00:12:38.320
The type is this case a text file.

00:12:38.510 --> 00:12:47.510
The temporary location the file size ok in bytes and the permanent destination is this.

00:12:47.750 --> 00:12:52.530
All right.

00:12:52.960 --> 00:12:53.370
OK.

00:12:53.500 --> 00:13:01.090
Now that we understand the files variable now we are ready to go ahead and look for any areas once the

00:13:01.090 --> 00:13:02.890
user has submitted the form.

00:13:03.220 --> 00:13:15.430
And if everything is valid we are ready to upload the file using PSP So inside the condition if if the

00:13:15.430 --> 00:13:18.250
user has limited the form.

00:13:18.250 --> 00:13:25.090
Now we are going to look for areas pay and then upload the file if we want.

00:13:25.090 --> 00:13:29.420
So is going to create some space there.

00:13:31.020 --> 00:13:39.240
You can write this code before this chunk because he want the error message it appear that if there

00:13:39.270 --> 00:13:42.560
if there are any errors.

00:13:45.230 --> 00:13:48.270
OK.

00:13:49.360 --> 00:13:54.830
Now before we start looking for errors and just to make our code look really structured we're going

00:13:54.840 --> 00:13:57.310
to create variables.

00:13:57.430 --> 00:14:01.710
What are we going to store all the details of the file.

00:14:01.780 --> 00:14:08.920
And also we're going to create some other variables where we're going to store the possible error messages

00:14:08.920 --> 00:14:13.130
to display as we did with the Contacts form.

00:14:13.390 --> 00:14:15.340
And thus we have created earlier.

00:14:15.340 --> 00:14:22.470
So let's start with the file details.

00:14:22.630 --> 00:14:33.050
So let's get the name of the file and that's going to be this one.

00:14:34.900 --> 00:14:35.860
OK.

00:14:36.220 --> 00:14:39.610
Let's get the type

00:14:42.020 --> 00:14:44.470
.

00:14:45.520 --> 00:14:49.130
Let's get the size.

00:14:53.170 --> 00:14:58.840
And also let's get the error elements uncoil it's file error

00:15:02.420 --> 00:15:06.250
.

00:15:06.970 --> 00:15:07.670
OK.

00:15:07.670 --> 00:15:10.450
And let's get the temporary name

00:15:10.450 --> 00:15:20.470
.

00:15:20.620 --> 00:15:23.920
And finally let's guess the permanent destination

00:15:25.430 --> 00:15:28.240
.

00:15:29.630 --> 00:15:30.840
OK.

00:15:31.060 --> 00:15:40.250
And we know that's the permanent in situation is going to be inside the upload uploads folder and it's

00:15:40.250 --> 00:15:41.060
going to be this

00:15:43.520 --> 00:15:45.520
.

00:15:50.350 --> 00:15:50.650
All right.

00:15:50.650 --> 00:16:01.000
Now let's define all our error messages to display all the paragraphs as we did with the Contacts form

00:16:01.010 --> 00:16:03.160
.

00:16:05.380 --> 00:16:11.290
So the first one is going to be if we are submitting the form with no file.

00:16:11.350 --> 00:16:11.870
OK.

00:16:12.040 --> 00:16:17.920
If we submit the form and we haven't chosen any file to upload and this one we're going to call it no

00:16:18.430 --> 00:16:20.280
file to upload.

00:16:20.680 --> 00:16:21.770
OK.

00:16:21.790 --> 00:16:25.780
And we're going to go for a paragraph

00:16:29.920 --> 00:16:31.530
or our paragraphs.

00:16:31.660 --> 00:16:37.600
We're going to place texts inside these trunks sex and later on when we create our

00:16:40.360 --> 00:16:43.290
results message variable.

00:16:43.580 --> 00:16:54.430
We're going to place the paragraphs inside a variable called errors which is going to go inside the

00:16:54.430 --> 00:17:00.300
device of the final results message.

00:17:00.370 --> 00:17:05.140
OK so the first one is going to be please upload the file.

00:17:05.450 --> 00:17:06.450
OK.

00:17:06.700 --> 00:17:09.290
And then another one.

00:17:10.810 --> 00:17:21.040
OK so if we try to upload a file and that file already exists OK in our uploads folder then we're going

00:17:21.040 --> 00:17:23.430
to have an error message saying.

00:17:23.590 --> 00:17:33.340
So this one is going to be file already exists and then writes this file already exists

00:17:33.910 --> 00:17:39.380
.

00:17:39.490 --> 00:17:41.420
OK.

00:17:41.920 --> 00:17:52.630
And then another one so later on we are going to limit the types of files we are allowed to upload.

00:17:52.830 --> 00:17:53.850
OK.

00:17:53.950 --> 00:17:59.800
And we're going to say that to a couple of types.

00:17:59.800 --> 00:18:03.890
We're going to accept pedia files and text files only.

00:18:04.030 --> 00:18:05.000
OK.

00:18:05.450 --> 00:18:10.680
So the error message we're going to get if we upload a wrong.

00:18:10.840 --> 00:18:17.620
For months is going to be the variable is going to be wrong formats the error message is going to be

00:18:20.040 --> 00:18:22.030
sorry.

00:18:22.900 --> 00:18:30.500
You can only upload PDA text files.

00:18:30.760 --> 00:18:31.770
OK.

00:18:32.560 --> 00:18:42.310
And finally we are going to limit the size of the file that we're allowed to upload and are going to

00:18:42.310 --> 00:18:44.580
limit that to 3 megabytes.

00:18:44.890 --> 00:18:46.740
OK.

00:18:46.750 --> 00:18:49.850
So let's have another error message.

00:18:50.690 --> 00:18:57.580
Let's call this variable file to large for example.

00:18:58.030 --> 00:19:11.320
And this time we're going to say you can only upload files smaller than the box.

00:19:11.490 --> 00:19:12.740
OK.

00:19:13.300 --> 00:19:20.000
So these are all the error the error messages that we might need to display in our recent results message

00:19:20.010 --> 00:19:23.240
.