joomla/Component-Builder
joomla/Component-Builder
38
23
Fork 11
Code Issues 81 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-20 09:12:14 +02:00
parent b02414e3e6
commit d70d5747e2
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,7 +120,7 @@ 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) [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 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. 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 are 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 ### Pass A Package Back
@ -133,7 +133,7 @@ Now I want to pass a package back which we are happy with, saying this is where
[00:30:16](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m16s) [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 are 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.
@ -197,20 +197,19 @@ Now we have to add the Script that needs to be added to the save method. Here is
[00:50:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m13s) [00:50:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m13s)
JavaScript will be used to do this. We have 'Add JavaScript' to 'view file' or 'Add JavaScript' to the 'view footer'. So it may be decided 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) Save that. Go out and compile this component and install and then go look at its code. In our save class, we have '`upload the image`' and it is right. [00:51:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m56s) Search for our function. There is our function, in the same class that has been added through the JCB interface. It was not lost.<<<<<<< JavaScript will be used to do this. We have 'Add JavaScript' to 'view file' or 'Add JavaScript' to the 'view footer'. So it may be decided where to add the Javascript. Do we want to add JavaScript in a file that gets included in the header of the document or does 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) Save that. Go out and compile this component and install it and then go look at its code. In our save class, we have '`upload the image`' and it is right. [00:51:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m56s) Search for our function. There is our function, in the same class that has been added through the 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. It's not exactly the same place we originally placed it, but it is in the same class and it is what we wanted. We wanted those classes to be available to us. Now look at the view and see where is that JavaScript going to be added. Close images, then go to `com_demo`, `view` and `look`, and `edit.php`.[00:52:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m31s) We are looking at that specific view, and here is the javaScript. It has been added 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 and use it to render the image in its appropriate place. <<<<
### To Know Where The Values Are? ### To Know Where The Values Are?
[00:53:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m30s) [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 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. 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 is fine. Let's take it to the top, we have added it here above everything, it should show now. Refresh, that is what we want to see. [00:55:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m11s) It is publicly accessible, there is the `banner` value. We can check whether there is a value in this `/images/autum trees forest building grass.jpg'`, whether it is a string and has a value because we know we are 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) below its appropriate placement. That is 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 see exactly where is what, how does it look and how do I get to it?
Back in JCB we are 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`, use 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::` . If that is true, we want to load the image because then it exists. [00:57:01](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m01s) We want to see where do we want to add this image, it is below the upload. I am going to have it show up like a normal image. We are going to do some `jQuery`. We are doing this `<img src=` and `echo` the item banner because we know it is a string and can add a class. You can target this class and make it nice with CSS, add CSS to view. [00:57:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m30s) Add the class name that you are going to target with your CSS and 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(See video), 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)`. [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 is 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 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.
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 ### Changing Of Image - Won't Remove Old One
[00:58:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m59s) [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 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. Now to show you it in action, we are going to change the image. It will not remove the old one, but it will immediately show you the new one once we click save. A different image has been selected from my computer and clicks 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 am quickly going to show you a URL where you can go and get this custom script and 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 comments 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, in the Gits where the URL is, or you can go there and make comments there and we will make pull request and fix it up.