joomla/Component-Builder
joomla/Component-Builder
38
22
Fork 10
Code Issues 75 Pull Requests Projects 4 Wiki Activity

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

Amigo 2019-09-24 10:00:00 +02:00
parent b1c2897ad5
commit 9830242441
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,19 +139,19 @@ Then for some security, which is a little extra layer. There are different encr
[00:31:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m38s)
The Admin View Documents have some Custom Script in it. We have here the `setFileJS` which is the JavaScript that fires when it gets the request back from the Ajax call. You'll see, let me show you if we go back on '`allcomplete`' there is a function. At some point when everything is satisfied it has a `setFilekey`, and it passes a bunch of variables to it. It is this function that we are going to look at. [00:32:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m36s) Let's use that `setFileJS` and search it. We'll see there is a `setFilekey` function in the document, and in your Ajax, which you're using Uikits [00:33:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m03s) function. It has an '`allcomplete`'. Even if you look at '`allcomplete`' which is a place where the server tells you it has been done. You can do some house cleaning in the browser. Checking if it has been done, remove the `progressbar`, and if it has an `error`, we pop out the `errors` and `alert`. If it is successful because we can decide what this response should be. So we will decide to give a `successful` value in the array.[00:33:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m43s) Then we fire the `setFilekey`, which is looking at our Admin View. We are adding this custom code in here, and it is adding all this code. It is quite a lot of code, but it is all being added to the Admin View and it can be used for different Admin Views, [00:34:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m13s) if it is dealing with either images, documents, or media.<<<<<<<<
The Admin View Documents have some Custom Script in it. We have here the `setFileJS` which is the JavaScript that fires when it gets the request back from the Ajax call. You'll see, let me show you if we go back on '`allcomplete`' there is a function. At some point when everything is satisfied it has a `setFilekey`, and it passes a bunch of variables to it. It is this function that we are going to look at. [00:32:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m36s) Let's use that `setFileJS` and search it. We'll see there is a `setFilekey` function in the document, and in your Ajax, which you're using Uikits [00:33:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m03s) function. It has an '`allcomplete`'. Even if you look at '`allcomplete`' which is a place where the server tells you it has been done. You can do some house cleaning in the browser. Checking if it has been done, remove the `progressbar`, and if it has an `error`, we pop out the `errors` and `alert`. If it is successful because we can decide what this response should be. So we will decide to give a `successful` value in the array.[00:33:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m43s) Then we fire the `setFilekey`, which is looking at our Admin View. We are adding this custom code in here, and it is adding all this code. It is quite a lot of code, but it is all being added to the Admin View and it can be used for different Admin Views, [00:34:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m13s) if it is dealing with either images, documents, or media.
### JavaScript Does Some Checking and Validating
[00:34:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m33s)
The JavaScript does some checking and validating. I'll just put it out there and when it discovers that everything is fine the file was added. Then it goes ahead, it's checking the length of the filename, see if the 'currentFileName' length is not greater than 20. If it's not an image or a document, then it must be removed. The return values are here quite key. To make sure that we have this remove file from server function in place where I showed you in the Admin [00:35:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m21s) View where we've these remove file tasks and methods. It's querying the removeFile. It's passing all the necessary variables [00:35:42](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m42s) to remove the correct file. It's also checking if a person who is trying to remove the files, is a logged in user, and on the file where we will look at in a moment, at the actual PHP. Which will again validate that the user has permission to remove the file. There are all these checks and balances across every step of the this implementation. By now you might realize this implementation is far more complicated than the normal file upload, that's simple. This really gets into the nitty gritty of some of these things, because you want to give a real easy [00:36:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s) behavior for your user. But that will mean that you need to do more them and protect them. So they would not become vulnerable at any time. Once we are satisfied that the file is correct and it doesn't need to be removed, we trigger [00:36:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m55s) a few things which puts the file in the page that we want to end up doing.
The JavaScript does some checking and validating. I will put it out there and when it discovers that everything is fine the file was added. Then it goes ahead, and checks the length of the filename, and see if the '`currentFileName`' length is not greater than 20. If it is not an `image` or a `document`, then it must be removed. The return values are here of quite key importance. To make sure that we have this remove file from server function in place as I showed you in the Admin View those remove file tasks and methods.[00:35:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m21s) It is querying the `removeFile`. It passes all the necessary variables to remove the correct file.[00:35:42](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m42s) It is also checking if a person who is trying to remove the files, is a logged in user. On the file at which we will look at in a moment, at the actual PHP. It will again validate that the user has permission to remove the file. There are all these checks and balances across every step of this implementation. By now you might realize this implementation is far more complicated than the normal file upload, that is simple. This really gets into the nitty gritty of some of these things, because you want to give a real easy behavior for your user. [00:36:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s) But that will mean that you need to do more to protect them. Once we are satisfied that the file is correct and it does not need to be removed, we trigger a few things which puts the file in the page that we want to end up doing.
### SetFile
[00:37:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m05s)
This 'setFile' is what we are moving towards, because we want to make sure that the file, after you've dragged and dropped it on the page, boom, it shows in the page once it's on the server. It's doing a little bit of checking to make sure their are all good, everything's fine. We end up with what we now called 'filename', and it get passed. [00:37:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m36s) We are moving into 'setFile', and the 'setFile' is going to take the target and it's going to determine what kind of target it is and get the format, get the this, get the that. We can build the 'filename' correctly. I've got some functions which you may not need, [00:38:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m02s) I mean you can look through this and decide what to keep, what to through out. We end up building a notice which has been set. [00:38:20](https://www.youtube.com/watch?eventuallyv=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s) It triggers the 'getFile'. The 'getFile' is the other function which if you look at the Admin View, let's go back to the JavaScript. We've the 'setFile' [00:38:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m38s) and we have the 'getFile'. The 'getFile' is getting another layer of validation and also make sure that everything is behaving as we would want and expect it to behave. The rest of the snippet is a 'removefile', and 'isJsonString'. We also have a little snippet to check if it's a JsonString [00:39:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) and if it's empty. It's all part of sanitizing and validating and making sure everything is the way we expect.
This '`setFile`' is what we are moving towards, because we want to make sure that the file, after you have dragged and dropped it on the page, shows in the page once it is on the server. It is doing a little bit of checking to make sure everything is fine. We end up with what we called '`filename`', and it get passed. [00:37:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m36s) We are moving into '`setFile`', and the '`setFile`' is going to take the target and it is going to determine what kind of target it is and get the format, etc. We can build the '`filename`' correctly. There is some functions which you may not need, you can look through this and decide what to keep. We end up building a notice which has been set. [00:38:20](https://www.youtube.com/watch?eventuallyv=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s) It triggers the '`getFile`'. The '`getFile`' is the other function which if you look at the Admin View, go back to the JavaScript. We have the '`setFile`' and the '`getFile`'. [00:38:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m38s) The '`getFile`' gets another layer of validation and also make sure that everything behaves as it should. The rest of the snippet is a '`removefile`', and '`isJsonString`'. There is a little snippet to check if it is a JsonString and if it is empty.[00:39:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) It is all part of sanitizing and validating and making sure everything is the way we expect. <<<<<<<<<
### GetFile