From 32c56018ed63abe6861d64a05cd1e08a02a90228 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Wed, 11 Sep 2019 16:35:33 +0200 Subject: [PATCH] Updated 056 How to use the file field type to upload a file in JCB (markdown) --- ...use-the-file-field-type-to-upload-a-file-in-JCB.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md b/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md index ddd67e9..66d1500 100644 --- a/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md +++ b/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md @@ -193,6 +193,15 @@ Now we need to add the Script that we are adding to the save method. Here is the [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 [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. + + ???? -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 it, because you want to use PHP. We are going to do some PHP in this area. [00:50:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m50s) Where as in this is file area we cannot do PHP So to show you exactly where this is gonna come out he's gonna just add a comment here Add Java Script Here And I'm gonna show you how we gonna do PHP P HP Also [00:51:20](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m20s) Works And We gonna save that Now we actually can go out of here and go compile this component And install and then go look at it code So here and our save class We have Upload image And that is all Good and right [00:51:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m56s) Now let's search for our function here And there is our function also in the same class been added Through JCB interface so it was not lost It's not exactly the same place we were originally Placed it but it is in the same class and it's what we want we want those Classes to be available to us here Ok so that part is still good Now we wanna go look at the view And see where that JavaScript going to be added So we'll just close images here [00:52:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m31s) Then go back up and open the view Then wait what Where are we this is the installer You wanna go to the demo that one View look And edit So we are looking at that specific View And you see here Is [00:52:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m59s) The JavaScript Ok So it's added it to our script Area And I actually am able to To do PHP Echo In the script area Which is what We are going to do [00:53:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m14s) We going to check whether that Banner Value is available to us on this page And then we are going to Use it to actually render the image in its Appropriate place Now to know where the values are We go back to its view HTML dot PHP Area [00:53:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m39s) And we see that here it gets the item and it places it in the item Global Class value So we have the value item we can therefore check if banner is in the item So what I will do Just So that you can Sort of see what's happening as well copy that And then I'm gonna go back to the edit View Where we put our html I'm gonna say [00:54:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m09s) I just var dump That specific value And save And so we can see all of that so let's go to the interface Ok we actually have to add the word Exit jexit is actually the correct way of doing it J exit To this and go little up because we got a little fader here it's gonna hide this and just Let's just take that out for now So we can see [00:54:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m44s) What's going on And then let's Refresh or page Ok so we got it all broken that's fine But here at the bottom ah still not showing Let's take it to the top So we've added it here above everything it should actually show now. So let's go see. Refresh There we go that's what you wanna see [00:55:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m11s) So we see that it is publicly accessible there's the banner value so we can check whether there Is actually A value in this whether it's a string and has a value because we know we controlling that value the user cannot actually manually Add that value there It needs to do it through the upload field So we can check whether that has a string And if it does We can just create a little Show the image [00:55:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m39s) Underneath it's appropriate placement Ok so that's how I get to see the value So if you are dealing with something similar You can Do these kind of poking into the result sets to exactly where is what How does it look and how do I get to it and Yeah that way You're not dependent on the way sort of Not knowing what's going on So now here back in JCB we going to say [00:56:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m12s) if We gonna say if It is Set And If It is a string I'm using the helper class here we've got a function in the helper class called check string To see whether it has a length And that it is a string [00:56:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m36s) Not an array or a Boolean or something like that Now This is the way you can Sort of use the helper class to use the brackets brackets brackets Component and then bracket bracket bracket helper colon colon and there you go And If that is true We want to Obviously load the image [00:57:01](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m01s) Because then it exists Now we wanna see where do we wanna add this image and it's actually underneath the the upload I'm just gonna have it show up like a normal image so we gonna just do some jQuery to To do that Ok so we are doing This image source and we are echoing the item banner because we know it's a string We can add a class here Now you can target this class [00:57:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m30s) And make it nice with CSS Just add your CSS is here To view Just here you can add your CSS so here you just add the the class name that you gonna target with your CSS and you can do All kind of nice things with it you gonna have alt and banner And we gonna insert it after the banner Field so the You know is the way we know what this value is Is we open one of those views [00:57:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m57s) like so And we drill down Until we find That's so we use our inspector grab maybe The banner Label then drill until we find the ID J form banner That's how I get it ok [00:58:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m13s) And Then We just add this after It after the control group so that looks nice fits in with the layout and I think it's broken Ok so That should trigger it So we saying See if we have a banner if we do add this JavaScript we done Save Now let's compile and in Install [00:58:37](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m37s) So compile And install Go back to our view And Obviously close this and refresh Now go to more and Walla there is our image Now to show you it in action we gotta change the image It won't remove the old one [00:59:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m05s) But it will immediately show you the new one once we click save So let's do that So I've selected to different image from my computer and then click save And go back and wow there is the new image so that is how you could implement The file Field type in JCB so as you can see there is some custom scripting needed I'm gonna quickly I show you a URL where you can go and get this custom script And use it in your own component And of course [00:59:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m44s) May be adapted to change it At least use it as a place to start with And Start using the Custom Joomla field type For uploading files Thanks for watching Is any questions or even Suggestions of how to do this easier or faster or safer Leave the commons in the area below the video I'll be happy to look at it and [01:00:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m11s) Make any necessary changes to our snippet ok Or even at the snippet itself that might be a better place And the gits where the URL I'm gonna show you now Are you can go there and make comments there and we will just make pull request in the whatever and we'll fix it up so So that works well for everyone thanks for watching \ No newline at end of file +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 So we can see [00:54:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m44s) What's going on And then let's Refresh or page Ok so we got it all broken that's fine But here at the bottom ah still not showing Let's take it to the top So we've added it here above everything it should actually show now. So let's go see. Refresh There we go that's what you wanna see [00:55:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m11s) So we see that it is publicly accessible there's the banner value so we can check whether there Is actually A value in this whether it's a string and has a value because we know we controlling that value the user cannot actually manually Add that value there It needs to do it through the upload field So we can check whether that has a string And if it does We can just create a little Show the image [00:55:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m39s) Underneath it's appropriate placement Ok so that's how I get to see the value So if you are dealing with something similar You can Do these kind of poking into the result sets to exactly where is what How does it look and how do I get to it and Yeah that way You're not dependent on the way sort of Not knowing what's going on So now here back in JCB we going to say [00:56:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m12s) if We gonna say if It is Set And If It is a string I'm using the helper class here we've got a function in the helper class called check string To see whether it has a length And that it is a string [00:56:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m36s) Not an array or a Boolean or something like that Now This is the way you can Sort of use the helper class to use the brackets brackets brackets Component and then bracket bracket bracket helper colon colon and there you go And If that is true We want to Obviously load the image [00:57:01](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m01s) Because then it exists Now we wanna see where do we wanna add this image and it's actually underneath the the upload I'm just gonna have it show up like a normal image so we gonna just do some jQuery to To do that Ok so we are doing This image source and we are echoing the item banner because we know it's a string We can add a class here Now you can target this class [00:57:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m30s) And make it nice with CSS Just add your CSS is here To view Just here you can add your CSS so here you just add the the class name that you gonna target with your CSS and you can do All kind of nice things with it you gonna have alt and banner And we gonna insert it after the banner Field so the You know is the way we know what this value is Is we open one of those views [00:57:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m57s) like so And we drill down Until we find That's so we use our inspector grab maybe The banner Label then drill until we find the ID J form banner That's how I get it ok [00:58:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m13s) And Then We just add this after It after the control group so that looks nice fits in with the layout and I think it's broken Ok so That should trigger it So we saying See if we have a banner if we do add this JavaScript we done Save Now let's compile and in Install [00:58:37](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m37s) So compile And install Go back to our view And Obviously close this and refresh Now go to more and Walla there is our image Now to show you it in action we gotta change the image It won't remove the old one [00:59:05](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m05s) But it will immediately show you the new one once we click save So let's do that So I've selected to different image from my computer and then click save And go back and wow there is the new image so that is how you could implement The file Field type in JCB so as you can see there is some custom scripting needed I'm gonna quickly I show you a URL where you can go and get this custom script And use it in your own component And of course [00:59:44](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m44s) May be adapted to change it At least use it as a place to start with And Start using the Custom Joomla field type For uploading files Thanks for watching Is any questions or even Suggestions of how to do this easier or faster or safer Leave the commons in the area below the video I'll be happy to look at it and [01:00:11](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m11s) Make any necessary changes to our snippet ok Or even at the snippet itself that might be a better place And the gits where the URL I'm gonna show you now Are you can go there and make comments there and we will just make pull request in the whatever and we'll fix it up so So that works well for everyone thanks for watching \ No newline at end of file