diff --git a/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md b/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md
index eded14f..66bcb41 100644
--- a/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md
+++ b/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md
@@ -133,7 +133,11 @@ $this->myUploadFunction($input). I will end up with that '$userfiles' package [0
 
 [00:30:16](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m16s)
 
-We still need to create remove file, if we have a problem. Why do we need to remove the file? Well all the way up till here(see video) the files is not on the server. It is somewhere in memory. Somewhere in limbo. If something happens [00:30:40](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m40s) and we returned false here, we don't need to do anything, it's not really anywhere it's just going to disappear. Same happening here or there or any of these other areas before here. But the moment we do this Move uploaded file $p_file = JFile::up;oad(tmp_src,$tmp_dest, false,true), we are moving the file to the server, and it is now, if that is true, it is on the server. When we pass the destination and the filename to the 'checkUpload', we already have the file on the server. [00:31:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m12s) If we then discover that this file is not legit, we don't want it, we must remove it, or any other checks we do, even if it's something more complicated than this, you must remove it, because it's on the server. Our little remove function, I'm trying to save a some unnecessary things. I'm going to sniper it up a bit because already up here [00:31:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m36s) we have the classes for the file in a folder, so we don't need to load that again. We going to pass it the destination, which is the 'folder', that's going to be fine. All of this(see video) we are able to clear out the name we don't need this(folder) we just need to package name. [00:32:04](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) We are going to ask, is it a file? Then delete, then if there's something not right, we are going to do clean path and just check again and delete. This should remove the file from the server. You can test that if something's wrong, just Google it, and tweak it but this should be ok. We are going to pass [00:32:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m29s) the destination path, which is the one where we moved it, remember up here. That's the same path we are passing all the way down to the 'removeFile' function and then it will clear it out for us. If everything is fine and it doesn't need to, we are going to continue on and then pass it back to the package [00:32:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m56s) which will be returned to our save method. So all of this code that I just wrote, I'll take it and dump it on GitHub as a gist. You could go there and I'll give a link to it, but this is quickly coded, I mean I'm sure that you could improve it. We copy it and pasted stuff from other classes [00:33:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m23s) to get this working, but there's nothing really to extravagant. The only thing that we didn't go into is exactly what does clean do, and what does apply do and those kind of things. You can go through the Joomla libraries and check exactly what does. But for the most part it's just generic PHP functionality. That it would be enough to upload the file.
+We still need to create remove file, if we have a problem. Why do we need to remove the file? Well all the way up till here(see video) the files is not on the server. It is somewhere in memory. Somewhere in limbo. If something happens [00:30:40](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m40s) and we returned false here, we don't need to do anything, it's not really anywhere it's just going to disappear. Same happening here or there or any of these other areas before here. But the moment we do this Move uploaded file $p_file = JFile::up;oad(tmp_src,$tmp_dest, false,true), we are moving the file to the server, if that is true, it is on the server. When we pass the destination and the filename to the 'checkUpload', we already have the file on the server. [00:31:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m12s) If we then discover that this file is not legit, we don't want it, we must remove it, or any other checks we do, even if it's something more complicated than this, you must remove it, because it's on the server. Our little remove function, I'm trying to save a some unnecessary things. I'm going to sniper it up a bit because already up here [00:31:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m36s) we have the classes for the file in a folder, so we don't need to load that again. We going to pass it the destination, which is the 'folder', that's going to be fine. All of this(see video) we are able to clear out the name we don't need this(folder) we just need to package name. [00:32:04](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) We are going to ask, is it a file? Then delete, then if there's something not right, we are going to do clean path and just check again and delete. This should remove the file from the server. You can test that if something's wrong, just Google it, and tweak it but this should be ok. We are going to pass [00:32:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m29s) the destination path, which is the one where we moved it, remember up here. That's the same path we are passing all the way down to the 'removeFile' function and then it will clear it out for us. If everything is fine and it doesn't need to, we are going to continue on and then pass it back to the package [00:32:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m56s) which will be returned to our save method. 
+
+So all of this code that I just wrote, I'll take it and dump it on GitHub as a gist. You could go there and I'll give a link to it, but this is quickly coded, I mean I'm sure that you could improve it. We copy it and paste stuff from other classes [00:33:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m23s) to get this working, but there's nothing really to extravagant. The only thing that we didn't go into is exactly what does cleaning do, and what does apply do and those kind of things. You can go through the Joomla libraries and check exactly what it does. But for the most part it's just generic PHP functionality. That it would be enough to upload the file. [00:33:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m57s) So let's give it a spin. Back over here, if we click the X on top of the page, it will take us out of the item. We can just click Looks, then Name and we would have again to select the image. There we have the image. We can click save and see what happens. Oops we have a bunch of errors here. Let's see undefined index. We've got trouble. Let me go see why. I didn't pay close [00:34:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m36s) attention. 
+
+I'm just going to do another var_dump(input); I can get the exact way of most possibly need to do for each. It might want to upload more than one. Or we could force it to just use the first. I think I wrote something about this already somewhere. Let me just check. Think this should do the trick. If it's an array we just want to grab the first value out of the array. If you got multiple fields [00:35:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) that are uploading files, in the same view you going to have to change this little chunk ($userfile = array_values($userfiles)[0] here. Because then you are going to have to deal with each of those files for each loop inside of this function. Which would mean you could skip all these as they are Global to everyone of them and then from about here(see video), you would add it for each loop. [00:35:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m39s) Then here you won't echo, well you won't break out, you just grab the error into an array which you would have eventually then pass. Targeting each specific package. Then return package, all the successes as well as the errors and handle it somewhere else. So since we are just uploading one file, I'm not going to [00:36:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m07s) do all that, just going to grab that first value and we are going to work with that first value. Let's go back and try again. Save. Again we have a problem. Not userfiles but userfile. [00:36:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s) It become so little changes like that can throughout errors. At last we have the file on the server. What I had to do is, I had to take away these points here(see video), I had that one part wrong. It won't need the point, must be without it, and you'll see that now there is our file in our temporal folder. It is on [00:37:03](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m03s) the server. We have the path and the name, and all those things. 
 
 ????
-[00:33:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m57s) So let's give it a spin So we back over here if we Click on this it will actually take us out of the Item so we can just click the back there then name And we would have again to select the actual image so there we have the the image And we can click save And see what happens oops we gotta bounce of errors here Ok let's see undefined index undefined index we've got trouble Let me go see why Ok so I didn't pay close [00:34:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m36s) attention here I'm just gonna do another var dump So I can get the exact way to sort of most possibly need to do a for each It might want to upload more than one But Or we could force it to just use the first I think I wrote something about this Already somewhere let me just check Think this should do the trick If it's an array we just wanna grab the first value out of the array If you got multiple Fields [00:35:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) That are uploading files In the same view you gonna have to change this little chunk here Because then you gonna have to deal with each of those Files In a for each loop inside of this function Which basically would mean you could Skip all these as they are Global to everyone of them and then from about Yes from about here You would add a for each loop Because you would [00:35:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m39s) Ok and then here you won't Echo well you won't break out you just grab the error into an array Which you would have eventually then pass More Targeting each specific package Really And then return Here All the successes as well as the errors and handle it somewhere else So since we just uploading one file I'm not gonna You know [00:36:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m07s) Do all that just gonna grab that First Value and we gonna work with that first value in that should do it Ok let's go back and try again Save Again we have a problem Not user files User a file Sorry User a file [00:36:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s) user a file It become so Little Changes like that can Throughout errors ok And at last we actually have The file on the server What I had to do is had to take away these points here I had that one part wrong so it won't need the actual point actually be without it and you'll see that now there is our file in our temporal folder it is actually on [00:37:03](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m03s) The server and and also we have the path And we have the name And all those things In fact Everything now is Is good we can now move the File To its final location now we could deal with moving the file To its final location Here in our [00:37:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m28s) Save class Or we can again have another Function Which we passed this Value to which then moves the file to where we would want every image File to go Ok let me quickly type that out. So here in our package We've got the file name so that's Really important And we got the full path which is where the file currently is [00:37:58](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m58s) And what It's format is. We could actually have more values in this if we wanted we could do something like this Instead of just passing That user a filename And name pass it the whole The whole array Like that and then here we change that to archive And [00:38:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m23s) Then here we do that Which actually means we've got this array to our You know it's available So instead of doing check we can then do Package name And then dir And [00:38:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m42s) Format And Return the archive package Now we'll have all the information which we actually were using even up Here will have all of that information to our disposal Of coarse also need to change this to that Well you know what the name is already there [00:39:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m13s) so instead of package name We can just be satisfied with the name Ok and then we could call this full Full path Yes So that'll be there in any only information that we are adding which is really new with these two values So we can just do that And now our array looks full [00:39:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m44s) It's got the type the temporal original temporal obviously that's no longer there Any errors that might have come up The size of the File the full path and the format So we got all those information to to use now at the end of the day the only information we really gonna Keep is up to us We could decide to keep the size of the file We could decide to keep it format it's really up to us And really [00:40:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m14s) I'm not gonna go into how to deal with all that we just have one Name Field How will you say a column In the database called Bana In which we are to place our final Information and that information should be a You know the path in in relation to The image folder Where we have [00:40:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m42s) Placed this This file So first I'm going to get some constants to use I like Using this route As that is Always going to be the root path To our website And then next actually add Just the path to the images [00:41:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m07s) It's where we going to place our image So I'm gonna copy this So we going to just Add The path the relation to the root folder to the banner In the database Now You do realize that this is actually just for you it's so that you know where the file is later You will then on the front end of the site where you gonna use this value You have to [00:41:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m33s) When you get the value from the database you'll still need to create The Actual image html tag To actually load the image or whatever you gonna do with this file You're gonna still have the code that nothing of that's gonna be done you gonna just at least have the path to exactly where the file is because you're storing it that way in the Banner Column that's the field Ok And now here we taking the root path [00:42:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m02s) And that exact value And we are moving The full path which we build-up here right which is the actual current destination We are going to move it from the full path to the Final Destination And that is really yet At this point We got the image on the server And We are moving it to the correct location And we are storing the value [00:42:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m28s) In the database And we've done with saving and uploading the actual value As Yeah that would be all that's required Now In any of these steps You might wanna be more Do some more things be more secure be more validating Because it's not only images your obviously going to be uploading if you uploading PDF If you uploading other kind of content [00:42:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m56s) You gonna have to do some Googling to anywhere in these steps Especially in this check upload area To do the correct validation because at this point the file is on your server And you need to make sure that it's the right file Now this isn't Airtight Because this really just Checks that the files type Is one of these The extension [00:43:22](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m22s) It doesn't actually valid data File to really being an image They are more Secure ways to To do that But some of them are little bit more Yeah if you do use them the server side You know If your application is gonna be running And shared environments [00:43:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m42s) Then it will cause problems because in some of those functions are not available in all shared environments But if you wanna be Like very specific You could actually help the user along to who uses your application to Enable those functions on their server And by that giving them extra Security with uploading of files This is obviously a very big topic Which I don't think we have time to go into in that dept [00:44:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m14s) But in general this sort of implementation is really how most are doing it And yet Yeah Let me know Get you too concerned This should be ok Now We have moved everything in place let's give her a trial run So it says that it's been saved to excessively But [00:44:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m39s) No file selected is shown here Now we might want to Show The file that is now currently in the database Instead of this upload or Show the upload still but let's say someone decides to upload another one that it Actually changes it And remove the old one and adds the new one And displays the little image here As it is in the database now let's first see is it in the database [00:45:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m12s) Ok so here in the database we see there is our file And it is actually set to be in images autumn trees forest Building grass Dot JPG that is where it is Ok now let's see if it actually was moved To that Place So here in the folder structure we gonna open images we gonna click here on images then Scroll down and see [00:45:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m46s) there it is autumn tree You can see it there Yip it is in its place So the actual image does now Exist in the image folder It is been uploaded and it actually is in the database although Our little snippet there says that it can't see it Before we continue with that kind of custom scripting we need to take what we have done so far And actually added to JCB We've done and in the IDE [00:46:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m19s) And if we compile in install Store this component now You actually overwrite everything you've written And boom it's gone So what to do Let's go grab that custom scripting and added to the component In JCB Ok so we wanna grab everything From Upload my uploads function [00:46:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m41s) You wanna do check upload And remove file all of that we want to get So we gonna say cut And Got that in the The clipboard Then go to JCB And in the look Admin view which is where all this is happening we can open up Then there is a place called custom buttons You gonna say yes here [00:47:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m07s) And then there is the controller method we are not adding anything there But here is the The model method And so this is a place for us to actually add some script to the model And we gonna just paste what we've cut Out right in here And overhearing the list controller we're not adding anything and Also in this list [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) Controller we're not adding anything So we basically just adding that Which we written to the model method at your PHP here is gonna go into the model As methods so This is the methods That's a method That is obviously a method So all of these are methods We want it to be available to the class from now on [00:47:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m59s) We are not actually at this point dealing With if you upload a new file that it removed the old one That should still Be further custom Scripting And so this point all Just add the new file it won't Remove the old one So could be that he's adding more files and more files and it just gets added to the image folder But it's not being removed You have the remove [00:48:26](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m26s) file function already here So you could actually yeah you could actually fix this quite easily But I'm not gonna show you how to do that I wanna encourage you to Study up some of your PHP as well Now Here we need to also add obviously The Script that we are adding to the save method so here is the PHP save method Before data modelling this is where we want to actually Jump In [00:48:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m56s) And like it says there the value are in the data array So we just gonna go back to the IDE And scroll down to Sorry this time it's up Just gonna scroll up To this little snippet here Because this is everything new Right I just copy that or let's just cut that as well [00:49:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m23s) and go back to The JCB interface And paste it in there Ok so now we have our In the save Method before modelling We have this little snippet that will be executed And the same goes with In a custom buttons we've got in the [00:49:45](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m45s) Models we've got our classes that are being added Now we said If we open the item So that means after we've saved it We want to actually take the value in this banner And we want to display it in the page Now there are many ways to do this Since we already have this value It shouldn't be that hard So JavaScript to the rescue [00:50:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m15s) I'm gonna use JavaScript to do this So we have hands our script to the view file Or add JavaScript to the view footer so that means we can decide where to add the Javascript Do we want to add to JavaScript in a file that gets included in the header of the document Or do we wanna add it to the bottom of the view as a snippet ok that is really we were want to do it Because you wanna use PHP So We gonna actually do some PHP in this Area here [00:50:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m50s) Where as in this is file area we cannot do PHP So to show you exactly where this is gonna come out he's gonna just add a comment here Add Java Script Here And I'm gonna show you how we gonna do PHP P HP Also [00:51:20](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m20s) Works And We gonna save that Now we actually can go out of here and go compile this component And install and then go look at it code So here and our save class We have Upload image And that is all Good and right [00:51:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m56s) Now let's search for our function here And there is our function also in the same class been added Through JCB interface so it was not lost It's not exactly the same place we were originally Placed it but it is in the same class and it's what we want we want those Classes to be available to us here Ok so that part is still good Now we wanna go look at the view And see where that JavaScript going to be added So we'll just close images here [00:52:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m31s) Then go back up and open the view Then wait what Where are we this is the installer You wanna go to the demo that one View look And edit So we are looking at that specific View And you see here Is [00:52:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m59s) The JavaScript Ok So it's added it to our script Area And I actually am able to To do PHP Echo In the script area Which is what We are going to do [00:53:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m14s) We going to check whether that Banner Value is available to us on this page And then we are going to Use it to actually render the image in its Appropriate place Now to know where the values are We go back to its view HTML dot PHP Area [00:53:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m39s) And we see that here it gets the item and it places it in the item Global Class value So we have the value item we can therefore check if banner is in the item So what I will do Just So that you can Sort of see what's happening as well copy that And then I'm gonna go back to the edit View Where we put our html I'm gonna say [00:54:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m09s) I just var dump That specific value And save And so we can see all of that so let's go to the interface Ok we actually have to add the word Exit jexit is actually the correct way of doing it J exit To this and go little up because we got a little fader here it's gonna hide this and just Let's just take that out for now So we can see [00:54:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m44s) What's going on And then let's Refresh or page Ok so we got it all broken that's fine But here at the bottom ah still not showing Let's take it to the top So we've added it here above everything it should actually show now. So let's go see. Refresh There we go that's what you wanna see [00:55:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m11s) So we see that it is publicly accessible there's the banner value so we can check whether there Is actually A value in this whether it's a string and has a value because we know we controlling that value the user cannot actually manually Add that value there It needs to do it through the upload field So we can check whether that has a string And if it does We can just create a little Show the image [00:55:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m39s) Underneath it's appropriate placement Ok so that's how I get to see the value So if you are dealing with something similar You can Do these kind of poking into the result sets to exactly where is what How does it look and how do I get to it and Yeah that way You're not dependent on the way sort of Not knowing what's going on So now here back in JCB we going to say [00:56:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m12s) if We gonna say if It is Set And If It is a string I'm using the helper class here we've got a function in the helper class called check string To see whether it has a length And that it is a string [00:56:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m36s) Not an array or a Boolean or something like that Now This is the way you can Sort of use the helper class to use the brackets brackets brackets Component and then bracket bracket bracket helper colon colon and there you go And If that is true We want to Obviously load the image [00:57:01](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m01s) Because then it exists Now we wanna see where do we wanna add this image and it's actually underneath the the upload I'm just gonna have it show up like a normal image so we gonna just do some jQuery to To do that Ok so we are doing This image source and we are echoing the item banner because we know it's a string We can add a class here Now you can target this class [00:57:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m30s) And make it nice with CSS Just add your CSS is here To view Just here you can add your CSS so here you just add the the class name that you gonna target with your CSS and you can do All kind of nice things with it you gonna have alt and banner And we gonna insert it after the banner Field so the You know is the way we know what this value is Is we open one of those views [00:57:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m57s) like so And we drill down Until we find That's so we use our inspector grab maybe The banner Label then drill until we find the ID J form banner That's how I get it ok [00:58:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m13s) And Then We just add this after It after the control group so that looks nice fits in with the layout and I think it's broken Ok so That should trigger it So we saying See if we have a banner if we do add this JavaScript we done Save Now let's compile and in Install [00:58:37](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m37s) So compile And install Go back to our view And Obviously close this and refresh Now go to more and Walla there is our image Now to show you it in action we gotta change the image It won't remove the old one [00:59:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m05s) But it will immediately show you the new one once we click save So let's do that So I've selected to different image from my computer and then click save And go back and wow there is the new image so that is how you could implement The file Field type in JCB so as you can see there is some custom scripting needed I'm gonna quickly I show you a URL where you can go and get this custom script And use it in your own component And of course [00:59:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m44s) May be adapted to change it At least use it as a place to start with And Start using the Custom Joomla field type For uploading files Thanks for watching Is any questions or even Suggestions of how to do this easier or faster or safer Leave the commons in the area below the video I'll be happy to look at it and [01:00:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m11s) Make any necessary changes to our snippet ok Or even at the snippet itself that might be a better place And the gits where the URL I'm gonna show you now Are you can go there and make comments there and we will just make pull request in the whatever and we'll fix it up so So that works well for everyone thanks for watching
+In fact Everything now is good. we can now move the File To its final location now we could deal with moving the file To its final location Here in our [00:37:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m28s) Save class Or we can again have another Function Which we passed this Value to which then moves the file to where we would want every image File to go Ok let me quickly type that out. So here in our package We've got the file name so that's Really important And we got the full path which is where the file currently is [00:37:58](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m58s) And what It's format is. We could actually have more values in this if we wanted we could do something like this Instead of just passing That user a filename And name pass it the whole The whole array Like that and then here we change that to archive And [00:38:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m23s) Then here we do that Which actually means we've got this array to our You know it's available So instead of doing check we can then do Package name And then dir And [00:38:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m42s) Format And Return the archive package Now we'll have all the information which we actually were using even up Here will have all of that information to our disposal Of coarse also need to change this to that Well you know what the name is already there [00:39:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m13s) so instead of package name We can just be satisfied with the name Ok and then we could call this full Full path Yes So that'll be there in any only information that we are adding which is really new with these two values So we can just do that And now our array looks full [00:39:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m44s) It's got the type the temporal original temporal obviously that's no longer there Any errors that might have come up The size of the File the full path and the format So we got all those information to to use now at the end of the day the only information we really gonna Keep is up to us We could decide to keep the size of the file We could decide to keep it format it's really up to us And really [00:40:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m14s) I'm not gonna go into how to deal with all that we just have one Name Field How will you say a column In the database called Bana In which we are to place our final Information and that information should be a You know the path in in relation to The image folder Where we have [00:40:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m42s) Placed this This file So first I'm going to get some constants to use I like Using this route As that is Always going to be the root path To our website And then next actually add Just the path to the images [00:41:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m07s) It's where we going to place our image So I'm gonna copy this So we going to just Add The path the relation to the root folder to the banner In the database Now You do realize that this is actually just for you it's so that you know where the file is later You will then on the front end of the site where you gonna use this value You have to [00:41:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m33s) When you get the value from the database you'll still need to create The Actual image html tag To actually load the image or whatever you gonna do with this file You're gonna still have the code that nothing of that's gonna be done you gonna just at least have the path to exactly where the file is because you're storing it that way in the Banner Column that's the field Ok And now here we taking the root path [00:42:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m02s) And that exact value And we are moving The full path which we build-up here right which is the actual current destination We are going to move it from the full path to the Final Destination And that is really yet At this point We got the image on the server And We are moving it to the correct location And we are storing the value [00:42:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m28s) In the database And we've done with saving and uploading the actual value As Yeah that would be all that's required Now In any of these steps You might wanna be more Do some more things be more secure be more validating Because it's not only images your obviously going to be uploading if you uploading PDF If you uploading other kind of content [00:42:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m56s) You gonna have to do some Googling to anywhere in these steps Especially in this check upload area To do the correct validation because at this point the file is on your server And you need to make sure that it's the right file Now this isn't Airtight Because this really just Checks that the files type Is one of these The extension [00:43:22](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m22s) It doesn't actually valid data File to really being an image They are more Secure ways to To do that But some of them are little bit more Yeah if you do use them the server side You know If your application is gonna be running And shared environments [00:43:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m42s) Then it will cause problems because in some of those functions are not available in all shared environments But if you wanna be Like very specific You could actually help the user along to who uses your application to Enable those functions on their server And by that giving them extra Security with uploading of files This is obviously a very big topic Which I don't think we have time to go into in that dept [00:44:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m14s) But in general this sort of implementation is really how most are doing it And yet Yeah Let me know Get you too concerned This should be ok Now We have moved everything in place let's give her a trial run So it says that it's been saved to excessively But [00:44:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m39s) No file selected is shown here Now we might want to Show The file that is now currently in the database Instead of this upload or Show the upload still but let's say someone decides to upload another one that it Actually changes it And remove the old one and adds the new one And displays the little image here As it is in the database now let's first see is it in the database [00:45:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m12s) Ok so here in the database we see there is our file And it is actually set to be in images autumn trees forest Building grass Dot JPG that is where it is Ok now let's see if it actually was moved To that Place So here in the folder structure we gonna open images we gonna click here on images then Scroll down and see [00:45:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m46s) there it is autumn tree You can see it there Yip it is in its place So the actual image does now Exist in the image folder It is been uploaded and it actually is in the database although Our little snippet there says that it can't see it Before we continue with that kind of custom scripting we need to take what we have done so far And actually added to JCB We've done and in the IDE [00:46:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m19s) And if we compile in install Store this component now You actually overwrite everything you've written And boom it's gone So what to do Let's go grab that custom scripting and added to the component In JCB Ok so we wanna grab everything From Upload my uploads function [00:46:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m41s) You wanna do check upload And remove file all of that we want to get So we gonna say cut And Got that in the The clipboard Then go to JCB And in the look Admin view which is where all this is happening we can open up Then there is a place called custom buttons You gonna say yes here [00:47:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m07s) And then there is the controller method we are not adding anything there But here is the The model method And so this is a place for us to actually add some script to the model And we gonna just paste what we've cut Out right in here And overhearing the list controller we're not adding anything and Also in this list [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) Controller we're not adding anything So we basically just adding that Which we written to the model method at your PHP here is gonna go into the model As methods so This is the methods That's a method That is obviously a method So all of these are methods We want it to be available to the class from now on [00:47:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m59s) We are not actually at this point dealing With if you upload a new file that it removed the old one That should still Be further custom Scripting And so this point all Just add the new file it won't Remove the old one So could be that he's adding more files and more files and it just gets added to the image folder But it's not being removed You have the remove [00:48:26](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m26s) file function already here So you could actually yeah you could actually fix this quite easily But I'm not gonna show you how to do that I wanna encourage you to Study up some of your PHP as well Now Here we need to also add obviously The Script that we are adding to the save method so here is the PHP save method Before data modelling this is where we want to actually Jump In [00:48:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m56s) And like it says there the value are in the data array So we just gonna go back to the IDE And scroll down to Sorry this time it's up Just gonna scroll up To this little snippet here Because this is everything new Right I just copy that or let's just cut that as well [00:49:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m23s) and go back to The JCB interface And paste it in there Ok so now we have our In the save Method before modelling We have this little snippet that will be executed And the same goes with In a custom buttons we've got in the [00:49:45](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m45s) Models we've got our classes that are being added Now we said If we open the item So that means after we've saved it We want to actually take the value in this banner And we want to display it in the page Now there are many ways to do this Since we already have this value It shouldn't be that hard So JavaScript to the rescue [00:50:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m15s) I'm gonna use JavaScript to do this So we have hands our script to the view file Or add JavaScript to the view footer so that means we can decide where to add the Javascript Do we want to add to JavaScript in a file that gets included in the header of the document Or do we wanna add it to the bottom of the view as a snippet ok that is really we were want to do it Because you wanna use PHP So We gonna actually do some PHP in this Area here [00:50:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m50s) Where as in this is file area we cannot do PHP So to show you exactly where this is gonna come out he's gonna just add a comment here Add Java Script Here And I'm gonna show you how we gonna do PHP P HP Also [00:51:20](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m20s) Works And We gonna save that Now we actually can go out of here and go compile this component And install and then go look at it code So here and our save class We have Upload image And that is all Good and right [00:51:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m56s) Now let's search for our function here And there is our function also in the same class been added Through JCB interface so it was not lost It's not exactly the same place we were originally Placed it but it is in the same class and it's what we want we want those Classes to be available to us here Ok so that part is still good Now we wanna go look at the view And see where that JavaScript going to be added So we'll just close images here [00:52:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m31s) Then go back up and open the view Then wait what Where are we this is the installer You wanna go to the demo that one View look And edit So we are looking at that specific View And you see here Is [00:52:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m59s) The JavaScript Ok So it's added it to our script Area And I actually am able to To do PHP Echo In the script area Which is what We are going to do [00:53:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m14s) We going to check whether that Banner Value is available to us on this page And then we are going to Use it to actually render the image in its Appropriate place Now to know where the values are We go back to its view HTML dot PHP Area [00:53:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m39s) And we see that here it gets the item and it places it in the item Global Class value So we have the value item we can therefore check if banner is in the item So what I will do Just So that you can Sort of see what's happening as well copy that And then I'm gonna go back to the edit View Where we put our html I'm gonna say [00:54:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m09s) I just var dump That specific value And save And so we can see all of that so let's go to the interface Ok we actually have to add the word Exit jexit is actually the correct way of doing it J exit To this and go little up because we got a little fader here it's gonna hide this and just Let's just take that out for now So we can see [00:54:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m44s) What's going on And then let's Refresh or page Ok so we got it all broken that's fine But here at the bottom ah still not showing Let's take it to the top So we've added it here above everything it should actually show now. So let's go see. Refresh There we go that's what you wanna see [00:55:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m11s) So we see that it is publicly accessible there's the banner value so we can check whether there Is actually A value in this whether it's a string and has a value because we know we controlling that value the user cannot actually manually Add that value there It needs to do it through the upload field So we can check whether that has a string And if it does We can just create a little Show the image [00:55:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m39s) Underneath it's appropriate placement Ok so that's how I get to see the value So if you are dealing with something similar You can Do these kind of poking into the result sets to exactly where is what How does it look and how do I get to it and Yeah that way You're not dependent on the way sort of Not knowing what's going on So now here back in JCB we going to say [00:56:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m12s) if We gonna say if It is Set And If It is a string I'm using the helper class here we've got a function in the helper class called check string To see whether it has a length And that it is a string [00:56:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m36s) Not an array or a Boolean or something like that Now This is the way you can Sort of use the helper class to use the brackets brackets brackets Component and then bracket bracket bracket helper colon colon and there you go And If that is true We want to Obviously load the image [00:57:01](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m01s) Because then it exists Now we wanna see where do we wanna add this image and it's actually underneath the the upload I'm just gonna have it show up like a normal image so we gonna just do some jQuery to To do that Ok so we are doing This image source and we are echoing the item banner because we know it's a string We can add a class here Now you can target this class [00:57:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m30s) And make it nice with CSS Just add your CSS is here To view Just here you can add your CSS so here you just add the the class name that you gonna target with your CSS and you can do All kind of nice things with it you gonna have alt and banner And we gonna insert it after the banner Field so the You know is the way we know what this value is Is we open one of those views [00:57:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m57s) like so And we drill down Until we find That's so we use our inspector grab maybe The banner Label then drill until we find the ID J form banner That's how I get it ok [00:58:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m13s) And Then We just add this after It after the control group so that looks nice fits in with the layout and I think it's broken Ok so That should trigger it So we saying See if we have a banner if we do add this JavaScript we done Save Now let's compile and in Install [00:58:37](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m37s) So compile And install Go back to our view And Obviously close this and refresh Now go to more and Walla there is our image Now to show you it in action we gotta change the image It won't remove the old one [00:59:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m05s) But it will immediately show you the new one once we click save So let's do that So I've selected to different image from my computer and then click save And go back and wow there is the new image so that is how you could implement The file Field type in JCB so as you can see there is some custom scripting needed I'm gonna quickly I show you a URL where you can go and get this custom script And use it in your own component And of course [00:59:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m44s) May be adapted to change it At least use it as a place to start with And Start using the Custom Joomla field type For uploading files Thanks for watching Is any questions or even Suggestions of how to do this easier or faster or safer Leave the commons in the area below the video I'll be happy to look at it and [01:00:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m11s) Make any necessary changes to our snippet ok Or even at the snippet itself that might be a better place And the gits where the URL I'm gonna show you now Are you can go there and make comments there and we will just make pull request in the whatever and we'll fix it up so So that works well for everyone thanks for watching