joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 80 Pull Requests Projects 4 Wiki Activity

Updated 056 How to use the file field type to upload a file in JCB (markdown)

Amigo 2019-09-17 12:30:27 +02:00
parent 01f872976a
commit 9b543df9ec
1 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md

@ -120,42 +120,42 @@ We are going to use a little custom script here to validate our format. In my co
[00:26:40](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m40s)
I am going to also pass it the destination of where we have moved the file because that is where the file currently is. Here we got the temporal destination(` $tmp_dest` ) which is in the temporal path( `'tmp_path'`), the temporal folder of the Joomla website. It is not where we want to end up. [00:27:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m02s) It is just where we are going to keep the file until we happy that it is 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](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m26s) 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 is right. We are going to write this little `removeFile` in a moment. Here is a lot of validation whether the user has permission to upload stuff. It can be removed, because it is going to be a little bit beyond the scope of what is explained.
I am going to also pass it the destination of where we have moved the file because that is where the file currently is. Here we got the temporal destination(` $tmp_dest` ) which is in the temporal path( `'tmp_path'`), the temporal folder of the Joomla website. It is not where we want to end up. [00:27:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m02s) It is just where we are going to keep the file until we happy that it is 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](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m26s) 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 is right. We are going to write this little `removeFile` in a moment. Here is a lot of validation on whether the user has permission to upload stuff. It can be removed, because it is going to be a little bit beyond the scope of what is explained.
### Pass A Package Back
[00:28:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m07s)
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 is the directory, and that is the package name(see video). We are going to pass that back to the package since we have got the format and maybe you want to store that. [00:28:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m41s) '`format`' could also be added 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](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m17s) Pass it the '`input`' field, the input value, since we are already getting it, why get it again. We are going to pass that over here(see video). [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 `$input->files->get('jform',null,'array')` we can now do the following:
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 is the directory, and that is the package name(see video). We are going to pass that back to the package since we have got the format and maybe you want to store that. [00:28:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m41s) '`format`' could also be added 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](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m17s) Pass it the '`input`' field, the input value since we are already getting it, why get it again. We are going to pass that over here(see video). [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 `$input->files->get('jform',null,'array')` we can now do the following:
`$this->myUploadFunction($input)`. I will end up with that '`$userfiles`' package information right in this variable, and then just exit out to see how that will look.
### Create Remove File
[00:30:16](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m16s)
We still need to create remove file, if we have a problem. Why do we need to remove the file? Well all the way up till here(see video) the files is not on the server. It is somewhere in memory. [00:30:40](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m40s) If something happens and we returned false here, we do not need to do anything, it is not really anywhere it is just going to disappear and the same happens to these other areas (See Video). But the moment this `Move uploaded file $p_file = JFile::up;oad(tmp_src,$tmp_dest, false,true)` is done, we are moving the file to the server, if that is true, it is on the server. When we pass the destination and the filename to the '`checkUpload`', we already have the file on the server. [00:31:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m12s) If it is then discovered that this file is not legitimate, we must remove it, or any other checks we do, even if it is something more complicated than this, it must be removed, because it is on the server. With this little remove function `(>removeFile`) some unnecessary trouble might be avoided I am going to sniper it up a bit because we have already up here the classes for the file in a folder, so it is not necessary to load that again.[00:31:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m36s) Then pass it the destination, which is the '`folder`'.
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. [00:30:40](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m40s) If something happens and we returned false here, we do not need to do anything, it is not really anywhere it is just going to disappear and the same happens to these other areas (See Video). But the moment this `Move uploaded file $p_file = JFile::up;oad(tmp_src,$tmp_dest, false,true)` is done, we are moving the file to the server, if that is true, it is on the server. When we pass the destination and the filename to the '`checkUpload`', we already have the file on the server. [00:31:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m12s) If it is then discovered that this file is not legitimate, we must remove it, or any other checks we do, even if it is something more complicated than this, it must be removed, because it is on the server. With this little remove function `(>removeFile`) some unnecessary trouble might be avoided I am going to sniper it up a bit because we have already up here the classes for the file in a folder, so it is not necessary to load that again.[00:31:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m36s) Then pass it the destination, which is the '`folder`'.
All of this(see video) may be cleared out. We do not need this(`folder`) but only the package name. [00:32:04](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) Is it a file? Then delete, then if there is something not right, we are going to do `path::clean` and just check again and delete. This should remove the file from the server. Google it to test if something is wrong, , and tweak it but this should be OK. We are going to pass the destination path, which is the one where we moved it, remember up here. [00:32:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m29s) That's the same path we are passing all the way down to the 'removeFile' function and then it will clear it for us. If everything is fine and it does not need to, we are going to continue and pass it back to the package which will be returned to our save method.
All of this(see video) may be cleared out. We do not need this(`folder`) but only the package name. [00:32:04](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) Is it a file? Then delete, then if there is something not right, we are going to do `path::clean` and just check again and delete. This should remove the file from the server. Google it to test if something is wrong, and tweak it but this should be OK. We are going to pass the destination path, which is the one where we moved it, remember up here. [00:32:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m29s) That's the same path we are passing all the way down to the 'removeFile' function and then it will clear it for us. If everything is fine and it does not need to, we are going to continue and pass it back to the package which will be returned to our save method.
### Dump Code on GitHub as Gist
[00:33:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m33s)
So all of this code that I just wrote, gets dumped on GitHub as a gist. This can be quickly coded. Copy it and paste stuff from other classes to get this working, but there is nothing really complicated. [00:33:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m23s) The only thing that we did not 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 is just generic PHP functionality. That it would be enough to upload the file.
So all of this code that I just wrote, gets dumped on GitHub as a gist. This can be quickly coded. Copy it and paste stuff from other classes to get this working, but there is nothing really complicated. [00:33:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m23s) The only thing that we did not go into is exactly what does `cleaning` do, and what does `apply` do and that kind of things. You can go through the Joomla libraries and check exactly what it does. But for the most part, it is just generic PHP functionality. That it would be enough to upload the file.
[00:33:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m57s)
So let's see if it works. 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. Click save and see what happens. Oops, here is a bunch of errors. It indicates 'undefined index'.
So let's see if it works. 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. Click save and see what happens. Oops, there is a bunch of errors. It indicates 'undefined index'.
I am just going to do another `var_dump(input);` Most possibly it needs to be done for each. It might want to upload more than one or we could force it to just use the first. Think this should do the trick. If it is an array we just want to grab the first value out of the array. [00:35:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) If you got multiple fields that are uploading files in the same view you need to change this little chunk `($userfile = array_values($userfiles)[0]` because then you are going to have to deal with each of those files for each loop inside of this function which would mean that you could skip all these as they are Global to everyone of them and then from about here(see video), you would add it for each loop. [00:35:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m39s) Do not `echo` here, well you will not break out, you just grab the `error` into an `array` which you would eventually pass, targeting each specific package. Then return package, and all the successes as well as the errors and handle it somewhere else. So since we are just uploading one file, I am not going to do all that, only to grab that first value and work with that first value. [00:36:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m07s) Go back and try again. Save. Again there is a problem. It should not be `userfiles` but `userfile`. [00:36:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s)
I am just going to do another `var_dump(input);` Most possibly it needs to be done for each. It might want to upload more than one or we could force it to just use the first. Think this should do the trick. If it is an array we just want to grab the first value out of the array. [00:35:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) If you got multiple fields that are uploading files in the same view you need to change this little chunk `($userfile = array_values($userfiles)[0]` because then you are going to have to deal with each of those files for each loop inside of this function which would mean that you could skip all these as they are Global to every one of them and then from about here(see video), you would add it for each loop. [00:35:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m39s) Do not `echo` here, well you will not break out, you just grab the `error` into an `array` which you would eventually pass, targeting each specific package. Then return package, and all the successes as well as the errors and handle it somewhere else. So since we are just uploading one file, I am not going to do all that, only to grab that first value and work with that first value. [00:36:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m07s) Go back and try again. Save. Again there is a problem. It should not be `userfiles` but `userfile`. [00:36:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s)
At last we have the file on the server. These points should be removed(see video). Now the file is in our temporal folder. [00:37:03](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m03s) It is on the server. We have the path and the name, and all those things.
At last, we have the file on the server. These points should be removed(see video). Now the file is in our temporal folder. [00:37:03](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m03s) It is on the server. We have the path and the name, and all those things.
### Moving The File To Its Final Location
[00:37:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m14s)
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 too, which then moves the file too where we would want every image file to go. Let me quickly type that out. Here in our package, is the file name, that is important, and we got the full path which is where the file currently is, and what format it is.
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 in which we pass the `$userfile` value too, which then moves the file too where we would want every image file to go. Let me quickly type that out. Here in our package, is the file name, that is important, and we got the full path which is where the file currently is, and what format it is.
### More Values - Instead Passing Userfile Pass The Whole Array
@ -169,46 +169,47 @@ Now we will have all the information at our disposal which has been used up here
[00:40:48](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m48s)
First, get some constants to use. This `JPATH_ROOT` will be used as it is always going to be the root path to our website. Then next, add the path to the images. It is where the image is going to be placed. I am going to copy `JPATH_ROOT`, and add the path, the relation to the root folder to the `banner` in the database. It is only that you will later know where the file is, then on the front end of the site, where you are going to use this value, you will have to get the value from the database. [00:41:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m33s)<<<<<<<<<<<<<<
First, get some constants to use. This `JPATH_ROOT` will be used as it is always going to be the root path to our website. Then next, add the path to the images. It is where the image is going to be placed. I am going to copy `JPATH_ROOT`, and add the path, the relation to the root folder to the `banner` in the database. It is only that you will later know where the file is, then on the front end of the site, where you are going to use this value, you will have to get the value from the database. [00:41:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m33s)
It is still necessary to create the actual image html tag to load the image or whatever you are going to do with this file. You still need to code that, nothing of that is going to be done. You are going to have the path to exactly where the file is because you are storing it that way in the 'banner' column, that is the field. Here we are taking the root path '`JPATH_ROOT`' and that exact value and we are moving the full path, which we have build up here, which is the current destination. [00:42:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m02s) We are going to move it from the full path to the final destination. At this point, we have got the image on the server and are moving it to the correct location. We are storing the value in the database, and we are done with saving and uploading the actual value. [00:42:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m28s)That would be all that is required. In any of these steps, you might want to do some more things, be more secure, be more validating, because it is not only images you are going to upload. If you upload PDF, if you are uploading another kind of content, you are going to have to do some googling to anywhere in these steps, especially in this check upload area, to do the correct validation. [00:43:03](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m03s) At this point the file is on your server, and you need to make sure that it is the right file. Now, this is not airtight because this checks that the file's type is one of these, the extensions. [00:43:22](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m22s) It does not validate the file to being an image. There are more secure ways to do that. If you do use them, then on the server-side if your application is going to be running, with shared environments, it will cause problems because some of those functions are not available in all shared environments. [00:43:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m42s) But if you want to be very specific, you could help the user along who uses your application to enable those functions on their server, and by that giving them extra security with uploading of files. [00:44:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m14s) In general this sort of implementation is how most are doing it. <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
You'll still need to create the actual image html tag to load the image or whatever you are going to do with this file. You're still need to code that, nothing of that's going to be done. You are going to have the path to exactly where the file is, because you're storing it that way in the banner column, that's the field. Here we taking the root path 'JPATH_ROOT' [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, which is the current destination. We are going to move it from the full path to the final destination. That is really it. At this point we have got the image on the server and we are moving it to the correct location. 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. That would be all that's required. In any of these steps, you might want to do some more things, be more secure, be more validating, because it's not only images you are going to be uploading. If you are uploading PDF, if you are uploading other kind of content, [00:42:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m56s) you are going to have to do some googling to anywhere in these steps. Especially in this check upload area, to do the correct validation. 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 checks that the files type is one of these, the extensions. [00:43:22](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m22s) It doesn't validate the file to being an image. There are more secure ways to do that. If you do use them, the server side if your application is going to be running, with shared environments, [00:43:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m42s) then it will cause problems because some of those functions are not available in all shared environments. But if you want to be very specific, you could 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 a very big topic. [00:44:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m14s) In general this sort of implementation is how most are doing it.
### Successfully Saved - Show No File Detected - Might Show The File Currently In Database
[00:44:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m31s)
We have moved everything in place. Let's give it a trial run. It says that it's been saved successfully. But no file selected is shown here. We might want to show the file that is currently in the database, instead of this upload or show the upload still, but let's say someone decides to upload another one, that changes it, and remove the old one and adds the new one, and displays the little image as it is in the database. First let see if it is in the database. [00:45:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m12s) In the database we see there is our file, and it is set to be in /images/autumn_trees_forest_building_grass.jpg. Let's see if it was moved to the place. In the folder structure we are going to open images, we are going to click on images, then scroll down and see [00:45:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m46s) autumn tree. It is in its place. The actual image does now exist in the image folder, it is been uploaded and it is in the database, although our little snippet says that it can't see it.
We have moved everything in place. Let's give it a trial run. It says that it's been saved successfully. But no file selected is shown here. We might want to show the file that is currently in the database, instead of this upload or show the upload still, but let's say someone decides to upload another one, that changes it, and remove the old one and adds the new one, and displays the little image as it is in the database. First, let see if it is in the database. [00:45:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m12s) In the database we see there is our file, and it is set to be in /images/autumn_trees_forest_building_grass.jpg. Let's see if it was moved to the place. In the folder structure, we are going to open images, we are going to click on images, then scroll down and see [00:45:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m46s) autumn tree. It is in its place. The actual image does now exist in the image folder, it is been uploaded and it is in the database, although our little snippet says that it can't see it.
### Grab Custom Scripting And Add It To The Component In JCB
[00:46:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m09s)
Before we continue with that kind of custom scripting, we need to take what we have done so far, and added to JCB. We've done it in the IDE, and if we compile and install this component now, you will overwrite everything you've written, and boom it's gone. Let's go grab that custom scripting and added to the component in JCB. (See video) We want to grab everything from my uploads function, [00:46:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m41s) we want to do check upload, and remove file all of that we want to get. We are going to say cut, and have that in the clipboard, then go to JCB, in the Look Admin Views which is where all this is happening. We can open up then there is a place called Custom Buttons. You are going to say yes. [00:47:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m07s) Then there is the PHP(controller method), we are not adding anything there, but there is the PHP(model method), this is the place for us to add some script to the model. We are going to paste what we've cut, right in here, and over here in the PHP List View (controller method) we're not adding anything and also in this PHP List View (model method) [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) we're not adding anything. We are adding that which we have written to the model method, at your PHP here is going to go into the model as methods. This is the methods, that 'checkupload' is a method, that 'myUploadFunction' is a method. 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 at this point dealing with if you upload a new file that it removed the old one. That should still be further custom scripting. At this point all add the new file. It won't remove the old one. It could be that it'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, so you could fix this quite easily. I'm not going to show you how to do that. I want to encourage you to study up some of your PHP as well.
Before we continue with that kind of custom scripting, we need to take what we have done so far, and added to JCB. We've done it in the IDE, and if we compile and install this component now, you will overwrite everything you've written, and boom it's gone. Let's go grab that custom scripting and added to the component in JCB. (See video) We want to grab everything from my uploads function, [00:46:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m41s) we want to do check upload, and remove file all of that we want to get. We are going to say cut, and have that in the clipboard, then go to JCB, in the Look Admin Views which is where all this is happening. We can open up then there is a place called Custom Buttons. You are going to say yes. [00:47:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m07s) Then there is the PHP(controller method), we are not adding anything there, but there is the PHP(model method), this is the place for us to add some script to the model. We are going to paste what we've cut, right in here, and over here in the PHP List View (controller method) we're not adding anything and also in this PHP List View (model method) [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) we're not adding anything. We are adding that which we have written to the model method, at your PHP here is going to go into the model as methods. This is the methods, that 'checkupload' is a method, that 'myUploadFunction' is a method. 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 at this point dealing with if you upload a new file that it removed the old one. That should still be further custom scripting. At this point, all add the new file. It won't remove the old one. It could be that it'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, so you could fix this quite easily. I'm not going to show you how to do that. I want to encourage you to study up some of your PHP as well.
### Adding the Script To The Save Method
[00:48:43](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m43s)
Now we need to add the Script that we are adding to the save method. Here is the Add PHP(save method - before data modelling). This is where we want to jump in. Like it says there the value are in the data array. We are going to go back to the IDE, and scroll up to this little snippet, because this is everything new. Let's just cut that as well [00:49:23](https://www.youtubnae.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m23s) and go back to the JCB interface, and paste it in there. In the Add PHP(save method - before data modelling), we have this little snippet that will be executed, and the same goes with in the Custom Buttons area, we've got in the [00:49:45](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m45s) PHP(model method) we've got our classes that are being added. Now we said if we open the item, that means after we've saved it, we want to 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.
Now we need to add the Script that we are adding to the save method. Here is the Add PHP(save method - before data modelling). This is where we want to jump in. Like it says there the value is in the data array. We are going to go back to the IDE, and scroll up to this little snippet, because this is everything new. Let's just cut that as well [00:49:23](https://www.youtubnae.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m23s) and go back to the JCB interface, and paste it in there. In the Add PHP(save method - before data modelling), we have this little snippet that will be executed, and the same goes within the Custom Buttons area, we've got in the [00:49:45](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m45s) PHP(model method) we've got our classes that are being added. Now we said if we open the item, that means after we've saved it, we want to 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.
### Add Script To View File Or Add JavaScript To View Footer
[00:50:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m13s)
JavaScript to the rescue. I'm going to use JavaScript to do this. We have add our script to the view file or add JavaScript to the view footer. That means we can decide where to add the Javascript. Do we want to add JavaScript in a file that gets included in the header of the document or do we want to add it to the bottom of the view as a snippet. That is what we want to do, because we want to use PHP. We are going to do some PHP in Add JavaScript(view-footer) area. [00:50:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m50s) Where as in this Add JavaScript(view-file) area we cannot do PHP. So to show you exactly where this is going to come out, we are going to add a comment: add javaScript here, and I'm going to show you how we are going to do <?php//also workes?> [00:51:20](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m20s) We are going to save that. We can go out of here and go compile this component and install and then go look at its code. In our save class, we have 'upload the image' and that is all good and right. [00:51:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m56s) Let's search for our function, and there is our function, also in the same class that's been added through JCB interface. 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. Now we want to go look at the view and see where is that JavaScript going to be added. We'll close images, [00:52:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m31s) then go to com_demo, view and look, and edit.php. We are looking at that specific view, and you will see [00:52:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m59s) the javaScript. It added it to our script area and I am able 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 are going to check whether that Banner Value is available to us on this page. Then we are going to use it to render the image in its appropriate place.
JavaScript to the rescue. I'm going to use JavaScript to do this. We have added our script to the view file or add JavaScript to the view footer. That means we can decide where to add the Javascript. Do we want to add JavaScript in a file that gets included in the header of the document or do we want to add it to the bottom of the view as a snippet. That is what we want to do because we want to use PHP. We are going to do some PHP in Add JavaScript(view-footer) area. [00:50:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m50s) Whereas in this Add JavaScript(view-file) area we cannot do PHP. So to show you exactly where this is going to come out, we are going to add a comment: add javaScript here, and I'm going to show you how we are going to do <?php//also workes?> [00:51:20](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m20s) We are going to save that. We can go out of here and go compile this component and install and then go look at its code. In our save class, we have 'upload the image' and that is all good and right. [00:51:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m56s) Let's search for our function, and there is our function, also in the same class that's been added through JCB interface. 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. Now we want to go look at the view and see where is that JavaScript going to be added. We'll close images, [00:52:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m31s) then go to com_demo, view and look, and edit.php. We are looking at that specific view, and you will see [00:52:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m59s) the javaScript. It added it to our script area and I am able 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 are going to check whether that Banner Value is available to us on this page. Then we are going to use it to render the image in its appropriate place.
### To Know Where The Values Are?
[00:53:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m30s)
To know where the values are, we will go back to its view.html.php area. We see that it gets the $this->item and it places it in the item global class value. We have the value item. We can therefore check if the banner is in the item. What I will do that you can see what's happening. Copy and then I'm going to go back to the edit.view where we put our html. I'm going to say [00:54:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m09s) php var_dump($this->item); that specific value, and save. Let's go to the interface. We have to add the word 'jexit' and go a little bit up because we got a little fader, it's going to hide this and let's just take that out for now that 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 the page. We got it all broken that's fine. Let's take it to the top, we've added it here above everything, it should show now. Refresh, there we go that's what we want to see. [00:55:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m11s) We see that it is publicly accessible, there's the banner value. We can check whether there is a value in this, whether it's a string and has a value, because we know we controlling that value. The user cannot manually add that value there. It needs to do it through the upload field. We can check whether that has a string, and if it does, we can 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. That's how I get to see the value. 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? You're not dependent on the way not knowing what's going on.
To know where the values are, we will go back to its view.html.php area. We see that it gets the $this->item and it places it in the item global class value. We have the value item. We can therefore check if the banner is in the item. What I will do that you can see what's happening. Copy and then I'm going to go back to the edit.view where we put our html. I'm going to say [00:54:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m09s) php var_dump($this->item); that specific value, and save. Let's go to the interface. We have to add the word 'jexit' and go a little bit up because we got a little fader, it's going to hide this and let's just take that out for now that 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 the page. We got it all broken that's fine. Let's take it to the top, we've added it here above everything, it should show now. Refresh, there we go that's what we want to see. [00:55:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m11s) We see that it is publicly accessible, there's the banner value. We can check whether there is a value in this, whether it's a string and has a value because we know we controlling that value. The user cannot manually add that value there. It needs to do it through the upload field. We can check whether that has a string, and if it does, we can create a little show the image [00:55:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m39s) underneath its appropriate placement. That's how I get to see the value. If you are dealing with something similar, you can do this kind of poking into the result sets to exactly where is what, how does it look and how do I get to it? You're not dependent on the way not knowing what's going on.
Back in JCB we going to say [00:56:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m12s) (isset($this-item->banner), and if it is a string, I'm using the helper class. We've a function in the helper class called 'checkString', 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. This is the way you can use the helper class, use [[[Component]]]Helper:: and there you go. If that is true, we want to load the image [00:57:01](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m01s) because then it exists. We want to see where do we want to add this image, it's underneath the the upload. I'm going to have it show up like a normal image. We are going to do some jQuery. 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. 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, add your CSS to view. Add the the class name that you are going to target with your CSS and you can do all kind of nice things with it. You are going to have alt and banner. We are going to insert it after the banner field. It is to know what this value is, we open one of those views, [00:57:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m57s) and we drill down until we find our inspector, grab maybe the Banner label, then drill until we find the id_jform(banner). That's how I get it. [00:58:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m13s) We just add this after the control group, that it would look nice, fits in with the layout and I think it's broken. That should trigger it. So we saying; //see if we have a banner, if we do, add this javaScript, we are done. Save. Let's compile and in install. [00:58:37](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m37s) Go back to our view. Close this and refresh. Go to More and there is our image.
Back in JCB we going to say [00:56:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m12s) (isset($this-item->banner), and if it is a string, I'm using the helper class. We have a function in the helper class called 'checkString', 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. This is the way you can use the helper class, use [[[Component]]]Helper:: and there you go. If that is true, we want to load the image [00:57:01](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m01s) because then it exists. We want to see where do we want to add this image, it's underneath the upload. I'm going to have it show up like a normal image. We are going to do some jQuery. 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. 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, add your CSS to view. Add the class name that you are going to target with your CSS and you can do all kinds of nice things with it. You are going to have alt and banner. We are going to insert it after the banner field. It is to know what this value is, we open one of those views, [00:57:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m57s) and we drill down until we find our inspector, grab maybe the Banner label, then drill until we find the id_jform(banner). That's how I get it. [00:58:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m13s) We just add this after the control group, that it would look nice, fits in with the layout and I think it's broken. That should trigger it. So we say; //see if we have a banner, if we do, add this javaScript, we are done. Save. Let's compile and in install. [00:58:37](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m37s) Go back to our view. Close this and refresh it. Go to More and there is our image.
### Changing Of Image - Won't Remove Old One
[00:58:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m59s)
Now to show you it in action, we are going to change the image. It won't remove the old one, but it will immediately show you the new one once we click save. Let's do that. I've selected a different image from my computer and then click save. Go back and there is the new image. That is how you could implement the file field type in JCB. You can see there is some custom scripting needed, I'm quickly going to show you a URL where you can go and get this custom script, use it in your own component. Of course [00:59:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m44s) maybe adapt it, change it. At least use it as a place to start with. Start using the Custom Joomla field type for uploading files. If there 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 or even at the snippet itself, that might be a better place, and the Gits where the URL is, or you can go there and make comments there and we will make pull request in the whatever and we'll fix it up, that it will work well for everyone.
Now to show you it in action, we are going to change the image. It won't remove the old one, but it will immediately show you the new one once we click save. Let's do that. I've selected a different image from my computer and then click Save. Go back and there is the new image. That is how you could implement the file field type in JCB. You can see there is some custom scripting needed, I'm quickly going to show you a URL where you can go and get this custom script, use it in your own component. Of course, [00:59:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m44s) maybe adapt it, change it. At least use it as a place to start with. Start using the Custom Joomla field type for uploading files. If there are 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 or even at the snippet itself, that might be a better place, and the Gits where the URL is, or you can go there and make comments there and we will make pull request in the whatever and we'll fix it up, that it will work well for everyone.