joomla/Component-Builder
joomla
/
Component-Builder
38
20
Fork 11
Code Issues 53 Pull Requests Projects 3 Releases Wiki Activity

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

Amigo 2019-09-09 12:18:18 +02:00
parent aa19be41c9
commit 6d3c2b7cca
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
[00:00:00](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)
(_Click on these time links to see Youtube video_)
We want to add a file field to a component and upload a file and are going to use this Demo component. It got a few Admin Views and the area 'Look'. There is a Site View, 'Looks' and 'Looking'. I am going to add this field to the Look Admin View. First, the field needs to be created and we need to look at the steps that need to be implemented.[00:00:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) Currently, JCB does not out of the box address this. We might think of doing this maybe in the future but because of some of the security risks, it is best you do this yourself because then at least you are under control.
We want to add a file field to a component and upload a file and are going to use this Demo component. It got a few Admin Views and the area 'Look'. There is a Site View, 'Looks' and 'Looking'. I am going to add this field to the Look Admin View. First, the field needs to be created and we need to look at the steps that need to be implemented. [00:00:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) Currently, JCB does not out of the box address this. We might think of doing this maybe in the future but because of some of the security risks, it is best you do this yourself because then at least you are under control.
### Fieldtypes - File - Shows attributes, values, some descriptions, info
@ -17,13 +17,13 @@ If a file is uploaded the Fieldtypes you need to use already exist. So if you go
[00:02:30](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m30s)
I might as well add it now and place it under 'Size', and add that new attributes. Select 'accept', the value and to leave it to be in 'image' and it can be changed. Give it some information as regarding description. Copy that and place in here(see video). We got this new attribute set. Those of you running the latest release of JCB, might already have this there. It only gets added if you do a fresh install. It does not update the database with these values. [00:03:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) Save and close. We got a file types set.<<<<<<<
I might as well add it now and place it under 'Size', and add that new attributes. Select 'accept', the value and leave it to be in 'image' and it can be changed. Give it some information regarding the description. Copy that and place in here(see video). We got this new attribute set. Those of you running the latest release of JCB, might already have this there. It only gets added if you do a fresh install. It does not update the database with these values. [00:03:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m15s) Save and close. We got a file type set.
### Beginning Of Setting Up The File Field Type
[00:03:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m19s)
If we go to Fields and we select the file, you will see that it gives you the Field information and there is the new 'accept' attribute available to us. You will see that it is also showing up in the XML field definition. This is the beginning of setting up the File field type to your component.[00:03:55](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m55s) Just call this name: 'image', and then here at label we can just say 'File'. Call type: 'image'. Description: 'Choose an image from computer with maximum 100Kb'. Most of these other values can be removed. We will come back to this. Once we have added to the component and started looking at some of the other things that must be done.[00:04:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) This is only step A. There are 3 steps to take of which this is the easiest. Up in the top we have Name: add 'image'. Save and close.
If we go to Fields and we select the file, you will see that it gives you the Field information and there is the new 'accept' attribute available to us. You will see that it is also showing up in the XML field definition. This is the beginning of setting up the File field type to your component. [00:03:55](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m55s) Just call this name: 'image', and then here at the label we can just say 'File'. Call type: 'image'. Description: 'Choose an image from computer with maximum 100Kb'. Most of these other values can be removed. We will come back to this. Once we have added to the component and started looking at some of the other things that must be done. [00:04:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) This only steps A. There are 3 steps to take of which this is the easiest. Up in the top, we have Name: add 'image'. Save and close.
### Add File Field Type - Image(file)
@ -35,7 +35,7 @@ Let us say create a new demo. Go to 'More'. Here we see the file. So it is telli
Now let's try again. You know if you have [00:08:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) two of the same fields meaning exactly the same name JCB automatically calls the one image(one), the other one image(two), and that is not good practice. It usually does not come out right in events, especially with history, because it is only tracking one field. When it checks the history, that field name does not match any field. [00:08:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m34s) When it comes to the history and the updating of the database automatically as you add new fields using the same field multiple times is not recommended.
Let's try this again. Install it. Now, we should see 'Banner'. [00:09:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m07s) It got all the necessary information. Obviously this 600.00MB is set in your server. You can click Browse and select a Image. So I got this autumn_tree_forest_building_grass.jpg that has been selected and need to add a Name. [00:09:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) That seems to be all that is necessary and then save. <<<<<<<<<
Let's try this again. Install it. Now, we should see 'Banner'. [00:09:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m07s) It got all the necessary information. Obviously this 600.00MB is set in your server. You can click Browse and select an Image. So I got this autumn_tree_forest_building_grass.jpg that has been selected and needs to add a Name. [00:09:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) That seems to be all that is necessary and then save. <<<<<<<<<
@ -44,14 +44,19 @@ Let's try this again. Install it. Now, we should see 'Banner'. [00:09:07](https:
[00:09:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m56s)
As you can see when I saved the item, it didn't upload anything. The file is not in my system and that's where all of you would end up. You've used file, you've selected the [00:10:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m14s) Banner, whatever you wanted to upload, and just nothing happened and that's because there needs to be a server side which needs to validate the file, move the file, and check the file, and everything. Make sure that it's a correct file, secure the file, and then place the files path back into this Field. [00:10:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) When it puts the value in the database, and it's that process which is to be custom coded. Let's go back to our component. One of the things I like to do before I start coding anything, is really look under the hood, look at what's going on especially if it's the first time I'm doing it. Since many of you, this might be your first time, I'm going to show you some how this is done. It's like inspecting what's going on under the hood and how can I use it. I'm going to open this item again and I'm going to again select our image.
As you can see when I saved the item, it did not upload anything. The file is not in my system and that is where all of you would end up. You have used file and selected the [00:10:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m14s) 'Banner', whatever you wanted to upload, and just nothing happened and that is because there needs to be a server-side which needs to validate the file, move the file, and check the file, and everything. Make sure that it is a correct file, secure the file, and then place the file's path back into this Field. [00:10:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) When it puts the value in the database, and it is that process which is to be custom coded. Let's go back to our component. One of the things I like to do before start coding anything is to look at what is going on especially if it is the first time I am doing it. Since many of you, this might be your first time. I am going to open this item, again and again, select our image.
### Code Editor - Joomla Mount, Administrator, Components, Demo, Models, Look.php
[00:11:27](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s)
Then having the image selected, I'm going to go to the code. I know where the code is for this website.
I'm going to go into my editor and I'm going to the Admin area of this component and of this view, this model, into where it saves the values. Follow me there. We have the Joomla Mount, administrator, components, com_demo, and then models, and look.php. We want to go there. Double click. We going to open and you could just go to almost the bottom of the file. [00:12:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m13s) Look for the save function. That's where we want to sort of poke. It's at this point where all the data from the browser is available to us. We should be able to access it. You could write the helper class and put it in to your helper function, and use the same uploading class if you want to reuse it. You could also scripted right in here. I'll show you how to do it that way. I like reusing scripts so the helper class idea is more appealing, because I put it there and everywhere I [00:12:57](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m57s) use this Fieldtype for file uploading, I just also use this helper class to deal with moving the data and using it.
Then having the image selected, then go to the code. I know where the code is for this website.
I am going into my editor and to the Admin area of this component and of this view, this model, into where it saves the values. (Follow on video). Here is 'Joomla Mount', 'administrator', 'components', 'com_demo', and then models, and 'look.php'. Double click. Go to almost the bottom of the file. [00:12:13](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m13s) Look for the `save function`. That is where we want to sort of poke. It is at this point where all the data from the browser is available to us and be able to access it. You could write the Helper class and put it into your Helper function, and use the same uploading class if you want to reuse it. You could also script it right in here. I like reusing scripts so the Helper class idea is more appealing because I put it there and everywhere I use this Fieldtype for file uploading, I just also use this helper class to deal with moving the data and using it.<<<<<<
### Var_dump Some Values - One Is The Data That Is available, Second One Is Getting The Input