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

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

Amigo 2019-09-25 13:07:18 +02:00
parent cba6e96c55
commit 51a7e9c227
1 changed files with 7 additions and 5 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

@ -221,22 +221,24 @@ In our upload file, we at this point have the package. We pass the package to `u
[01:02:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m48s)
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)<<<<<
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.
If it is a document we are going to need the folderpath for `hiddenFilePath`. The getFolderPath is a function that I wrote. I am 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 do not pass any values like in this case, it most probably returns a public path.[01:04:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m28s) It would be where the images go. Every document go in a hidden area, images go public. Usually, the image you want to load somewhere, you would not have it to be behind the root folder of your website.
### FullPath - FilePath - FileName - FileFormat
[01:04:46](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m46s)
We end up here with the fullPath which is the filePath and the fileName and the fileFormat. That becomes the fileName and this becomes the fileFormat. You will notice that at this stage the packagename is what it's used to build this name. We are stripping the fileFormat from that packagename making sure [01:05:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m19s) that it doesn't have a fileFormat in it. To ensure that this file is stored in exactly the format, we detected as and not as what I said it is. We move the package. This is where it gets interesting to its final destination. If something fails at this point like it doesn't move, [01:05:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m45s) we remove the package and we say there was an error. We are done. We are not going to worry about it. If it succeeds then if it's an image, at this stage image, we definitely want to resize it. I have a resize image helper Class. This is also something that you would need to write yourself. [01:06:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m12s) It helps me to resize my image. I am passing it some values to target the image and resize it. It doesn't change anything with the image location or anything like that, I don't need any value back, I just need it to resize it and get it done. I don't need to know anything else.
We end up here with the `fullPath` which is the `filePath` and the `fileName` and the `fileFormat`. That becomes the `fileName` and this becomes the `fileFormat`. You will notice that at this stage the `packagename` is what it has used to build this name. We are stripping the `fileFormat` from that `packagename` making sure [01:05:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m19s) that it does not have a `fileFormat` in it. To ensure that this file is stored in exactly the format that we detected it to be and not as what they said it is. We move the package. This is where it gets interesting to its final destination. If something fails at this point like it does not move, we remove the package and we say there was an error.[01:05:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m45s) We are done. We are not going to worry about it. If it succeeds then if it is an image, at this stage image, we definitely want to resize it. I have a `resizeimage` helper Class. This is also something that you would need to write yourself. [01:06:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m12s) It helps me to resize my image. I am passing it some values to target the image and resize it. It does not change anything with the image location or anything like that, I do not need any value back, I just need it to resize it and get it done. It is not necessary to know anything else.
### Encryption
[01:06:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m35s)
I'm doing some encryption to see whether the basic encryption is available in this program. To use that encryption, when I start storing the documents to the database. Here is a local file, and we are checking if it's a document or a media. We are going to encrypt it. Again here we make sure that this ID value [01:07:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m04s) is greater than zero. Because if it's still an unsaved item, we don't have any place in the database to add this. We could skip this. If we realize this file or this Upload doesn't have an ID, then we skip this function, and we rather do an image. If it's a document or if it's a media, [01:07:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m29s) then we load the filename. We are going to pass it back to the view, taking the results as you see here formats, it's got a 'lock' value and a 'token' and [01:07:46](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m46s) 'link'. It has different behavior for different things. It all builds this result array and this is what we give them back. It gets started over here(see video). The fileformat is added, success gets the filename which is this value here. Then we start building some other things which are necessary. [01:08:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m10s) Like the 'tokenLink' for the 'link'. Because you want to have it downloadable, if it is media or document. If it's an image, we don't need any of this. We can skip that. Then the 'keyName'. We are done. Where as it is a safe item, we are going to update the database, [01:08:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m35s) with this new 'targetType' and 'target'.
I am doing some encryption to see whether the basic encryption is available in this program. To use that encryption, when I start storing the documents to the database. Here is a local file, and we are checking if it is a document or a media and then encrypt it. Again here we make sure that this ID value is greater than zero.[01:07:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m04s) Because if it is still an unsaved item, we do not have any place in the database to add this. We could skip this. If we realize this file or this Upload doesn't have an ID, then we skip this function, and we rather do an image. If it is a document or if it is a media, then we load the filename.[01:07:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m29s) We are going to pass it back to the view, taking the results as you see here formats, it got a '`lock`' value and a '`token`' and [01:07:46](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m46s) '`link`'. It has different behavior for different things. It all builds this result array and this is what we give them back. It gets started over here(see video). The fileformat is added, success gets the `filename` which is this value here. Then we start building some other things which are necessary. [01:08:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m10s) Like the '`tokenLink`' for the '`link`' as you want to have it downloadable, if it is media or document. If it is an image, we do not need any of this. We can skip that. Then the '`keyName`'. We are done. Where as it is a safe item, we are going to update the database, [01:08:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m35s) with this new '`targetType`' and '`target`'.<<<<<<<<<<<<<<<<<<<<<
### Convention In The Hidden Field Name