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 15:00:06 +02:00
parent 6d3c2b7cca
commit 60410e389a
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ 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 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.
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 typeset.
### Beginning Of Setting Up The File Field Type
@ -35,11 +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 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. <<<<<<<<<
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.
### 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
[00:09:56](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m56s)
@ -51,42 +47,42 @@ As you can see when I saved the item, it did not upload anything. The file is no
[00:11:27](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s)
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.<<<<<<
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
[00:13:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m07s)
What we going to do is we going to var_dump some values just to the screen, when we click save in the UI to see what happened. Let's do that. Basically two. One is the actual data that is available, and the other is this we getting the input. I'm going to check in files, what do we have there in the input of the application. We can save this changes then go back to the website and just click save. We have got a dump, now if yours doesn't look like this, it might be because you do not have XD bug installed on your server.
We are going to `var_dump` some values just to the screen when we click save in the UI to see what happened. One is the actual `$data` that is available, and the other is this we get the `$input`. Check in `files`, to see what we do have there in the input of the application. Save these changes then go back to the website and just click save. We have got a dump, now if yours does not look like this, it might be because you do not have XD bug installed on your server.
### Add Some Formatting
[00:13:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s)
You would then want to add some formatting, something like this 'echo pre', something like that should do it. Just to add some formatting that it doesn't bulge into one line. I don't need that, I've got XD bug, so it does it for me. We have the data and we see that Banner it's not even the data list, but that's ok. [00:14:43](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m43s) Just scroll down, you will see we dumped a different set of data and if we scroll a little, we'll see that it has a protected value called jform, name, type, tmp name, error, size, all that information. In the tmp name it has the actual file name 'banner' with its tmp location. It creates a temporal location for the file. It tells us the type is image, a jpeg and also gives us the file name. This is the array that you would want to get hold of and [00:15:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m29s) with whom you would want to make changes, move that image, give it a correct name back, after validating it and doing whatever sanitation is required. Then saving that value back into the banner data position which should be in this first array. It isn't there. But it should be here. So you should just create it.
You would then want to add some formatting, something like this '`echo <pre>`', something like that should do it. Just to add some formatting that it does not bulge into one line. Since I have XD bug it is not necessary, so it does it for me. We have the data and we see that Banner is not even the data list, but that is ok. [00:14:43](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m43s) Just scroll down, you will see we dumped a different set of data and if we scroll a little, it has a protected value called `jform, name, type, tmp name, error, size,` all that information. In the `tmp` name it has the actual file name '`banner`' with its `tmp` location.
It creates a temporal location for the file. It tells us the type is `image`, a `jpeg` and also gives us the file name. This is the array that you would want to get hold of and [00:15:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m29s) with whom you would want to make changes, move that image, give it a correct name back, after validating it and doing whatever sanitation is required. Then saving that value back into the banner data-position which should be in this first array. If it is not there you should just create it.
### Get Function - Jform Where The Data Is
[00:15:58](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m58s)
Going back to the code. There is a nice Get function. We can just say jform if you remember that is where the data is, and if we want all the values back as an array or that it should be null if there is none existing. We going to save that and then just upload the file again to see how does it look. Have to do it again because of previous values are actually gone. So we'll click save again, and there we go we've get a little different array, But more useful, An easier to parse.
Going back to the code. There is a nice `Get` function. We can just say `jform` if you remember that is where the data is, and if we want all the values back as an `array` or that it should be `null` if there is none existing. Save that and then just upload the file again to see how does it look. It should be done again because some of the previous values are actually gone. Click save again, and there is a little different array, But more useful and easier to parse.
### Next Step - If Array Exist
[00:16:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m42s)
And now we can take the next step to actually check the this array exist. There is a function or a class in Joomla which already does all of this for you. In fact I would say let's go look at that and let's just copy some of those functions.
And now we can take the next step to actually check this array exists. There is a function or a class in Joomla which already does all of this for you. Let's just copy some of those functions.
### Copy Function 'getPackageFromUpload' - Adapt It To Our Needs - Change Function Name To 'myUploadFunction'
[00:16:58](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m58s)
Let's copy the function and adapt it to our needs and just put it into our class. In components you go to the installer, then, model, and then on install, and scroll down till you see one that says 'getPackageFromUpload'. [00:17:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) This is the function which is really ideal for the task. It takes care of a lot of sanitizing, it has lot of error checks in it, and it should be useful for us in this case. We'll take some stuff away and add our own little messages, so we don't depend on the INSTALLER MSG. We'll just copy this whole function(see video) all the way up there, control copy it, go to look, our class and I'm going to paste it in here above. So there are some key things I would like to change here for example. [00:18:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) I'm thinking let's change the function name and we call it 'myUploadFunction' for now. We going to pass it the input. We don't want that to be done twice. [00:18:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m50s) We know this is going to be 'jform', and we definitely don't want to have it 'raw', because it's an image. We want this to be 'array' that we can check the values. This looks fine. We can say here [00:19:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m19s) set 'uploads are not enabled in php', that seems fine. We can take these messages and put them in here, because JCB is going to grab this once we put it into our component, and going to add it to our language files for our component, this is really want to make sure that it happens. We don't need the zlib because we are not going to unzip anything. We could remove this part(see video).
Let's copy the function and adapt it to our needs and just put it into our class. In components go to the `installer`, then, `model`, and then on `install`, and scroll down till you see one that says '`getPackageFromUpload`'. [00:17:29](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m29s) This is the function which is really ideal for the task. It takes care of a lot of sanitizing, it has a lot of error checks in it, and it should be useful for us in this case.<<<<<<<<<<
We will take some stuff away and add our own little messages, so we do not depend on the INSTALLER MSG. We'll just copy this whole function(see video) all the way up there, control copy it, go to look, our class and I'm going to paste it in here above. So there are some key things I would like to change here for example. [00:18:23](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) I'm thinking let's change the function name and we call it 'myUploadFunction' for now. We going to pass it the input. We don't want that to be done twice. [00:18:50](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m50s) We know this is going to be 'jform', and we definitely don't want to have it 'raw', because it's an image. We want this to be 'array' that we can check the values. This looks fine. We can say here [00:19:19](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m19s) set 'uploads are not enabled in php', that seems fine. We can take these messages and put them in here, because JCB is going to grab this once we put it into our component, and going to add it to our language files for our component, this is really want to make sure that it happens. We don't need the zlib because we are not going to unzip anything. We could remove this part(see video).
### Checking If Userfile Is An Array