joomla/Component-Builder
joomla/Component-Builder
38
23
Fork 11
Code Issues 81 Pull Requests Projects 4 Wiki Activity

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

Amigo 2019-09-18 12:10:52 +02:00
parent e98c81e1c1
commit 53f281ad1c
1 changed files with 7 additions and 6 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

@ -185,21 +185,22 @@ Everything is moved into place and a trial run can be done. It has been saved su
Before we continue with that kind of custom scripting, we need to take what we have done so far and add it to JCB. We have done it in the IDE, and if we compile and install this component now, you will overwrite everything that you have written, and it will be gone. Let's go grab that custom scripting and add it to the component in JCB. (See video) We want to grab everything from my 'uploads function', [00:46:41](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m41s) do 'check upload', 'remove file' and say 'cut' and then place that in the clipboard, and go to JCB, in the 'Look Admin Views' which is where all this is happening. If it is opened, there is a place called 'Custom Buttons'. You are going to say 'Yes'. [00:47:07](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m07s)
Then there is the PHP(controller method), nothing is going to be added there, but there is the PHP(model method), this is the place for us to add some script to the model. We are going to paste what we have cut, right in here, and in the PHP List View (controller method) nothing is added and also in this PHP List View (model method) nothing is added. [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) We are adding that which we have written to the model method, '_Add your PHP here!_' is going to go into the model as 'methods'. This is the methods, that '`checkupload`' is a method, that '`myUploadFunction`' is a method. We want it to be available to the class from now on. [00:47:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m59s) Further custom scripting is necessary to get it to remove an old file when a new one is uploaded. At this point, it will only add the new file and leave the old one. It could be that more files get added to the image folder, without it being removed. There is a `removeFile` function which makes it quite easy to fix it if you are familiar with PHP. <<<<<<<<<<<<<<<<<<<
Then there is the PHP(controller method), nothing is going to be added there, but there is the PHP(model method), this is the place for us to add some script to the model. We are going to paste what we have cut, right in here, and in the PHP List View (controller method) nothing is added and also in this PHP List View (model method) nothing is added. [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) We are adding that which we have written to the model method, '_Add your PHP here!_' is going to go into the model as 'methods'. This is the methods, that '`checkupload`' is a method, that '`myUploadFunction`' is a method. We want it to be available to the class from now on. [00:47:59](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m59s) Further custom scripting is necessary to get it to remove an old file when a new one is uploaded. At this point, it will only add the new file and leave the old one. It could be that more files get added to the image folder, without it being removed. There is a `removeFile` function which makes it quite easy to fix it if you are familiar with PHP.
### Adding the Script To The Save Method
[00:48:43](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m43s)
Now we need to add the Script that we are adding to the save method. Here is the Add PHP(save method - before data modelling). This is where we want to jump in. Like it says there the value is in the data array. We are going to go back to the IDE, and scroll up to this little snippet, because this is everything new. Let's just cut that as well [00:49:23](https://www.youtubnae.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m23s) and go back to the JCB interface, and paste it in there. In the Add PHP(save method - before data modelling), we have this little snippet that will be executed, and the same goes within the Custom Buttons area, we've got in the [00:49:45](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m45s) PHP(model method) we've got our classes that are being added. Now we said if we open the item, that means after we've saved it, we want to take the value in this banner, and we want to display it in the page. Now there are many ways to do this. Since we already have this value, it shouldn't be that hard.
Now we have to add the Script that needs to be added to the save method. Here is the Add PHP(save method - before data modelling). The value is in the data array. Return to the IDE, and scroll up to this little snippet `upload the image` because this is everything new. Let's just copy it and cut that as well and go back to the JCB interface, and paste it there. [00:49:23](https://www.youtubnae.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m23s) In the Add PHP(save method - before data modelling), we have this little snippet that will be executed, and the same applies within the Custom Buttons area, we have in the PHP(model method) our classes that are being added. [00:49:45](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m45s) If we open the item, that means after we have saved it, we want to take the value in this `$data[banner]'`, and want to display it in the page. Now there are many ways to do this and since we already have this value, it should not be that hard.
### Add Script To View File Or Add JavaScript To View Footer
[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 added 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) Whereas 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 <?php//also workes?> [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.
JavaScript will be used to do this. We have 'Add JavaScript' to 'view file' or 'Add JavaScript' to the 'view footer'. So it may be decided 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) Whereas 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 <?php//also workes?> [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?