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 11:35:50 +02:00
parent 31d21e00af
commit aa19be41c9
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,19 +23,22 @@ I might as well add it now and place it under 'Size', and add that new attribute
[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'll see that it's also showing up in the XML field definition. This is the beginning of setting up the File field type [00:03:55](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m55s) to your component. I'm just going to call this name: image, and then here at label we can just say File. Well let's call type: 'image'. Description: 'Choose an image from computer with maximum 100Kb'. Most of these other values we could take away. We will come back to this. Once we've added to the component and started looking [00:04:34](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s) at some of the other things that must be done. 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 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.
### Add File Field Type - Image(file)
[00:04:54](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m54s)
Now we go to our Admin View, and that's this Look. I'm going to go directly to it fields, I could add that File Field type. Where will I place this. There are two tabs. [00:05:21](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m21s) I think let's do it in the more area, add it in the bottom. Add Image and we'll see there are quite a few files. Image, I think it should say file. That should do it. [00:05:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) Let's make the Alignment full width for now. Then in Order in Edit one. Save and close. If we should open the Admin View, we should see the new Field has been added and it is set to being in the Full Width in [00:06:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m15s) Tab, and More in Tab. We could now compile the component as a beginning to see how it will work out. Compile it, and then install it. Then have a look at it. [00:06:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m39s)
Now go to our Admin View, and that is this 'Look'. I'm going to go directly to its fields, I could add that File Field type. [00:05:21](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m21s) Let's do it in the more area, add it in the bottom. Add 'Imag'e and we will see there are quite a few files. 'Image', it should say 'Image[file]'. That should do it. [00:05:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) Let's make the Alignment full width for now. Then in Order in Edit one. Save and close. If we should open the Admin View, we should see the new Field has been added and it is set to being in the Full Width in Tab, and 'More' in Tab.[00:06:15](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m15s) We could now compile the component as a beginning to see how it will work out. Compile it, and then install it. Then have a look at it. [00:06:39](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m39s)
Let us say create a new demo. Go to 'More'. Here we see the file. So it is telling us File(one). We have a problem, there are two fields with the same name 'image'. I will have to go change this. [00:07:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m06s) I'm going to uninstall this. Then go back to the fields because it is the last one I have created. Let's go to the end, 'image', and lets change the name [00:07:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m36s) to 'banner'. I think we will use 'banner' and we will call Name on top of the page also 'Banner'. The field type is file, but will use the label 'banner' and save and close.
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 us say create a new demo. Go to more. Here we see the file. So it's telling us File(one). We have a problem, we've got two fields with the same name image. I'll have to go change this. [00:07:06](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m06s) I'm going to uninstall this. Is going to be the easiest way to do that. Then go back to the fields because it's the last one I'm created. Let's go to the end, image, and lets change the name [00:07:36](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m36s) to banner. I think we'll use banner and we'll call Name on top of page also Banner. The field type is file, but will use the label banner and save and close.
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 doing that is not good practice. It usually doesn't come out right in events, especially with history, because it is only tracking one field. When it checks the history, that field name doesn't 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 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 if we go and have a look, we should see a different reality here. Great Banner. [00:09:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m07s) Its got all the necessary information. Obviously this 600.00MB is set in your server. You can click Browse and select a Image. I'm going to do that. So I got this autumn_tree_forest_building_grass.jpg that I've selected. 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 I need to do and then save.
### Needs To Be A Server Side - Needs To Validate, Move, Check The File - Make Sure: It's The Correct File, Secure The File, and Then Place The Files Path Back Into Fields