From 7fef8136680cead59ce557e03cd8099ab2395f5e Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Wed, 11 Sep 2019 16:50:24 +0200 Subject: [PATCH] Updated 056 How to use the file field type to upload a file in JCB (markdown) --- ...w-to-use-the-file-field-type-to-upload-a-file-in-JCB.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md b/056-How-to-use-the-file-field-type-to-upload-a-file-in-JCB.md index 66d1500..feaff66 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 @@ -199,9 +199,8 @@ JavaScript to the rescue. I'm going to use JavaScript to do this. We have add ou [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. +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. Back in JCB we going to say [00:56:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m12s) +????? -???? - -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 +(isset($ 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