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 a4ce3e8..47ccc44 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
@@ -4,7 +4,10 @@
 
 [00:00:00](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)
 
-We want to add a file field to a component and upload a file. [00:00:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) I'm going to use this Demo component. It got a few Admin Views, we've got the area Look. I got a Site View, Looks and Looking. I'm going to add this field to the Look Admin View. I first need to create the field [00:00:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) and we need to look at the steps that will need to implement. Currently JCB doesn't out of the box address this. 
+We want to add a file field to a component and upload a file. [00:00:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m12s) I'm going to use this Demo component. It got a few Admin Views, we've got the area Look. I got a Site View, Looks and Looking. I'm going to add this field to the Look Admin View. I first need to create the field [00:00:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) and we need to look at the steps that will need to implement. Currently JCB doesn't out of the box address this. We might think of doing this maybe in the future but because of some of the security risks, it's best you do this yourself. [00:00:54](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m54s) Because then at least you're under control and the risk is really yours and not put anyone else at risk. 
 
-????
-We might think of doing this maybe in the future but because of some of the security risks. It's actually best you do this yourself. [00:00:54](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m54s) Because then At least you're under Control And the risk is Really yours. And not put anyone else at risk. Ok So you're uploading a file. The field you wanna use already exists [00:01:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m11s) In field types. So if you go to field types There is a field called File See where is it Must be in the next one Yeah we go File Now this [00:01:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m32s) Obviously Everything in here Was taken From Joomla's documentation So it shows you a whole lot of attributes their values some of the descriptions But also shows you where to actually get more info on this And so it's always good To actually do that Ok so here we are [00:02:00](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m00s) Scroll down And there is the file field So It actually now has this new except Perimeter Which is a nice little Extra which wasn't available when I first set it up So if yours doesn't have it You see that I Actually [00:02:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m23s) Have Since added it It's not showing up here Ok so Might As well add it now then So you're under size let's add that new attributes So it's accept The value I'm gonna leave it to be in image and can be changed let's give it some information [00:02:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) as regarding description that just copy that and place in here ok so We got this new attribute set Those of you running the latest Release of JCB Might already have this there it only gets added if you do a fish install It doesn't update the database with these values Ok great [00:03:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) save and close So we got a file types set If we go to files now And we can Create a new file Sorry field Files I mean Field And we select the file Come on [00:03:35](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m35s) You see that it gives you the Information And there is that new Attribute Available to us And you'll see that it's also showing up here And so this is the beginning Of actually setting up The File field type [00:03:55](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m55s) to your component I'm just gonna call this file And Then here we can just say File Well let's call it image Here we say, Choose an image from computer with maximum 100Kb And most of these other values we could actually take away we will come back to this Once we've added to the component and started looking [00:04:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) at some of the other things that must be done because this is only step A they are actually 3 steps to take Of which this is the easiest So we have here Image don't need to say that just save and Close ok now we go to our admin View And that's this Look I'm gonna go directly to it fields [00:05:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m05s) So I could add that File Field type I'm a little bit chunt in here so I'm gonna Zoom out a bit Ok Where will I place this There are Two tabs [00:05:21](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m21s) I think let's do it in the more area At the bottom here More And Image and we'll see there are quite a few files here Image Think it should say file ,here we go And That should do it [00:05:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) Let's make it full width For now And then one there is just one and save and close so now If we should open the admin View We should see the new Field has been added And it is said to being in the full view Sorry full width of the [00:06:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m15s) The tab In the more tab And We could actually now compile the Component As a beginning to see ok how it will work out compile it And then Install it Then have a look at it [00:06:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m39s) It say create a new demo Go to more So here we see The file So it's telling us File one Ok we have a problem here We've got two  Fields with the same name image So I'll have to go change this [00:07:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m06s) go back I'm gonna uninstall this Is gonna be the easiest way to do that And then go back To the fields because it's the Last one I'm created End Image And lets change this [00:07:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m36s) to Banner Think that'll be ok Not the type Ok so I think we'll use banner and we'll call this also banner so it stays the field type is file but will use the Label banner and save and close Now let's try again You know if you have [00:08:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) Two of the same fields Meaning exactly the same name JCB automatically calls the one image one the other one image two And doing that is not good practice it usually doesn't come out right in Events especially with history Because it is only tracking one field right And When it actually checks the history that field name doesn't match any field [00:08:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) So So when it comes to the history and updating of the database Automatically as you add new fields Using the same field multiple times is not recommended ok So let's try this again And then install it Now if we go and have a look We should see a different Reality here great Banner [00:09:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m07s) Its got all the necessary information Obviously this is set in your server Tells you that And now you can click here and select a Image So I'm gonna do that So I got this autumn tree forest that I've selected And Need to add a name and some [00:09:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) That seems to be all I need to do and then save and we have a problem Now as A little glitch that None of you should have I Tampered with some of the Validations In a previous tutorial Anyway Now I fixed it and [00:09:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m56s) As you can see When I saved the item It actually Didn't upload anything So the file is not in my system And that's where usually All of you would sort of End up ok so you've used file you've Selected the [00:10:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m14s) Banner whatever you wanted to upload And it just nothing happened and that's because There needs to be a server side Which needs to actually validate the file Move the file and check the file and everything Make sure that it's a correct file Secure the file And then place the files path back Into this Field [00:10:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) When it puts the value in the database And it's that process which is to be custom coded Ok so let's go back to our component and let's do it One of the things I like to do before I actually start coding anything is really look Under the hood look at what's going on especially if it's the first time I'm doing it so So since many of you this might be your first time I'm gonna show you someone how this is done and it's Like inspecting what's going on Under The Hood and how can I use it So I'm gonna open this item again and I'm going to again select our Image And then having the image selected I'm gonna go to the code [00:11:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m31s) So I know where the code is for this website right so I'm gonna go into my editor and I'm going to the Admin area office component and of this View Model Into where it actually saves the values so Follow Me Follow Me There So here we have the component wait not this one that one the Joomla Mount An administrator components demo And then models and look I wanna go there Double click we gonna open and you could just go to almost the bottom of the file somewhere there [00:12:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m13s) Look for the save Method Function really That's where we wanna sort of poke because It's at this point where all the data from the browser is available to us And we should be able to access it now you could write the helper class and put it in your helper function And use the same uploading sort of Class if you want to reuse it but you could also scripted writing here and I'll show you how to do it that way Obviously I like reusing scripts so the helper class Idea is more appealing because I put it there and everywhere I [00:12:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m57s) use this field Type for file uploading I just also use this helper class to deal with moving the data and using it Ok so for now What we gonna do is we gonna var dump some values just to the screen When we click save in the UI to see what happened so Let's do that So basically two One is the actual data that is available here and the other is this we getting the [00:13:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m29s) Input  And I'm gonna Check in files what do we have there In the input of the application and if so Ok we can save this changes then Go back to the The website And basically just click save Ok so now we got a a dump now if yours doesn't look like this it might be because you do not have XdD bug install on your server [00:13:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) You would then want to add some sort of Formatting Something like this Echo pre some like that should do it Just to sort of add some formatting that it doesn't bulge into one line Ok I don't need that I've got XD bug so it does it for me Ok so now we here we have the data and we see that our Where is it Banner B it's not even the data list but that's ok [00:14:43](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m43s) Just crawled down you see we dumped a different set of data and it actually if we scroll a little We'll see that has a protected value called  jform name type temporary Name error size All that information then in the temporal name and has The actual file name Banner with its temporal occation so it creates a temporal location for the file It tells us type is image jpeg and also gives us the file name And so this is the array would you want to actually get hold of and [00:15:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m29s) With whom you would want to yes make changes Move that image Give it it correct name back after validating it and doing whatever sanitation is required And then saving that value back into the banner data position Which should be in this first array here but it is It isn't there But it should be here So you should actually just create it Ok so going back to the code let's do some of that There is a nice [00:16:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m05s) Get function here We can just say  jform if you remember that was where the data is and if we want all the values back as an array or that it should be null if there is none existing So we gonna save that and then Just upload the file again to see You know how does it look now Have to do it again because of previous values are actually gone So we'll click save again and there we go we've get a little different array But more useful An easier to parse [00:16:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m42s) And now we can take the next step to actually check the this array exist There is a function already or a class in Joomla which already does All of this for you In fact I would say let's go look at that and let's just copy some of those functions In fact that's copy the function and adapted to our needs and just put it into Our our class so in components you go to the The Installer then the model and then uninstall and scroll down till you see one that says get package from upload [00:17:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) I think what it says yeah get package from upload This is the function which is really ideal for the task It takes care of a lot of sanitizing it has lot of error checks in it and it should Should be Yeah it should be useful for us in this case we'll obviously take some stuff away and add our own little messages so we don't depend on the installer Messages so we'll just copy this whole function all the way up there just control copy it go to look our class And for now I'm just gonna paste it in here above So there are some key things I would like to change here for example [00:18:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) I'm thinking let's Let's change a function name and we call it My Upload function For now And We we gonna pass it the input So we don't want that To be done twice And [00:18:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m50s) We know the this is gonna to be jform and we definitely don't want to have raw Because it's an image We want this to be array So we can actually check the values And then This looks fine We can say here Upload Sorry up load ing [00:19:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m19s) of images Not Available no wait and set uploads are not enabled in PHP that seems fine Ok we can actually take these messages and put them in here because JCB is gonna grab this Once we put it into our component and gonna add it to all language files for all component in this is really wanna make sure that that happens We don't need the Zlib because we not gonna unzip anything So we could actually move this part Now there is gonna check where we actually got a file set of files here so It's got a check wither that [00:20:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m06s) User file is an array And if it's not it want to say no file was selected or a file was uploaded so we can just type that in If at this point we detect any errors we basically want to You know erase those errors and actually break out of this upload So let's see Upload error warning upload error I suppose we need to go look at these language strings in the Language file of the installer to correctly translate these For now I'm not gonna do that so I'm just gonna say error [00:20:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m59s) You can you know do that on your own Ok now what we wanna check here is our Upload size you want to make sure that our upload size is what we expected Is the maximum upload size too small in the php.ini and that's really What happening here and so again it will give an error saying File too large there we go the same here It's checking again this time it's first checked whether it's in the INI files here it actually check the file size that there is a file size And so we can again say [00:21:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m57s) Upload error again you should just check what is the actual file language string And replace that with the English version here Ok then We build appropriate path We take the filename create the path we used create this temporal SRC which is source path And then we Move the file with the Jfile upload Now at this point the file is being uploaded to the server [00:22:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m34s) And they are still validation still to do in our Script what we actually Just grabbed from the uploader class We do this unpack now we don't need unpack we wanna do some other things here Which are More appropriate for our purpose First thing I'm gonna Actually move the get classes function up a few lines And also make sure to have the folder class actually available in case Then I'm going to clean the name [00:23:10](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m10s) So that it is everything is fine and well it anywhere later we might not have any issues Ok so then we still have what we did here before This actually is going to be replaced with little function Which I sort of started writing called Check upload I'm gonna change this function as one of my own Sort of functions which I've already adapted For other projects and The past Like you've seen we already move this one out [00:23:38](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m38s) That one can stay like that So over here We are going to just do a little check-up to actually make sure that the package Which we are actually going to Give back and which were used to store in a database and all the rest is actually you know Ok So here we just gonna grab the result of this which basically gonna be true or false and we gonna check If it's False we gonna say No some that I did upload [00:24:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m12s) Failed ok And Then If we still going We going to actually do this check So now we've got this check upload in place And we first gonna get the format from the file And then we going to use a little Custom script here to validate our format I've got a [00:24:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m41s) In my component I usually set formats that I allow So it's a global thing That means In your component you would have to actually go in and add config Drop down With a list of Allowed Formats now To sort of sidestep that in [00:25:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m07s) Instead of trying to Explain all that I'm just going to go and remove this Function here you could You know pause this and copy that down if you know what I'm talking about but then in That case You don't need to pause this you know how to type it I'm so I'm gonna remove that And just add You know some format was I think ok I'm ok with this JPG [00:25:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m30s) I'm ok with that format and I'm also gonna be ok with jpeg Ok obviously Add the dot there  And Maybe gif let's see or wait png And then gif So those are the formats that I'm [00:25:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m56s) Gonna say yeah Those are fine of course because it's really the file extension that we are checking here right So we not gonna use a global value here we just going to use the file format Allowed file formats And then here would basically gonna check Is this file format in this array If it's not We gonna say Invalid file Format [00:26:27](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m27s) And there we go and is gonna error out but with this error out we will Need to do some house cleaning So We will have to look at that at the moment So what I think I'll do is I'm going there also passes the destination of where we've moved the file And Then Because that's where the file currently is right So here we got the temporal destination which is really In the temporal path the temporal folder of the Joomla website it's not where we want to end up [00:27:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m02s) It's just where we gonna keep the file until we happy that it's safe and so Ok we got it in the temporal destination we moved it up there And now we checked if something happened yet fine Do check the upload And Here If we now Find That this Actual file [00:27:26](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m26s) Is Problematic we gonna have to remove it So we gonna have a little new little class here And then we gonna say remove let's say file I think that's right And we gonna write this little remove file in a moment Ok so let's say for our reason you'll see here I've got a lot of Validation whether the user actually has permission to upload stuff Now that again I'm I'm gonna remove that from now because [00:27:58](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m58s) Yeah It's gonna be a little bit Beyond the scope of what we're explaining Now I want to pass a package back Which We are happy with Saying This is actually where our file is And what its name is And [00:28:21](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) So we gonna just do that So that's the directory And that is the package name And we gonna Pass that back As the package We could Since we've got the Format And maybe you wanna store that [00:28:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m41s) We could also add that to the array So There we go everything is good The package name directory path as well as the format and will return that back As the package And we give that back To the model The save function Is going to call this so in the save function we gonna call This [00:29:17](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m17s) here oh yes and we said We are going to Has it The input Field The input value since we're really getting it why get it again so we gonna pass that over here See something like That ok That looks good So [00:29:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m44s) Now all that needs to be done is over here instead of this Function We can now do The following This My upload function And the input there we got So I will actually end up with that package [00:30:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m07s) information right in this variable And we can then just exit out to see how that will look And even if we've got some typo errors here Oh yes we still need to create remove file if we have a problem Ok so why do we need to remove the file Well all the way up till here the files is actually not on the server It is somewhere in memory Somewhere in limbo And 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 gonna Disappear Same with it Happening here or there Or any of these other areas before here But the moment we do this We are actually moving the file to the server And it is now if that is true it is on the server And so when we pass the destination and the filename here to check upload We ready have the file on the server [00:31:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m12s) And so 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 And so our little remove function I'm trying to save a some Some Unnecessary things I'm gonna also snipper it up a bit because we're ready up here [00:31:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m36s) We got 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 And We gonna That's gonna be fine So All of us we are able to Actually clear out the name we don't need this we just need to package name [00:32:04](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) So here we gonna ask is it a file Then delete then if there's something not right we gonna do clean path and just check Again and delete in 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 So we gonna basically pass it [00:32:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m29s) The destination path Which is the one to where we moved it Remember up here So that's the same path we are passing all the way down to the remove Function and then It will clear it out for us And if everything is fine and it doesn't need to We gonna continue on and then pass it back here 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 here now I'll take it and dump it on GitHub as a gist So you could go there I'll give the link to it but if this is Quickly coded I mean I'm sure that you could improve it We copy it and pasted stuff from other You know other classes [00:33:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m23s) To sort of get this working but there's nothing really to extravagant here the only thing that we didn't go into his exactly what does clean do and what does apply do and Those kind of things but you can obviously go through the Joomla libraries and Check exactly what does it do But for the most part it's just generic php Functionality And so yes That it would be enough To actually 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 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
+### Fieldtypes - File - Shows attributes, values, some descriptions, info
+
+[00:01:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m06s)
+
+So you're uploading a file. The Fieldtypes you want to use already exists. [00:01:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m11s) So if you go to Fieldtypes, there is a field called File. [00:01:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m32s) Everything in here was taken from Joomla's documentation. It shows you a whole lot of attributes, their values, some of the descriptions, but also shows you where to get more info on this. It's always good to do that. Ok so here we are [00:02:00](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m00s) Scroll down And there is the file field So It actually now has this new except Perimeter Which is a nice little Extra which wasn't available when I first set it up So if yours doesn't have it You see that I Actually [00:02:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m23s) Have Since added it It's not showing up here Ok so Might As well add it now then So you're under size let's add that new attributes So it's accept The value I'm gonna leave it to be in image and can be changed let's give it some information [00:02:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) as regarding description that just copy that and place in here ok so We got this new attribute set Those of you running the latest Release of JCB Might already have this there it only gets added if you do a fish install It doesn't update the database with these values Ok great [00:03:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) save and close So we got a file types set If we go to files now And we can Create a new file Sorry field Files I mean Field And we select the file Come on [00:03:35](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m35s) You see that it gives you the Information And there is that new Attribute Available to us And you'll see that it's also showing up here And so this is the beginning Of actually setting up The File field type [00:03:55](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m55s) to your component I'm just gonna call this file And Then here we can just say File Well let's call it image Here we say, Choose an image from computer with maximum 100Kb And most of these other values we could actually take away we will come back to this Once we've added to the component and started looking [00:04:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) at some of the other things that must be done because this is only step A they are actually 3 steps to take Of which this is the easiest So we have here Image don't need to say that just save and Close ok now we go to our admin View And that's this Look I'm gonna go directly to it fields [00:05:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m05s) So I could add that File Field type I'm a little bit chunt in here so I'm gonna Zoom out a bit Ok Where will I place this There are Two tabs [00:05:21](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m21s) I think let's do it in the more area At the bottom here More And Image and we'll see there are quite a few files here Image Think it should say file ,here we go And That should do it [00:05:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) Let's make it full width For now And then one there is just one and save and close so now If we should open the admin View We should see the new Field has been added And it is said to being in the full view Sorry full width of the [00:06:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m15s) The tab In the more tab And We could actually now compile the Component As a beginning to see ok how it will work out compile it And then Install it Then have a look at it [00:06:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m39s) It say create a new demo Go to more So here we see The file So it's telling us File one Ok we have a problem here We've got two  Fields with the same name image So I'll have to go change this [00:07:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m06s) go back I'm gonna uninstall this Is gonna be the easiest way to do that And then go back To the fields because it's the Last one I'm created End Image And lets change this [00:07:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m36s) to Banner Think that'll be ok Not the type Ok so I think we'll use banner and we'll call this also banner so it stays the field type is file but will use the Label banner and save and close Now let's try again You know if you have [00:08:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) Two of the same fields Meaning exactly the same name JCB automatically calls the one image one the other one image two And doing that is not good practice it usually doesn't come out right in Events especially with history Because it is only tracking one field right And When it actually checks the history that field name doesn't match any field [00:08:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) So So when it comes to the history and updating of the database Automatically as you add new fields Using the same field multiple times is not recommended ok So let's try this again And then install it Now if we go and have a look We should see a different Reality here great Banner [00:09:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m07s) Its got all the necessary information Obviously this is set in your server Tells you that And now you can click here and select a Image So I'm gonna do that So I got this autumn tree forest that I've selected And Need to add a name and some [00:09:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) That seems to be all I need to do and then save and we have a problem Now as A little glitch that None of you should have I Tampered with some of the Validations In a previous tutorial Anyway Now I fixed it and [00:09:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m56s) As you can see When I saved the item It actually Didn't upload anything So the file is not in my system And that's where usually All of you would sort of End up ok so you've used file you've Selected the [00:10:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m14s) Banner whatever you wanted to upload And it just nothing happened and that's because There needs to be a server side Which needs to actually validate the file Move the file and check the file and everything Make sure that it's a correct file Secure the file And then place the files path back Into this Field [00:10:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) When it puts the value in the database And it's that process which is to be custom coded Ok so let's go back to our component and let's do it One of the things I like to do before I actually start coding anything is really look Under the hood look at what's going on especially if it's the first time I'm doing it so So since many of you this might be your first time I'm gonna show you someone how this is done and it's Like inspecting what's going on Under The Hood and how can I use it So I'm gonna open this item again and I'm going to again select our Image And then having the image selected I'm gonna go to the code [00:11:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m31s) So I know where the code is for this website right so I'm gonna go into my editor and I'm going to the Admin area office component and of this View Model Into where it actually saves the values so Follow Me Follow Me There So here we have the component wait not this one that one the Joomla Mount An administrator components demo And then models and look I wanna go there Double click we gonna open and you could just go to almost the bottom of the file somewhere there [00:12:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m13s) Look for the save Method Function really That's where we wanna sort of poke because It's at this point where all the data from the browser is available to us And we should be able to access it now you could write the helper class and put it in your helper function And use the same uploading sort of Class if you want to reuse it but you could also scripted writing here and I'll show you how to do it that way Obviously I like reusing scripts so the helper class Idea is more appealing because I put it there and everywhere I [00:12:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m57s) use this field Type for file uploading I just also use this helper class to deal with moving the data and using it Ok so for now What we gonna do is we gonna var dump some values just to the screen When we click save in the UI to see what happened so Let's do that So basically two One is the actual data that is available here and the other is this we getting the [00:13:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m29s) Input  And I'm gonna Check in files what do we have there In the input of the application and if so Ok we can save this changes then Go back to the The website And basically just click save Ok so now we got a a dump now if yours doesn't look like this it might be because you do not have XdD bug install on your server [00:13:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) You would then want to add some sort of Formatting Something like this Echo pre some like that should do it Just to sort of add some formatting that it doesn't bulge into one line Ok I don't need that I've got XD bug so it does it for me Ok so now we here we have the data and we see that our Where is it Banner B it's not even the data list but that's ok [00:14:43](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m43s) Just crawled down you see we dumped a different set of data and it actually if we scroll a little We'll see that has a protected value called  jform name type temporary Name error size All that information then in the temporal name and has The actual file name Banner with its temporal occation so it creates a temporal location for the file It tells us type is image jpeg and also gives us the file name And so this is the array would you want to actually get hold of and [00:15:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m29s) With whom you would want to yes make changes Move that image Give it it correct name back after validating it and doing whatever sanitation is required And then saving that value back into the banner data position Which should be in this first array here but it is It isn't there But it should be here So you should actually just create it Ok so going back to the code let's do some of that There is a nice [00:16:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m05s) Get function here We can just say  jform if you remember that was where the data is and if we want all the values back as an array or that it should be null if there is none existing So we gonna save that and then Just upload the file again to see You know how does it look now Have to do it again because of previous values are actually gone So we'll click save again and there we go we've get a little different array But more useful An easier to parse [00:16:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m42s) And now we can take the next step to actually check the this array exist There is a function already or a class in Joomla which already does All of this for you In fact I would say let's go look at that and let's just copy some of those functions In fact that's copy the function and adapted to our needs and just put it into Our our class so in components you go to the The Installer then the model and then uninstall and scroll down till you see one that says get package from upload [00:17:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) I think what it says yeah get package from upload This is the function which is really ideal for the task It takes care of a lot of sanitizing it has lot of error checks in it and it should Should be Yeah it should be useful for us in this case we'll obviously take some stuff away and add our own little messages so we don't depend on the installer Messages so we'll just copy this whole function all the way up there just control copy it go to look our class And for now I'm just gonna paste it in here above So there are some key things I would like to change here for example [00:18:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) I'm thinking let's Let's change a function name and we call it My Upload function For now And We we gonna pass it the input So we don't want that To be done twice And [00:18:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m50s) We know the this is gonna to be jform and we definitely don't want to have raw Because it's an image We want this to be array So we can actually check the values And then This looks fine We can say here Upload Sorry up load ing [00:19:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m19s) of images Not Available no wait and set uploads are not enabled in PHP that seems fine Ok we can actually take these messages and put them in here because JCB is gonna grab this Once we put it into our component and gonna add it to all language files for all component in this is really wanna make sure that that happens We don't need the Zlib because we not gonna unzip anything So we could actually move this part Now there is gonna check where we actually got a file set of files here so It's got a check wither that [00:20:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m06s) User file is an array And if it's not it want to say no file was selected or a file was uploaded so we can just type that in If at this point we detect any errors we basically want to You know erase those errors and actually break out of this upload So let's see Upload error warning upload error I suppose we need to go look at these language strings in the Language file of the installer to correctly translate these For now I'm not gonna do that so I'm just gonna say error [00:20:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m59s) You can you know do that on your own Ok now what we wanna check here is our Upload size you want to make sure that our upload size is what we expected Is the maximum upload size too small in the php.ini and that's really What happening here and so again it will give an error saying File too large there we go the same here It's checking again this time it's first checked whether it's in the INI files here it actually check the file size that there is a file size And so we can again say [00:21:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m57s) Upload error again you should just check what is the actual file language string And replace that with the English version here Ok then We build appropriate path We take the filename create the path we used create this temporal SRC which is source path And then we Move the file with the Jfile upload Now at this point the file is being uploaded to the server [00:22:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m34s) And they are still validation still to do in our Script what we actually Just grabbed from the uploader class We do this unpack now we don't need unpack we wanna do some other things here Which are More appropriate for our purpose First thing I'm gonna Actually move the get classes function up a few lines And also make sure to have the folder class actually available in case Then I'm going to clean the name [00:23:10](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m10s) So that it is everything is fine and well it anywhere later we might not have any issues Ok so then we still have what we did here before This actually is going to be replaced with little function Which I sort of started writing called Check upload I'm gonna change this function as one of my own Sort of functions which I've already adapted For other projects and The past Like you've seen we already move this one out [00:23:38](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m38s) That one can stay like that So over here We are going to just do a little check-up to actually make sure that the package Which we are actually going to Give back and which were used to store in a database and all the rest is actually you know Ok So here we just gonna grab the result of this which basically gonna be true or false and we gonna check If it's False we gonna say No some that I did upload [00:24:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m12s) Failed ok And Then If we still going We going to actually do this check So now we've got this check upload in place And we first gonna get the format from the file And then we going to use a little Custom script here to validate our format I've got a [00:24:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m41s) In my component I usually set formats that I allow So it's a global thing That means In your component you would have to actually go in and add config Drop down With a list of Allowed Formats now To sort of sidestep that in [00:25:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m07s) Instead of trying to Explain all that I'm just going to go and remove this Function here you could You know pause this and copy that down if you know what I'm talking about but then in That case You don't need to pause this you know how to type it I'm so I'm gonna remove that And just add You know some format was I think ok I'm ok with this JPG [00:25:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m30s) I'm ok with that format and I'm also gonna be ok with jpeg Ok obviously Add the dot there  And Maybe gif let's see or wait png And then gif So those are the formats that I'm [00:25:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m56s) Gonna say yeah Those are fine of course because it's really the file extension that we are checking here right So we not gonna use a global value here we just going to use the file format Allowed file formats And then here would basically gonna check Is this file format in this array If it's not We gonna say Invalid file Format [00:26:27](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m27s) And there we go and is gonna error out but with this error out we will Need to do some house cleaning So We will have to look at that at the moment So what I think I'll do is I'm going there also passes the destination of where we've moved the file And Then Because that's where the file currently is right So here we got the temporal destination which is really In the temporal path the temporal folder of the Joomla website it's not where we want to end up [00:27:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m02s) It's just where we gonna keep the file until we happy that it's safe and so Ok we got it in the temporal destination we moved it up there And now we checked if something happened yet fine Do check the upload And Here If we now Find That this Actual file [00:27:26](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m26s) Is Problematic we gonna have to remove it So we gonna have a little new little class here And then we gonna say remove let's say file I think that's right And we gonna write this little remove file in a moment Ok so let's say for our reason you'll see here I've got a lot of Validation whether the user actually has permission to upload stuff Now that again I'm I'm gonna remove that from now because [00:27:58](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m58s) Yeah It's gonna be a little bit Beyond the scope of what we're explaining Now I want to pass a package back Which We are happy with Saying This is actually where our file is And what its name is And [00:28:21](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) So we gonna just do that So that's the directory And that is the package name And we gonna Pass that back As the package We could Since we've got the Format And maybe you wanna store that [00:28:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m41s) We could also add that to the array So There we go everything is good The package name directory path as well as the format and will return that back As the package And we give that back To the model The save function Is going to call this so in the save function we gonna call This [00:29:17](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m17s) here oh yes and we said We are going to Has it The input Field The input value since we're really getting it why get it again so we gonna pass that over here See something like That ok That looks good So [00:29:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m44s) Now all that needs to be done is over here instead of this Function We can now do The following This My upload function And the input there we got So I will actually end up with that package [00:30:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m07s) information right in this variable And we can then just exit out to see how that will look And even if we've got some typo errors here Oh yes we still need to create remove file if we have a problem Ok so why do we need to remove the file Well all the way up till here the files is actually not on the server It is somewhere in memory Somewhere in limbo And 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 gonna Disappear Same with it Happening here or there Or any of these other areas before here But the moment we do this We are actually moving the file to the server And it is now if that is true it is on the server And so when we pass the destination and the filename here to check upload We ready have the file on the server [00:31:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m12s) And so 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 And so our little remove function I'm trying to save a some Some Unnecessary things I'm gonna also snipper it up a bit because we're ready up here [00:31:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m36s) We got 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 And We gonna That's gonna be fine So All of us we are able to Actually clear out the name we don't need this we just need to package name [00:32:04](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) So here we gonna ask is it a file Then delete then if there's something not right we gonna do clean path and just check Again and delete in 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 So we gonna basically pass it [00:32:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m29s) The destination path Which is the one to where we moved it Remember up here So that's the same path we are passing all the way down to the remove Function and then It will clear it out for us And if everything is fine and it doesn't need to We gonna continue on and then pass it back here 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 here now I'll take it and dump it on GitHub as a gist So you could go there I'll give the link to it but if this is Quickly coded I mean I'm sure that you could improve it We copy it and pasted stuff from other You know other classes [00:33:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m23s) To sort of get this working but there's nothing really to extravagant here the only thing that we didn't go into his exactly what does clean do and what does apply do and Those kind of things but you can obviously go through the Joomla libraries and Check exactly what does it do But for the most part it's just generic php Functionality And so yes That it would be enough To actually 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 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