joomla/Component-Builder
joomla/Component-Builder
38
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 11:32:43 +02:00
parent 415e1c1e09
commit cba6e96c55
1 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -215,18 +215,16 @@ Here is the 'uploadFile'function. The 'uploadFile' starts by first getting the v
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 an 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) The 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 an 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) The 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 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 see 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 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 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 see 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
[01:02:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m48s) [01:02:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m48s)
Now in uploadPackage, we are checking whether the package is there, the package name and we're starting from that, we are building the name. Now, remember I showed you or explain to you that we are using and preserving the filename but we are hiding the filename. We are using the targetType the fileFormat and then this randomkey generator. [01:03:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m17s) Now I'm not exactly sure I think all JCB helper classes comes out with this randomkey. You could just use it in your component and you can decide how long this string should be. Then I'm using a little placeholder which is little generic placeholder VDM. I'm adding the actual name of the file after this placeholder that everything before this placeholder is really internal, my system uses this, but the client uses everything this side. If it's a document [01:03:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m56s) we are going to need the folderpath for hiddenFilePath. Again getFolderPath is a function that I wrote. I'm not going to share that with you, but you can build your own helper class function to get the path to where you want to put the file, this is up to you. I'm using a hiddenfilepath, but there is a lot of discussion behind that. If I don't pass any values like in this case, [01:04:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m28s) it most probably returns a public path. It would be where the images go. Every document go in a hidden area, images go public. Usually, the image you wanted to load somewhere, you don't want it to be behind the root folder of your website. In `uploadPackage`, we check whether the package is there, the package name and starts from that, we are building the name. Remember I explained to you that we are using and preserving the filename but we are hiding the filename. We are using the `targetType`, the `fileFormat` and then this `randomkey` generator. [01:03:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m17s) I am not exactly sure I think all JCB helper classes comes out with this `randomkey`. You could just use it in your component and you can decide how long this string should be. Then I am using a little placeholder which is little generic placeholder `VDM`and then adds the actual name of the file after this placeholder that everything before this placeholder is really internal, my system uses this, but the client uses everything this side.(See video)<<<<<
If it is a document we are going to need the folderpath for hiddenFilePath. Again getFolderPath is a function that I wrote. I'm not going to share that with you, but you can build your own helper class function to get the path to where you want to put the file, this is up to you. I'm using a hiddenfilepath, but there is a lot of discussion behind that. If I don't pass any values like in this case, [01:04:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m28s) it most probably returns a public path. It would be where the images go. Every document go in a hidden area, images go public. Usually, the image you wanted to load somewhere, you don't want it to be behind the root folder of your website.
### FullPath - FilePath - FileName - FileFormat ### FullPath - FilePath - FileName - FileFormat