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-18 08:27:07 +02:00
parent 58ca1532ac
commit b6c3e30d1d
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

@ -171,22 +171,23 @@ Now we will have all the information at our disposal which has been used up here
First, get some constants to use. This `JPATH_ROOT` will be used as it is always going to be the root path to our website. Then next, add the path to the images. It is where the image is going to be placed. I am going to copy `JPATH_ROOT`, and add the path, the relation to the root folder to the `banner` in the database. It is only that you will later know where the file is, then on the front end of the site, where you are going to use this value, you will have to get the value from the database. [00:41:33](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m33s)
It is still necessary to create the actual image html tag to load the image or whatever you are going to do with this file. You still need to code that, nothing of that is going to be done. You are going to have the path to exactly where the file is because you are storing it that way in the 'banner' column, that is the field. Here we are taking the root path '`JPATH_ROOT`' and that exact value and we are moving the full path, which we have build up here, which is the current destination. [00:42:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m02s) We are going to move it from the full path to the final destination. At this point, we have got the image on the server and are moving it to the correct location. We are storing the value in the database, and we are done with saving and uploading the actual value. [00:42:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m28s)That would be all that is required. In any of these steps, you might want to do some more things, be more secure, be more validating, because it is not only images you are going to upload. If you upload PDF, if you are uploading another kind of content, you are going to have to do some googling to anywhere in these steps, especially in this check upload area, to do the correct validation. [00:43:03](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m03s) At this point the file is on your server, and you need to make sure that it is the right file. Now, this is not airtight because this checks that the file's type is one of these, the extensions. [00:43:22](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m22s) It does not validate the file to being an image. There are more secure ways to do that. If you do use them, then on the server-side if your application is going to be running, with shared environments, it will cause problems because some of those functions are not available in all shared environments. [00:43:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m42s) But if you want to be very specific, you could help the user along who uses your application to enable those functions on their server, and by that giving them extra security with uploading of files. [00:44:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m14s) In general this sort of implementation is how most are doing it. <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
It is still necessary to create the actual image html tag to load the image or whatever you are going to do with this file. You still need to code that, nothing of that is going to be done. You are going to have the path to exactly where the file is because you are storing it that way in the 'banner' column, that is the field. Here we are taking the root path '`JPATH_ROOT`' and that exact value and we are moving the full path, which we have build up here, which is the current destination. [00:42:02](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m02s) We are going to move it from the full path to the final destination. At this point, we have got the image on the server and are moving it to the correct location. We are storing the value in the database, and we are done with saving and uploading the actual value. [00:42:28](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m28s)That would be all that is required. In any of these steps, you might want to do some more things, be more secure, be more validating, because it is not only images you are going to upload. If you upload PDF, if you are uploading another kind of content, you are going to have to do some googling to anywhere in these steps, especially in this check upload area, to do the correct validation. [00:43:03](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m03s) At this point the file is on your server, and you need to make sure that it is the right file. Now, this is not airtight because this checks that the file's type is one of these, the extensions. [00:43:22](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m22s) It does not validate the file to being an image. There are more secure ways to do that. If you do use them, then on the server-side if your application is going to be running, with shared environments, it will cause problems because some of those functions are not available in all shared environments. [00:43:42](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m42s) But if you want to be very specific, you could help the user along who uses your application to enable those functions on their server, and by that giving them extra security with uploading of files. [00:44:14](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m14s) In general this sort of implementation is how most are doing it.
### Successfully Saved - Show No File Detected - Might Show The File Currently In Database
[00:44:31](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m31s)
We have moved everything in place. Let's give it a trial run. It says that it's been saved successfully. But no file selected is shown here. We might want to show the file that is currently in the database, instead of this upload or show the upload still, but let's say someone decides to upload another one, that changes it, and remove the old one and adds the new one, and displays the little image as it is in the database. First, let see if it is in the database. [00:45:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m12s) In the database we see there is our file, and it is set to be in /images/autumn_trees_forest_building_grass.jpg. Let's see if it was moved to the place. In the folder structure, we are going to open images, we are going to click on images, then scroll down and see [00:45:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m46s) autumn tree. It is in its place. The actual image does now exist in the image folder, it is been uploaded and it is in the database, although our little snippet says that it can't see it.
Everything is moved into place and a trial run can be done. It has been saved successfully but no file selected is shown. We might want to show the file that is currently in the database, instead of this upload or show the upload still; but let's say someone decides to upload another one, that changes it, and remove the old one and adds the new one, and displays the little image as it is in the database. First, let see if it is in the database. [00:45:12](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m12s) Our file is in the database, and it is set to be in `/images/autumn_trees_forest_building_grass.jpg.` Let's see if it was moved to the place. In the folder structure, open images, and click on images, then scroll down and see `/images/autumn_trees_forest_building_grass.jpg.` in its place.[00:45:46](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m46s) The actual image does now exist in the image folder, it has been uploaded and it is in the database, although the snippet says that it can not see it.
### Grab Custom Scripting And Add It To The Component In JCB
[00:46:09](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m09s)
Before we continue with that kind of custom scripting, we need to take what we have done so far, and added to JCB. We've done it in the IDE, and if we compile and install this component now, you will overwrite everything you've written, and boom it's gone. Let's go grab that custom scripting and added 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) we want to do check upload, and remove file all of that we want to get. We are going to say cut, and have that in the clipboard, then go to JCB, in the Look Admin Views which is where all this is happening. We can open up then 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), we are not adding anything 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've cut, right in here, and over here in the PHP List View (controller method) we're not adding anything and also in this PHP List View (model method) [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) we're not adding anything. We are adding that which we have written to the model method, at 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) We are not at this point dealing with if you upload a new file that it removed the old one. That should still be further custom scripting. At this point, all add the new file. It won't remove the old one. It could be that it's adding more files and more files and it just gets added to the image folder, but it's not being removed. You have the remove [00:48:26](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m26s) file function, so you could fix this quite easily. I'm not going to show you how to do that. I want to encourage you to study up some of your PHP as well.
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), we are not adding anything 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've cut, right in here, and over here in the PHP List View (controller method) we're not adding anything and also in this PHP List View (model method) [00:47:32](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m32s) we're not adding anything. We are adding that which we have written to the model method, at 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) We are not at this point dealing with if you upload a new file that it removed the old one. That should still be further custom scripting. At this point, all add the new file. It won't remove the old one. It could be that it's adding more files and more files and it just gets added to the image folder, but it's not being removed. You have the remove [00:48:26](https://www.youtube.com/watch?v=o482sK4DxkM&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m26s) file function, so you could fix this quite easily. I'm not going to show you how to do that. I want to encourage you to study up some of your PHP as well.
### Adding the Script To The Save Method