056 How to use the file field type to upload a file in JCB

HOW TO USE THE FILE FIELD TYPE TO UPLOAD A FILE IN JCB

Add/Upload A File Field To A Component

00:00:00 (Click on these time links to see Youtube video)

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 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

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 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 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

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 it can be changed. 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 does not update the database with these values. 00:03:15 Save and close. We got a file types set.<<<<<<<

Beginning Of Setting Up The File Field Type

00:03:19

If we go to Fields and we select the file, you will see that it gives you the Field information and there is the new 'accept' attribute available to us. You will see that it is also showing up in the XML field definition. This is the beginning of setting up the File field type to your component.00:03:55 Just call this name: 'image', and then here at label we can just say 'File'. Call type: 'image'. Description: 'Choose an image from computer with maximum 100Kb'. Most of these other values can be removed. We will come back to this. Once we have added to the component and started looking at some of the other things that must be done.00:04:34 This is only step A. There are 3 steps to take of which this is the easiest. Up in the top we have Name: add 'image'. Save and close.

Add File Field Type - Image(file)

00:04:54

Now go to our Admin View, and that is this 'Look'. I'm going to go directly to its fields, I could add that File Field type. 00:05:21 Let's do it in the more area, add it in the bottom. Add 'Imag'e and we will see there are quite a few files. 'Image', it should say 'Image[file]'. That should do it. 00:05:50 Let's make the Alignment full width for now. Then in Order in Edit one. Save and close. If we should open the Admin View, we should see the new Field has been added and it is set to being in the Full Width in Tab, and 'More' in Tab.00:06:15 We could now compile the component as a beginning to see how it will work out. Compile it, and then install it. Then have a look at it. 00:06:39

Let us say create a new demo. Go to 'More'. Here we see the file. So it is telling us File(one). We have a problem, there are two fields with the same name 'image'. I will have to go change this. 00:07:06 I'm going to uninstall this. Then go back to the fields because it is the last one I have created. Let's go to the end, 'image', and lets change the name 00:07:36 to 'banner'. I think we will use 'banner' and we will call Name on top of the page also 'Banner'. 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 two of the same fields meaning exactly the same name JCB automatically calls the one image(one), the other one image(two), and that is not good practice. It usually does not come out right in events, especially with history, because it is only tracking one field. When it checks the history, that field name does not match any field. 00:08:34 When it comes to the history and the updating of the database automatically as you add new fields using the same field multiple times is not recommended.

Let's try this again. Install it. Now, we should see 'Banner'. 00:09:07 It got all the necessary information. Obviously this 600.00MB is set in your server. You can click Browse and select a Image. So I got this autumn_tree_forest_building_grass.jpg that has been selected and need to add a Name. 00:09:33 That seems to be all that is necessary and then save. <<<<<<<<<

Needs To Be A Server Side - Needs To Validate, Move, Check The File - Make Sure: It's The Correct File, Secure The File, and Then Place The Files Path Back Into Fields

00:09:56

As you can see when I saved the item, it didn't upload anything. The file is not in my system and that's where all of you would end up. You've used file, you've selected the 00:10:14 Banner, whatever you wanted to upload, and just nothing happened and that's because there needs to be a server side which needs to 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 When it puts the value in the database, and it's that process which is to be custom coded. Let's go back to our component. One of the things I like to do before I 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. Since many of you, this might be your first time, I'm going to show you some how this is done. It's like inspecting what's going on under the hood and how can I use it. I'm going to open this item again and I'm going to again select our image.

Code Editor - Joomla Mount, Administrator, Components, Demo, Models, Look.php

00:11:27

Then having the image selected, I'm going to go to the code. I know where the code is for this website. I'm going to go into my editor and I'm going to the Admin area of this component and of this view, this model, into where it saves the values. Follow me there. We have the Joomla Mount, administrator, components, com_demo, and then models, and look.php. We want to go there. Double click. We going to open and you could just go to almost the bottom of the file. 00:12:13 Look for the save function. That's where we want to sort of poke. It's at this point where all the data from the browser is available to us. We should be able to access it. You could write the helper class and put it in to your helper function, and use the same uploading class if you want to reuse it. You could also scripted right in here. I'll show you how to do it that way. I like reusing scripts so the helper class idea is more appealing, because I put it there and everywhere I 00:12:57 use this Fieldtype for file uploading, I just also use this helper class to deal with moving the data and using it.

Var_dump Some Values - One Is The Data That Is available, Second One Is Getting The Input

00:13:07

What we going to do is we going to var_dump some values just to the screen, when we click save in the UI to see what happened. Let's do that. Basically two. One is the actual data that is available, and the other is this we getting the input. I'm going to check in files, what do we have there in the input of the application. We can save this changes then go back to the website and just click save. We have got a dump, now if yours doesn't look like this, it might be because you do not have XD bug installed on your server.

Add Some Formatting

00:13:59

You would then want to add some formatting, something like this 'echo pre', something like that should do it. Just to add some formatting that it doesn't bulge into one line. I don't need that, I've got XD bug, so it does it for me. We have the data and we see that Banner it's not even the data list, but that's ok. 00:14:43 Just scroll down, you will see we dumped a different set of data and if we scroll a little, we'll see that it has a protected value called jform, name, type, tmp name, error, size, all that information. In the tmp name it has the actual file name 'banner' with its tmp location. It creates a temporal location for the file. It tells us the type is image, a jpeg and also gives us the file name. This is the array that you would want to get hold of and 00:15:29 with whom you would want to make changes, move that image, give it a correct name back, after validating it and doing whatever sanitation is required. Then saving that value back into the banner data position which should be in this first array. It isn't there. But it should be here. So you should just create it.

Get Function - Jform Where The Data Is

00:15:58

Going back to the code. There is a nice Get function. We can just say jform if you remember that is 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. We going to save that and then just upload the file again to see how does it look. 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.

Next Step - If Array Exist

00:16:42

And now we can take the next step to actually check the this array exist. There is a function 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.

Copy Function 'getPackageFromUpload' - Adapt It To Our Needs - Change Function Name To 'myUploadFunction'

00:16:58

Let's copy the function and adapt it to our needs and just put it into our class. In components you go to the installer, then, model, and then on install, and scroll down till you see one that says 'getPackageFromUpload'. 00:17:29 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 be useful for us in this case. We'll take some stuff away and add our own little messages, so we don't depend on the INSTALLER MSG. We'll just copy this whole function(see video) all the way up there, control copy it, go to look, our class and I'm going to paste it in here above. So there are some key things I would like to change here for example. 00:18:23 I'm thinking let's change the function name and we call it 'myUploadFunction' for now. We going to pass it the input. We don't want that to be done twice. 00:18:50 We know this is going to be 'jform', and we definitely don't want to have it 'raw', because it's an image. We want this to be 'array' that we can check the values. This looks fine. We can say here 00:19:19 set 'uploads are not enabled in php', that seems fine. We can take these messages and put them in here, because JCB is going to grab this once we put it into our component, and going to add it to our language files for our component, this is really want to make sure that it happens. We don't need the zlib because we are not going to unzip anything. We could remove this part(see video).

Checking If Userfile Is An Array

00:19:58

There is going to be a check where we've got a file set of files here. It's got a check wither that userfile is an array. If it's not, it want to say no file was selected or no file was uploaded. We can just type that in. If at this point we detect any errors, we basically want to erase those errors and break out of this upload. So let's see UPLOADERROR, WARNINGUPLOADERROR. I suppose we need to go look at these language strings in the language file of the installer to correctly translate these. I'm not going to do that, so I'm just going to say error. 00:20:59 You can do that on your own.

Checking The Upload Size

00:21:02

What we want to check here, is our upload size. We 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. Again it will give an error saying 'file to large'. The same here, it's checking again, this time it first checked whether it's in the INI files. Here it checks the file size that there is a file size. We can again say 00:21:57 'Upload error' again you should just check what is the actual file language string and replace that with the English version.

Build An Appropriate Path, Create The Path, Create Temporal Source - Move File With Jfile Upload

00:22:08

Then we build appropriate path. We take the filename, create the path, we 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 There are still validation to do. In our script what we just grabbed from the uploader class, we do this unpack. We don't need to unpack, we want to do some other things here which are more appropriate for our purpose.

'Unpack the downloaded package file' Replaced By A Little Function 'checkUpload'

00:22:57

First thing, I'm going to move the get classes function up a few lines, and also make sure to have the folder class available in case. Then I'm going to clean the name, so that everything is fine and well and anywhere later we might not have any issues. We still have what we did here before. This 'Unpack the downloaded package file' is going to be replaced with a little function which I started writing called 'checkUpload'. I'm going to change this function as one of my own functions which I've already adapted for other projects and in the past. Like you've seen I have already move this one out. 00:23:38 That one can stay like that.

Do A Little Check-up - Set To False Or True

00:23:41

Over here(see video) we are going to just do a little check-up to make sure that the package which we are going to give back and which were used to store in a database and all the rest is. Here we just going to grab the result of this which basically going to be true or false and we going to check if it's false, we going to say 'Upload failed'. If we still going to do this check. Now we've got this 'checkUpload' in place and we first going to get the format from the file.

Use Custom Script To Validate Our Format

00:24:32

We are going to use a little custom script here to validate our format. 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 go and add in config drop down, with a list of Allowed Formats. To sort of sidestep that, 00:25:07 instead of trying to explain all that, I'm just going to go and remove this function here(see video). You could pause this video and copy that down if you know what I'm talking about, but then in that case you don't need to pause, you know how to type it. I'm going to remove that and just add some format which I'm ok with this '.jpg'. 00:25:30 I'm ok with that format and I'm also going to be ok with '.jpeg', and '.png', and then '.gif'. So those are the formats that I'm 00:25:56 going to say those are fine, of course because it's really the file extension that we are checking here. We are not going to use a global value here, we are just going to use the fileFormat, allowedFormats, and then here we would going to check, is this fileFormat in allowedFormat array. If it's not, we are going to say 'Invalid file format' 00:26:27 There we go and it is going to error out, but with this error out we will need to do some house cleaning. We will have to look at that at the moment.

Passes The Destination Where We Moved The File

00:26:40

So what I think I'll do is I'm going there also passes the destination of where we've moved the file. Then because that's where the file currently is. Here we got the temporal destination which is in the temporal path, the temporal folder of the Joomla website. It's not where we want to end up. 00:27:02 It's just where we are going to keep the file until we happy that it's safe. We got it in the temporal destination, we moved it up there, and now we checked if something happened. Do check the upload. Here if we find that this 'archivename' file 00:27:26 is problematic, we are going to have to remove it. We are going to have a new little class here. We are going to say removeFile. I think that's right. We are going to write this little removeFile in a moment. Let's say for some reason you'll see here, I've got a lot of validation whether the user has permission to upload stuff. I'm going to remove that now, because 00:27:58 it's going to be a little bit beyond the scope of what we're explaining.

Pass A Package Back

00:28:07

Now I want to pass a package back which we are happy with, saying this is where our file is, and what its name is. We are going to do that. That's the directory, and that is the package name(see video). We are going to pass that back to the package. We could since we've got the format and maybe you want to store that. 00:28:41 We could also add 'format' to the array. Everything looks good. The package name, directory path, as well as the format and we will return that back as the package and we give the package back to the model. In the save function we are going to call this 'myLoadFunction'. 00:29:17 We said we are going to pass it the 'input' field, the input value, since we're already getting it, why get it again. We are going to pass that over here(see video). 00:29:44 Now all that needs to be done is over here instead of this function $input->files->get('jform',null,'array') we can now do the following: $this->myUploadFunction($input). I will end up with that '$userfiles' package 00:30:07 information right in this variable, and we can then just exit out to see how that will look.

Create Remove File

00:30:16

We still need to create remove file, if we have a problem. Why do we need to remove the file? Well all the way up till here(see video) the files is not on the server. It is somewhere in memory. Somewhere in limbo. If something happens 00:30:40 and we returned false here, we don't need to do anything, it's not really anywhere it's just going to disappear. Same happening here or there or any of these other areas before here. But the moment we do this Move uploaded file $p_file = JFile::up;oad(tmp_src,$tmp_dest, false,true), we are moving the file to the server, if that is true, it is on the server. When we pass the destination and the filename to the 'checkUpload', we already have the file on the server. 00:31:12 If we then discover that this file is not legit, we don't want it, we must remove it, or any other checks we do, even if it's something more complicated than this, you must remove it, because it's on the server. Our little remove function, I'm trying to save a some unnecessary things. I'm going to sniper it up a bit because already up here 00:31:36 we have the classes for the file in a folder, so we don't need to load that again. We going to pass it the destination, which is the 'folder', that's going to be fine. All of this(see video) we are able to clear out the name we don't need this(folder) we just need to package name. 00:32:04 We are going to ask, is it a file? Then delete, then if there's something not right, we are going to do clean path and just check again and delete. This should remove the file from the server. You can test that if something's wrong, just Google it, and tweak it but this should be ok. We are going to pass 00:32:29 the destination path, which is the one where we moved it, remember up here. That's the same path we are passing all the way down to the 'removeFile' function and then it will clear it out for us. If everything is fine and it doesn't need to, we are going to continue on and then pass it back to the package 00:32:56 which will be returned to our save method.

So all of this code that I just wrote, I'll take it and dump it on GitHub as a gist. You could go there and I'll give a link to it, but this is quickly coded, I mean I'm sure that you could improve it. We copy it and paste stuff from other classes 00:33:23 to get this working, but there's nothing really to extravagant. The only thing that we didn't go into is exactly what does cleaning do, and what does apply do and those kind of things. You can go through the Joomla libraries and check exactly what it does. But for the most part it's just generic PHP functionality. That it would be enough to upload the file. 00:33:57 So let's give it a spin. Back over here, if we click the X on top of the page, it will take us out of the item. We can just click Looks, then Name and we would have again to select the image. There we have the image. We can click save and see what happens. Oops we have a bunch of errors here. Let's see undefined index. We've got trouble. Let me go see why. I didn't pay close 00:34:36 attention.

I'm just going to do another var_dump(input); I can get the exact way of most possibly need to do for each. It might want to upload more than one. Or we could force it to just use the first. I think I wrote something about this already somewhere. Let me just check. Think this should do the trick. If it's an array we just want to grab the first value out of the array. If you got multiple fields 00:35:09 that are uploading files, in the same view you going to have to change this little chunk ($userfile = array_values($userfiles)[0] here. Because then you are going to have to deal with each of those files for each loop inside of this function. Which would mean you could skip all these as they are Global to everyone of them and then from about here(see video), you would add it for each loop. 00:35:39 Then here you won't echo, well you won't break out, you just grab the error into an array which you would have eventually then pass. Targeting each specific package. Then return package, all the successes as well as the errors and handle it somewhere else. So since we are just uploading one file, I'm not going to 00:36:07 do all that, just going to grab that first value and we are going to work with that first value. Let's go back and try again. Save. Again we have a problem. Not userfiles but userfile. 00:36:32 It become so little changes like that can throughout errors. At last we have the file on the server. What I had to do is, I had to take away these points here(see video), I had that one part wrong. It won't need the point, must be without it, and you'll see that now there is our file in our temporal folder. It is on 00:37:03 the server. We have the path and the name, and all those things. Everything now is good.

Moving The File To Its Final Location

00:37:14

We can now move the file to its final location. We could deal with moving the file to its final location here in our save class, or we can again have another function which we pass the $userfile value to, which then moves the file to where we would want every image file to go. Let me quickly type that out. Here in our package, we've got the file name, that's important, and we got the full path which is where the file currently is, 00:37:58 and what format it is.

More Values - Instead Passing Userfile Pass The Whole Array(See Video)

00:38:00

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 $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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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