WEBVTT 00:05.700 --> 00:10.970 In this video we're going to write code to upload our picture to the server. 00:11.290 --> 00:12.400 So first of all 00:16.510 --> 00:23.350 we're going to need to start a session using the session start function. 00:24.130 --> 00:28.300 We need a session because we're going to be using session variables later on. 00:28.840 --> 00:39.300 And then we're going to connect to the database by including the connection those PSP for. 00:39.370 --> 00:40.260 All right. 00:40.260 --> 00:49.380 So for now just to see what of course inside the files array we're just going to print this array 00:53.450 --> 00:57.810 and show it on our Web page. 00:58.350 --> 01:04.630 So if you remember this array will contain all details about the files we're trying to upload. 01:04.820 --> 01:05.150 OK. 01:05.180 --> 01:07.220 In our case it's going to be the picture. 01:07.460 --> 01:11.180 So we're going to save this and then I'm going to go to the AJAX call 01:15.900 --> 01:25.410 in the success promiser going to alert this variable which will store whatever is printed right there. 01:25.800 --> 01:30.490 OK. 01:31.090 --> 01:32.250 So let's try this 01:43.330 --> 01:43.870 OK. 01:44.140 --> 01:49.150 So that's our files array so we can see those inside the array. 01:49.180 --> 01:54.640 We of course another array with the key picture and then inside the vast array we caught another one 01:55.260 --> 02:02.090 and we can see the name type temporary name of the file which is the temporary location on the server. 02:02.110 --> 02:07.640 The error elements we've got zero errors and the size of our picture. 02:07.690 --> 02:08.820 All right. 02:09.340 --> 02:16.280 OK so now that we understood what's inside the files array we are ready to use elements inside. 02:16.650 --> 02:17.230 OK. 02:17.470 --> 02:32.040 So to upload the picture to the server we will need to move the picture from where it is right now which 02:32.040 --> 02:38.680 is the temporary disk location which is this what we're going to need to move it to a permanent destination. 02:39.140 --> 02:39.660 OK. 02:39.840 --> 02:43.220 So we're going to need to build that permanent designation. 02:43.230 --> 02:47.600 So let's define a variable permanent desolation. 02:48.960 --> 02:53.140 Well we're going to store the the final location of our picture. 02:53.140 --> 03:06.010 So if you remember we have created a folder profile picture OK where we going to store all the pictures. 03:06.290 --> 03:07.050 All right. 03:07.060 --> 03:09.650 So at the moment you cross the empty picture right there. 03:13.930 --> 03:15.820 So to build the permanent designation 03:18.580 --> 03:29.710 we're going to go to that for the profile picture and then we're going to find a name that is very hard 03:29.710 --> 03:32.250 to guess for our file. 03:32.440 --> 03:40.220 So I'm going to do going to use the time stamp because we're going to that's something using the time 03:40.320 --> 03:41.540 unless the current time. 03:42.050 --> 03:49.480 And then we're going to apply the M.D five function to that timestamp. 03:49.580 --> 03:50.320 OK. 03:52.930 --> 04:02.640 So we are using the hash function in order for us to make the process really hard. 04:02.710 --> 04:06.460 OK for whoever wants to find the name of a file. 04:06.460 --> 04:13.990 Basically if a user finds the name of any file you are storing inside the profile picture folder then 04:13.990 --> 04:17.890 it would be able to access your users file and that's exactly what you don't want. 04:18.240 --> 04:19.510 OK. 04:19.870 --> 04:26.880 And then we are going to add to this the extension of the file. 04:26.920 --> 04:30.010 So we're going to need to get the extension of the file. 04:30.070 --> 04:32.820 So first let's get the name of the file. 04:36.450 --> 04:41.300 So to get the name we're going to need to go to a picture then name. 04:41.610 --> 04:42.050 OK. 04:54.910 --> 04:55.580 OK. 04:55.720 --> 04:57.150 Now to get the extension. 04:57.220 --> 05:00.230 There is a function we can use for this. 05:00.280 --> 05:06.850 So let's define a variable extension of the function is called barthe info. 05:06.850 --> 05:09.670 So this function is very practical. 05:10.210 --> 05:22.380 You just need to give it the name of the file and a second argument both info extension. 05:22.850 --> 05:23.370 OK. 05:23.550 --> 05:25.720 And then he's going to give you the extension of the file. 05:25.890 --> 05:26.590 OK. 05:26.610 --> 05:30.950 There are other ways to do it but this is really the simplest way. 05:31.110 --> 05:32.090 OK. 05:32.460 --> 05:40.430 So now we've got the extension so we get to big session to the final destination. 05:40.520 --> 05:41.350 Here we go. 05:41.850 --> 05:46.510 So that's the final or the permanent situation of 0 5. 05:47.460 --> 05:50.260 OK so now we are ready to move the file. 05:50.460 --> 05:56.790 So we're going to use a function called move and it's called up loaded and it's called File. 05:56.850 --> 05:57.820 OK. 05:58.200 --> 06:02.230 So this has already been covered in the BHP chapter. 06:02.310 --> 06:03.210 OK. 06:03.600 --> 06:06.030 So this function will take a couple of problems. 06:06.030 --> 06:09.950 This is going to take the temporary location of the permanent location. 06:09.990 --> 06:12.570 So our temporary location can be accessed 06:17.660 --> 06:22.350 and it's quite temporary name. 06:22.620 --> 06:31.100 You can access it by going to picture and then 70. 06:31.160 --> 06:31.840 All right. 06:31.850 --> 06:38.240 So the first argument that is going to be name and the second one is going to be our parents designation. 06:38.960 --> 06:42.050 So if the function is successful it's going to return true. 06:42.110 --> 06:46.360 So we're going to check the output of this function. 06:46.850 --> 06:47.920 OK. 06:48.530 --> 06:56.260 So if everything goes fine then we're going to run a query and then update this field 06:58.940 --> 06:59.700 right there. 06:59.820 --> 07:00.510 OK. 07:00.810 --> 07:05.940 So we're going to place that the premise destination of our picture and then we're going to use it later 07:06.540 --> 07:09.250 to show the picture there and then. 07:10.100 --> 07:16.280 All right so let's create a variable as well. 07:16.300 --> 07:18.460 We're going to sort out query. 07:19.790 --> 07:29.490 So the query is going to update our table uses that he's going to set the profile picture 07:35.430 --> 07:38.560 to the parent his destination. 07:38.640 --> 07:46.980 The condition here is going to be based on the user id so we're going to check with user ID is the same 07:47.160 --> 07:48.780 as our user ID. 07:48.780 --> 07:57.720 So to get the user ID we can use the session variable corresponding to the elements of key user ID. 07:57.740 --> 08:02.100 So let's define a variable right there and then set it to 08:05.280 --> 08:07.790 session user id 08:13.530 --> 08:14.650 OK. 08:22.750 --> 08:27.940 So now let's run the query and store the results inside results. 08:28.160 --> 08:28.720 Variable 08:33.270 --> 08:37.300 again the query takes a couple of problems is the connection link declared 08:41.100 --> 08:42.160 OK. 08:42.250 --> 08:46.060 Now we're going to check if the query has been successful or the opposite. 08:46.060 --> 08:48.190 So it's just the opposite. 08:48.200 --> 08:56.430 So if the opposite of results mean the query is not successful then we're going to echo an error message. 08:57.400 --> 08:57.960 OK. 08:59.880 --> 09:04.290 So let's go for something like. 09:04.770 --> 09:11.110 Able to up base profile picture. 09:11.520 --> 09:12.980 Please try again. 09:16.410 --> 09:16.820 OK. 09:16.880 --> 09:18.510 This is a close 09:21.690 --> 09:23.100 alerts. 09:23.320 --> 09:26.500 Danger is all right. 09:26.700 --> 09:31.640 So that's what we're going to show if the query fails. 09:31.980 --> 09:39.010 And if this function fails we're going to have also an else statement. 09:39.100 --> 09:41.800 We're going to show an error message. 09:41.840 --> 09:46.960 I'm going to show exactly the same one OK. 09:47.050 --> 09:51.690 We'll also check if we have any areas that show up right there. 09:52.010 --> 09:54.780 And it's completely different from what ever we are violating. 09:54.970 --> 10:05.390 So to do this let's retrieve that value first and stories inside something we can call for the 10:18.760 --> 10:19.910 OK. 10:20.040 --> 10:30.240 So if file error is not equal to zero or if file error is greater than zero then we're going to echo 10:30.360 --> 10:34.690 an error message. 10:35.370 --> 10:45.290 And we can also add something like error code and just show whatever the error code is. 10:45.480 --> 10:49.800 OK so let's save Now before we try our code. 10:49.860 --> 10:53.010 We're going to go back to the profile of those Presby file address. 10:53.010 --> 10:56.610 Review the code we use to show these pictures. 10:56.610 --> 10:58.360 This one and that's one. 10:58.710 --> 11:04.610 So before showing the picture we going to check if we have a value right there. 11:04.740 --> 11:08.130 So if that's the case we're going to use that value to show the picture. 11:08.560 --> 11:08.960 OK. 11:11.010 --> 11:16.500 So first we're going to retrieve the value OK of the profile picture. 11:16.530 --> 11:22.970 So if we go to the top top of the file I can see that we've already fetched data. 11:23.180 --> 11:23.730 OK. 11:23.730 --> 11:25.970 In our results variable. 11:25.980 --> 11:31.870 So of course the user name email I would just need a next in there for the profile picture. 11:34.730 --> 11:37.750 It is called Picture OK. 11:37.950 --> 11:40.370 And that's going to be the elements of key 11:43.430 --> 11:44.110 profile petion 11:49.060 --> 11:59.260 it so it starts with this image in the navigation bar. 12:09.950 --> 12:19.160 So instead of writing the image like that's the way we're going to copy this and then write some code 12:21.500 --> 12:28.470 which will check if the variable picture is empty. 12:38.160 --> 12:42.230 To you the empty function which will take as a parameter the variable picture. 12:42.460 --> 12:47.290 So if that's the case we going to echo the same code. 12:56.940 --> 12:59.050 It's going to copyright again. 13:03.420 --> 13:06.610 And change the color codes into single quotes 13:20.740 --> 13:28.950 otherwise we're going to use the permanent location of our picture using the picture. 13:29.110 --> 13:30.810 Venerable. 13:30.970 --> 13:36.580 So instead of this was going to use the picture like that. 13:37.040 --> 13:38.270 OK. 13:38.320 --> 13:43.910 So let's go ahead and do the same thing with the preview picture. 13:48.210 --> 13:53.860 OK let's just copy the code to make it easy for us and save time. 13:53.890 --> 13:54.220 So 13:57.780 --> 14:02.030 that's our preview Peter. 14:02.500 --> 14:03.550 So if 14:07.160 --> 14:09.140 the picture variable is empty 14:12.390 --> 14:13.850 then you're going to use that code 14:17.300 --> 14:18.690 let's go for the whole Dave 14:31.380 --> 14:38.330 and change the locates into single codes again. 14:49.750 --> 14:50.320 OK. 14:50.720 --> 14:55.260 Otherwise we're going to do the same thing. 14:56.350 --> 15:02.780 But this time use the picture variable for the source and that's abuse. 15:02.900 --> 15:03.300 OK. 15:03.350 --> 15:09.430 So let's say this refresh the page. 15:09.660 --> 15:14.290 Ok so I we can see the generic picture right there and right there. 15:16.200 --> 15:17.190 OK we need the lead. 15:17.190 --> 15:17.640 That's 15:22.900 --> 15:23.730 OK. 15:27.380 --> 15:28.350 OK that's better. 15:28.640 --> 15:34.390 Ok now we see this because the picture field is empty. 15:34.430 --> 15:36.160 Now let's upload a picture. 15:38.680 --> 15:43.290 We go and submit. 15:43.400 --> 15:47.750 OK so we can see the message that 15:51.580 --> 16:02.380 and also if we update this we'll see the permits this nation. 16:02.400 --> 16:03.960 Now if you refresh the page 16:06.980 --> 16:10.630 you can see this picture has been updated and updated right there as well. 16:10.800 --> 16:11.510 OK. 16:11.540 --> 16:16.510 Now let's go back to the AJAX call and just change today so 16:19.760 --> 16:23.950 if the file returns some data does that would cause an error. 16:24.270 --> 16:25.520 OK so what are we're going to do. 16:25.530 --> 16:26.570 We're going to select 16:30.010 --> 16:39.670 the area Dave and said the email to data 16:45.480 --> 16:46.310 and we're going to do that. 16:46.350 --> 16:51.800 If you've called something inside the data. 16:52.920 --> 16:54.690 Otherwise we are just going to 16:58.330 --> 17:00.760 refresh the page location reload 17:03.440 --> 17:07.720 OK so save let's try this 17:12.540 --> 17:16.780 series Choose another file submit since 17:27.490 --> 17:32.610 so he can see us because we are printing this file. 17:32.900 --> 17:35.800 That variable so it is common That's why we don't use anymore. 17:36.040 --> 17:37.040 So it is try again. 17:40.420 --> 17:42.430 OK let's choose another file. 17:44.520 --> 17:45.330 So it meets 17:49.400 --> 17:50.050 OK. 17:50.550 --> 17:55.080 You can see that the page has been reloaded and you can see on your picture. 17:55.890 --> 17:58.380 OK. 17:58.860 --> 18:01.740 So in the next video we're going to move to the Tripps page.