From 063f4be359c461e9babcf782f216110c98719196 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Mon, 9 Sep 2019 10:05:49 +0200 Subject: [PATCH] Updated 056 How to use the file field type to upload a file in JCB (markdown) --- ...-use-the-file-field-type-to-upload-a-file-in-JCB.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) 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 aad593d..c6d41ab 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 @@ -5,19 +5,21 @@ [00:00:00](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s) (_Click on these time links to see Youtube video_) -We want to add a file field to a component and upload a file. 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 want to add a file field to a component and upload a file and are going to use this Demo component. It got a few Admin Views and the area 'Look'. There is a Site View, 'Looks' and 'Looking'. I am going to add this field to the Look Admin View. First, the field needs to be created and we need to look at the steps that need to be implemented.[00:00:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) Currently, JCB does not 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 is best you do this yourself because then at least you are under control. ### 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. 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. We are in Form field. [00:02:00](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m00s) Scroll down and there is the file field. It now has this new 'accept' parameter, which is a nice little extra which wasn't available when I first set it up. If yours doesn't have it, you will see that I [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. +If a file is uploaded the Fieldtypes you need to use already exist. 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 is always good to do that. We are in Form field. [00:02:00](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m00s) Scroll down and there is the file field. It has this new 'accept' parameter, which is a nice little extra which has not been available when I first set it up. If yours does not have it, you will see that I have since added it. It is not showing up here. ### Adding New Attributes [00:02:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m30s) -I might as well add it now. Under size, let's add that new attributes. So it's 'accept', the value I'm going to leave it to be in 'image' and can be changed. Let's give it some information as regarding description. Copy that and place in here(see video). 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 fresh install. It doesn't update the database with these values. [00:03:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) Save and close. We got a file types set. +I might as well add it now and place it under 'Size', and add that new attributes. Select 'accept', the value and to leave it to be in 'image' and can be changed.<<<<<<<<<< + + Let's give it some information as regarding description. Copy that and place in here(see video). 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 fresh install. It doesn't update the database with these values. [00:03:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) Save and close. We got a file types set. ### Beginning Of Setting Up The File Field Type @@ -152,4 +154,4 @@ We can now move the file to its final location. We could deal with moving the fi We could have more values in this(see video), if we want to, we could do something like this instead of just passing that userfile, pass the whole array like that, and then here we change that to archive and then here we add 'name', which means it's available. So instead of doing check we can then do $archive ['packagename']. Then $archive['dir'], and [00:38:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m42s) $archive['format'], and return the $archive package. Now we'll have all the information which we 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. We could call this set directory $archive['full_path']. ???? -That'll be the only information that we are adding which is 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 +That'll be the only information that we are adding which is 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 \ No newline at end of file