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

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

Amigo 2019-09-25 08:06:21 +02:00
parent 87098bdfa7
commit a5dae6107c
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -211,13 +211,16 @@ If you don't know what that is, let me quickly show you. In the component it has
[00:57:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m45s) [00:57:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m45s)
Here is the 'uploadFile'function. The 'uploadFile' starts by first getting the view ID, checking it. Then making sure that there is a view set. And that view is part of the 'allowedViews' array. The 'allowedViews' array, if you remember [00:58:08](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m08s) the 'allowedView' is documents. That's why I'm saying I'm setting that outside of the custom code, because it depends on which component we are working in. If it is an 'allowedView', we then get the target, and the type and we set it to Global target in Global target type. [00:58:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m45s) Then we check that this type, What is the format that we are talking about? That is the formats that we allow, the types, because we want to [00:59:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m17s) validate that the person and who is uploading the things, we anticipate. It is setting the format with the type. If it's image it will be images. If it's images it will be image. If it's document it will be document, if it's documents it'll be document, and media will be media. That's the types and we are setting that is the formatType. Here is the 'uploadFile'function. The 'uploadFile' starts by first getting the view ID and checks it. Then making sure that there is a view set and that view is part of the '`allowedViews`' array. The 'allowedViews' array, if you remember [00:58:08](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m08s) the '`allowedViews`' is documents. That is why I am setting that outside the custom code, because it depends on which component we are working in. If it is an 'allowedView', we then get the target, and the type and we set it to Global target in Global target type. [00:58:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m45s) Then we check that this type that is the format that has been mentioned. That is the formats that we allow, the types, because we need to anticipate what a person is going to upload and to validate that. [00:59:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m17s) It is setting the `format` with the `type`. If it is `image` it will be `images`. If it is `images` it will be `image`. If it is `document` it will be `documents`, if it is `documents` it will be `document`, and `media` will be `media`. That is the types and we are setting that as the `formatType`.
### GetPackage From Upload ### GetPackage From Upload
[00:59:41](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m41s) [00:59:41](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m41s)
Then we are using a function getPackage from upload. now if you watch the previous tutorial of using the file type uploader, Then it's more or less the same kind of functio. If I scroll down, [01:00:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m02s) We'll find 'getPackageFromUpload. The only differences we are doing the application at get and the input in the function. We are targeting files because we are passing those values in the files place. We are seeing what is the file. We are checking whether these things are allowed: warning, import file error. This kind of error, you'll see I'm not throwing it to Joomla, I'm adding it to the error message. [01:00:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m35s) Because we are grab the value and say we are done here get out of here, if we are still going and you could go through this. the same implementation than the one we've demonstrated. The only difference though is our check method. It is a little bit more taking that view [01:01:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m12s) and validating it. We are doing a 2nd layer of validation. Then checking 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 can 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 use some of these codes. That's all the same I'm not going to go into depth. If you don't understand what I've just looked at here then please go back to the [01:01:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m56s) the previous tutorial, watch that. It gives you enough information. 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. 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 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 ### Checking Whether The UploadPackage Is There