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

Updated 057 Drag and Drop Upload functionality in JCB (markdown)

Amigo 2019-09-25 11:13:41 +02:00
parent a5dae6107c
commit 65dee0d8c5
1 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
057-Drag-and-Drop-Upload-functionality-in-JCB.md

@ -201,11 +201,7 @@ We are going to look at this `phpAjaxUploader` in the custom codes area. Let's S
[00:54:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m48s)
If you don't know what that is, let me quickly show you. In the component it has this component config. If your component doesn't show one like this, Hello World, it doesn't show a component config, you can go into the component and then in [00:55:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m16s) settings there is this button '_Create component config for this Joomla component_'. Close, I do not want to do Hello World, I can show you with the Document Manager. We could use the same button in Settings. We can edit it if it has not have one, you can create one. You select fields with their custom values and the tabs in which they should be displayed.[00:55:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m50s) I have selected 'Allowed Document Formats(list)', which is just a list of the formats and I set it to allow multiple selection. That is how this Allowed Media, Allowed Image, and Allowed Documents are done. Then there is the crop document image. If you do not know how to create a field, and how to set radio buttons, or list, then go review the videos about that. That is how we deal with that and that list we have looked at now is the same list as what we see here. [00:56:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m29s) It should be the same because this is the allowed, and that list shows the user what is allowed for the system. [00:57:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m03s) This is what you could say is available formats, and then those drop-downs is what you as the owner of this website, where this application will run, will allow. This list should be the same as the one there, but it also is going to be used if people post a specific type, as if it is allowed. We are going to be able to bounce this and make sure that security wise we are safe. <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
If you don't know what that is, let me quickly show you. In the component it has this component config. If your component doesn't show one like this, Hello World, it doesn't show a component config, you can go into the component and then in [00:55:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m16s) settings there is this button '_Create component config for this Joomla component_'. Close, I do not want to do Hello World, I can show you with the Document Manager. We could use the same button in Settings. We can edit it if it has not have one, you can create one. You select fields with their custom values and the tabs in which they should be displayed.[00:55:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m50s) I have selected 'Allowed Document Formats(list)', which is just a list of the formats and I set it to allow multiple selection. That is how this Allowed Media, Allowed Image, and Allowed Documents are done. Then there is the crop document image. If you do not know how to create a field, and how to set radio buttons, or list, then go review the videos about that. That is how we deal with that and that list we have looked at now is the same list as what we see here. [00:56:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m29s) It should be the same because this is the allowed, and that list shows the user what is allowed for the system. [00:57:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m03s) This is what you could say is available formats, and then those drop-downs is what you as the owner of this website, where this application will run, will allow. This list should be the same as the one there, but it also is going to be used if people post a specific type, as if it is allowed. We are going to be able to bounce this and make sure that security wise we are safe.
### uploadFile Function
@ -217,10 +213,11 @@ Here is the 'uploadFile'function. The 'uploadFile' starts by first getting the v
[00:59:41](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m41s)
Then we are using a function `getPackageFromUpload`. If you watched the previous tutorial on using the 'File type uploader', It is more or less the same kind of function. If I scroll down to, `getPackageFromUpload`.[01:00:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m02s) The only differences we are doing the `getApplication` and the input in the function. We are targeting files because we are passing those values in the file's place. We are seeing what is the file. We are checking whether these things are allowed: `warning, import file error`. This kind of error is not thrown to Joomla, it is added to the error message. [01:00:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m35s) Because we have to give it back to the view. This is a Ajax call, nobody will see it if we just use the array's warning. So we are actually grabbing the value and say we are done here get out of here, if we are still going and you could go through this and it has very much the same implementation than the one we have demonstrated. The only difference though is our check method. It takes that view and again validates it.[01:01:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m12s) An 2nd layer of validation is done and then it gets checked whether this specific user that is now logged in has the right to edit this item. It is doing some user validation. If not, it removes the archive. We still have that remove method with a little bit of the code that you saw me take out, that is still left in. In the previous tutorial I used some of these codes. That is all very much the same, I will not go into depth. If you do not understand this watch the previous tutorial.<<<<<<<<<
Then we are using a function `getPackageFromUpload`. If you watched the previous tutorial on using the 'File type uploader', It is more or less the same kind of function. If I scroll down to, `getPackageFromUpload`.[01:00:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m02s) The only differences we are doing the `getApplication` and the input in the function. We are targeting files because we are passing those values in the file's place. We are seeing what is the file. We are checking whether these things are allowed: `warning, import file error`. This kind of error is not thrown to Joomla, it is added to the error message. [01:00:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m35s) Because we have to give it back to the view. This is a Ajax call, nobody will see it if we just use the array's warning. So we are actually grabbing the value and say we are done here get out of here, if we are still going and you could go through this and it has very much the same implementation than the one we have demonstrated. The only difference though is our check method. It takes that view and again validates it.[01:01:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m12s) An 2nd layer of validation is done and then it gets checked whether this specific user that is now logged in has the right to edit this item. It is doing some user validation. If not, it removes the archive. We still have that remove method with a little bit of the code that you saw me take out, that is still left in. In the previous tutorial I used some of these codes. That is all very much the same, I will not go into depth. If you do not understand this watch the previous tutorial.
In our upload file we at this point have the package. We pass the package to `uploadNow`. Now move the file into place. Remember we had to do that here and a `uploadNow` function is used. In the `uploadNow` function, we `return` and if any error still remains, it is going to be dealt with here. Whereas errors that might have a occurred here, if this was false, we would use that. [01:02:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m36s) That is the error message, put it in error and pass it out. If there are any other issues, we will seen there has been an error and will pass it out, there is this error handling there. <<<<<<<<<<<<
In our upload file we at this point have the package. We pass the package to uploadNow. Now move the file into place. Remember we had to do that in the the previous here. I'm using a function uploadNow. In the uploadNow function, we are returning and if any error still remains, it's going to be doubt here. Where as errors that might have a occurred here, if this was false, we would use that. [01:02:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m36s) That's the error message put it in error and pass it out. If we having any other issues, we will seen there has been an error and will pass it out, there is this error handling there.
### Checking Whether The UploadPackage Is There