WEBVTT 00:07.600 --> 00:14.470 In this video you are going to add the correct icons to your files and folders and calculate their size. 00:14.470 --> 00:15.850 So let's start with the icon. 00:16.420 --> 00:25.110 So we will need to find out if the element is a folder or a file so that we can choose the correct icon. 00:28.440 --> 00:32.890 So that icon profiles and the icon file folders so let's go ahead and do this. 00:32.910 --> 00:40.050 So to find out if our element is a file or folder again we gonna use the starter method of the file 00:40.050 --> 00:41.100 system. 00:41.100 --> 00:47.850 I'm going to use the sync version so that's we wait for the outputs before executing. 00:47.850 --> 00:48.960 Coming code. 00:49.890 --> 00:55.950 So so far we added the name and the link. 00:56.020 --> 00:56.560 Okay. 01:03.120 --> 01:05.550 And now we're going to move to 01:11.560 --> 01:21.670 the icon. 01:21.830 --> 01:24.300 That's Spencer All right. 01:24.300 --> 01:32.220 So now for the icon we're going to create a variable stats which will set to the outputs of our stars 01:32.910 --> 01:33.780 function. 01:33.780 --> 01:43.790 So again we're using the sync version and what you need here is the full static path of the item itself 01:44.120 --> 01:46.130 not the folder. 01:46.130 --> 01:49.380 So we're going to need to build that. 01:49.460 --> 01:56.200 So let's call that item for static. 01:57.460 --> 02:01.250 So to build this you will need the full static path of your folder. 02:01.360 --> 02:07.570 And then you add the name of your item and you can guess that we're gonna be using path that joint again 02:10.070 --> 02:15.890 OK so const this variable equals the outputs of path not join. 02:15.900 --> 02:24.830 So you're joining the four static parts of your folder and the name of your item which is item. 02:25.450 --> 02:26.370 What we're doing here. 02:26.370 --> 02:35.980 We aren't getting the starts of the item now we're going to add a different icon depending on whether 02:36.220 --> 02:38.800 your item is a file or directory. 02:38.800 --> 02:42.850 So let's check if it's a directory. 02:42.850 --> 02:54.730 So if starts is directory then we're going to add the correct icon. 02:54.730 --> 03:03.530 Else if it starts is a file then we're gonna add another type of icon. 03:03.550 --> 03:09.000 Now we need to be careful here when using the sync version of these methods. 03:09.210 --> 03:19.090 We will always place this inside a try catch statements to handle errors in the proper way. 03:23.240 --> 03:23.510 OK. 03:23.530 --> 03:24.060 So 03:33.810 --> 03:38.920 we just console that log the error if you get an error. 03:38.920 --> 03:45.850 And if you want You can also set the main content variable to something like a 03:49.910 --> 03:55.540 off class alerts and alerts danger 03:58.680 --> 04:02.220 OK and write something like So internal 04:05.270 --> 04:05.940 server error 04:12.750 --> 04:18.220 and get out of the function by returning something like false or dis return if you like. 04:18.930 --> 04:22.010 Okay now let's get the correct icon. 04:22.050 --> 04:31.150 So we're going to define a variable here icon which will set in each scenario and then we'll use it 04:31.150 --> 04:33.790 later in our HCM code. 04:33.850 --> 04:37.690 So if it's a directory then we'll says the icon to 04:41.320 --> 04:45.290 something and then we'll check if it's a file. 04:45.370 --> 04:52.860 So let's start with the directory so I'm going to inspect these elements and gets the correct code from 04:52.870 --> 04:55.790 the so that's the code I'm going to copy. 04:55.790 --> 04:58.130 It's basic there. 04:58.250 --> 05:02.530 And if it's a file it's inspects those elements. 05:02.540 --> 05:03.290 And here we go 05:07.810 --> 05:13.180 that's what we want now the syntax we gonna be using is slightly different from this one. 05:13.320 --> 05:18.780 We're going to use the iron icon tag like That's 05:26.370 --> 05:27.310 right. 05:27.390 --> 05:35.100 So and in our Asia email content you know the icon just before the anchor tag 05:38.690 --> 05:41.530 like this. 05:42.230 --> 05:52.180 OK so let's see if you call all our modules included OK. 05:52.220 --> 05:54.470 So let's test our code. 05:56.570 --> 05:59.980 So again we've got an error stance is not defined. 05:59.990 --> 06:02.660 So this is due to block scoping. 06:03.170 --> 06:08.240 So let's define starts right at the beginning 06:12.990 --> 06:14.930 like that. 06:15.060 --> 06:17.520 So let's try again. 06:17.520 --> 06:21.150 And here we go we can see our icons there. 06:21.650 --> 06:24.540 So we're not guessing the correct icons there. 06:24.690 --> 06:27.750 And that's because I missed dependencies here. 06:27.750 --> 06:35.780 So it starts again and try our code and this time we're getting the correct ones. 06:35.810 --> 06:36.050 All right. 06:36.060 --> 06:40.830 Now let's move to the next step which is calculating the size of your files and folders. 06:40.830 --> 06:48.010 So this will be done in a different way depending on whether it's a file or a folder if it's a file. 06:48.060 --> 06:54.180 We're going to use a straightforward method using the FS module which will give us the correct size 06:54.390 --> 07:02.240 of the file if it's a folder the FSA module doesn't have an easy way of doing that. 07:02.280 --> 07:11.410 So we're going to need to go back to the command line using another node module. 07:11.610 --> 07:18.540 So for each type we're going to write a different function. 07:18.540 --> 07:23.970 So for the directory type or the folder type. 07:23.970 --> 07:31.850 We're going to use a function which will build called calculate size. 07:32.120 --> 07:33.230 The phone directory. 07:34.670 --> 07:42.710 So this function will take the promises we need. 07:42.710 --> 07:47.840 And will it give us the size of the other three if it's a file. 07:47.840 --> 07:53.120 They were going to use another function calculates size F for file. 07:54.500 --> 08:02.860 So when you calculate the size of an element you will need to show the size in a human readable format 08:03.710 --> 08:13.280 but also you will need to hide somewhere in your AML the size in bytes because later on you want to 08:13.280 --> 08:17.470 be able to reorder your elements by size. 08:17.510 --> 08:18.580 Right. 08:19.070 --> 08:19.550 So 08:22.370 --> 08:32.180 the same thing applies to the name we will use the name in the HMO code to display the name and also 08:32.210 --> 08:38.690 we will place the name somewhere in our code so that we can reorder the elements. 08:38.930 --> 08:40.580 So we'll come back to that in a bit. 08:40.880 --> 08:43.530 So let's go ahead with the size. 08:43.640 --> 08:50.240 So since you need both the size in bytes and the human readable formats This means that you're going 08:50.240 --> 08:59.810 to need two values so our function calculates size D is going to return an array where we're going to 08:59.810 --> 09:02.420 store two variables. 09:02.420 --> 09:06.270 So let's call the first variable file size. 09:06.290 --> 09:09.130 So this is the one that you want to display on your page. 09:10.010 --> 09:20.120 And the second variable I'm going to call its file size bytes which is gonna be the size in bytes okay. 09:20.370 --> 09:21.660 And the same thing applies 09:24.920 --> 09:31.280 to the file version. 09:31.280 --> 09:36.890 So instead of calling this file size you can call it item size if you like instead of file 09:47.020 --> 09:47.360 all right. 09:47.370 --> 09:49.050 That's better. 09:49.050 --> 09:52.570 Now let's create a Jobs case file for each of these two functions. 09:52.620 --> 09:54.460 So let's start with this one. 09:54.610 --> 10:02.710 We're going to call the file the same name of the function I'm going to place the file in the same location 10:02.780 --> 10:04.600 as respond those genus 10:08.680 --> 10:09.520 that's the first one 10:12.850 --> 10:13.300 and 10:17.750 --> 10:20.720 that's the second one. 10:21.200 --> 10:21.480 OK. 10:21.490 --> 10:36.160 So let's start with the first one so let's define our function calculate size D which will take promises. 10:36.400 --> 10:39.190 And then we'll execute some great 10:42.450 --> 10:43.670 and then right at the end. 10:43.720 --> 10:45.310 Will exports 10:48.620 --> 10:51.160 that function calculate. 10:51.210 --> 10:56.670 Sighs de now to link this file 11:04.050 --> 11:05.050 we will add 11:08.160 --> 11:14.610 a constant requiring the parts of our jobs because while so the path sounds from the current location 11:15.030 --> 11:20.460 and then goes to calculate size the doors Jess 11:23.200 --> 11:24.380 okay. 11:25.230 --> 11:34.900 So to calculate the size of a folder you mainly need the full static path of that folder and the full 11:34.900 --> 11:45.180 static path of the item itself is the item for static path variable which we created earlier. 11:45.530 --> 11:55.190 So what you need is parse this variable to the function calculate size D so our function takes one parameter 11:57.980 --> 12:01.090 and will return at the end an array 12:06.950 --> 12:08.070 of two elements. 12:08.090 --> 12:10.990 So two tests. 12:12.120 --> 12:12.680 Oh good. 12:12.720 --> 12:16.590 Let's just start with something like this. 12:16.590 --> 12:23.950 So one hundred ten megabytes will be human readable formats and invites 12:28.360 --> 12:32.480 let's say back to 110 converted to bytes. 12:32.480 --> 12:36.400 So this will depend on which system you are working on. 12:36.440 --> 12:44.240 So the conversion will be either 100 and multiply by 1000 and then multiplied by 1000. 12:44.270 --> 12:46.590 This is the system used by my computer. 12:46.820 --> 12:48.310 Now when other systems. 12:48.440 --> 12:55.610 It would be 1024 by 1000 24. 12:55.730 --> 12:59.670 OK so for now we will keep this one 13:03.180 --> 13:07.890 and let's go back to our main content file and 13:11.040 --> 13:19.370 we will use the value of item size in our table. 13:23.660 --> 13:29.270 Now before trying I could list comments this line because we haven't defined calculate size F yet 13:32.510 --> 13:34.620 and also we can improve our code. 13:34.700 --> 13:44.060 So instead of having to define these two variables outside this scope again we can define a global variable 13:46.240 --> 13:55.050 there or a global object so let's call it item details for example. 13:55.290 --> 14:02.730 So we will set it initially to an empty objects and then instead of icon 14:05.410 --> 14:14.530 we will use a property of item details those icon icon which will set to any value we need to save icon. 14:14.530 --> 14:18.600 We're gonna have item details those icon 14:31.760 --> 14:36.180 the same thing applies two starts 14:39.640 --> 14:44.440 so quite some detail more details as to what stance 15:02.380 --> 15:03.070 okay. 15:03.440 --> 15:07.990 And it's due to the same thing with 15:11.080 --> 15:12.320 besides variables 15:21.590 --> 15:24.320 instead of item size you can just use sizing said 15:29.900 --> 15:30.690 the same thing. 15:31.400 --> 15:31.850 There. 15:32.150 --> 15:32.630 Okay. 15:36.870 --> 15:47.910 So let's just copy this and change the function to calculate size F. 15:48.120 --> 15:56.490 Now let's just scroll and see if we still have any where we didn't include the item details. 15:56.730 --> 16:10.580 So this one okay so let's save our code and now let's try so it says here the size is undefined. 16:10.900 --> 16:14.600 And that's because we changed that to size instead of item size. 16:14.670 --> 16:16.770 So let's try again. 16:16.770 --> 16:17.250 And here we go. 16:17.250 --> 16:20.430 We get 110 for all for this. 16:20.460 --> 16:20.690 OK. 16:20.700 --> 16:28.170 So this is only four folders folders you'll get undefined for files and that's because we haven't calculated 16:28.170 --> 16:29.750 the size of files yet. 16:29.820 --> 16:36.100 So let's go back to our file while well function calculate size D. 16:36.270 --> 16:43.140 Now as we said earlier calculating the size of a folder using the SS module is not something straightforward. 16:43.140 --> 16:47.710 So we're going to use another module which is called child process. 16:47.740 --> 16:49.020 Now I'm gonna do. 16:49.020 --> 16:55.500 I'm gonna go to the playground create another file as I'm going to call child 17:00.530 --> 17:03.580 process both Jess and here. 17:03.590 --> 17:12.190 We gonna write some code and play with this module so to require the module let's define a variable 17:13.190 --> 17:16.250 child process which will set to require 17:19.900 --> 17:20.710 child process 17:23.990 --> 17:29.100 so the method we are interested in is called exec. 17:29.300 --> 17:33.380 And we're gonna use the sync version so let's try 17:36.900 --> 17:42.150 child process dot exec sync 17:44.940 --> 17:48.010 of a certain path. 17:48.120 --> 17:56.580 So basically it was this function is going to do it's going to execute any command that you pass to 17:56.580 --> 17:57.380 it. 17:57.420 --> 18:04.680 So we're gonna do here we're going to write a command that we would write in the command line and we 18:04.680 --> 18:09.570 will get the outputs which we can manipulate in our code. 18:09.700 --> 18:18.490 So let's try a simple command B WD which will tell us where we are at the moment and we will use the 18:18.550 --> 18:23.220 method to string to get the outputs as a string. 18:23.950 --> 18:27.780 So let's save and 18:31.340 --> 18:36.820 stop the up and then run node playground. 18:37.400 --> 18:38.810 Child process those chess 18:41.680 --> 18:41.980 okay. 18:42.020 --> 18:44.210 So we will need to console that lock this 18:49.770 --> 18:51.080 so let's try again. 18:53.770 --> 18:55.790 Okay so this is the results we are getting. 18:56.240 --> 19:04.180 So is telling us that we are inside this path and this is the same result that I would get if I typed 19:04.390 --> 19:06.580 P WD right here. 19:06.580 --> 19:07.230 Okay. 19:07.350 --> 19:07.630 All right. 19:07.630 --> 19:14.320 In the next video you're gonna run another command which will calculates the size of a certain folder 19:14.740 --> 19:16.540 on the computer. 19:16.540 --> 19:21.670 And then we will be able to use the same method in our projects.