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-23 11:06:25 +02:00
parent 773e3a91b2
commit d47dba78b1
1 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,7 +85,7 @@ At the bottom of the footer, we have what is known as `getfile` snippet which ag
[00:19:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m45s)
Let's look at the code that is used by starting in the interface. Let's first look at one of these Uploading Concepts. Since I know what is happening there, I am already aware that the code is not there. It is also a custom Placeholder snippet. Before we dive in, open the custom code area and go back into documents and look at the code snippet. [00:20:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m28s) Let's use this Documents Uploader Note and open that. We have the Document Uploader Note, the `a div` all the way down there(see video). Which has an `id` It has the `class` for the placeholder, some icons. [00:20:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m52s) Here is upload your documents once more and a `span` tag, that says `main-documents-formats`. It is going to be the place where we load the formats with JavaScript.Then there is `Selecting the file from your computer`. It is this snippet with a little bit of extra flavor. [00:21:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) That's all we are looking at. There are some conventions, like `main_documents_uploader`, that again `upload-drop-main-documents`. There are conventions that make this reusable. In the scripts area, I add JavaScript to the view-footer.
Let's look at the code that is used by starting in the interface. Let's first look at one of these Uploading Concepts. Since I know what is happening there, I am already aware that the code is not there. It is also a custom Placeholder snippet. Before we dive in, open the custom code area and go back into documents and look at the code snippet. [00:20:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m28s) Let's use this Documents Uploader Note and open that. We have the Document Uploader Note, the `a div` all the way down there(see video). Which has an `id` It has the `class` for the placeholder, and some icons. [00:20:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m52s) Here is upload your documents once more and a `span` tag, that says `main-documents-formats`. It is going to be the place where we load the formats with JavaScript.Then there is `Selecting the file from your computer`. It is this snippet with a little bit of extra flavor. [00:21:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) That's all we are looking at. There are some conventions, like `main_documents_uploader`, that again `upload-drop-main-documents`. There are conventions that make this reusable. In the scripts area, I add JavaScript to the view-footer.
### Snippet - uikitFileUploader custom code - progressbar-main-document-formats
@ -97,53 +97,49 @@ The JavaScript I'm using is this `uikitFileUploader` custom code. Let's look at
[00:24:06](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m06s)
Then it has some settings which is the action. We are using `JRouter` that is JavaScript trick that I wrote because often times you have this Site View or the Admin View in the back-end and in the front-end. This takes care of whether it is a back-end or front-end call and that it executes it correctly. That is your component name. The `[[[arg1]]]` again would be the second argument, which is in our case documents.[00:24:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m52s) It says `documents`, the type. The third argument which is showing as `[[[arg2]]]` is `main`. It's passing the target as `main`. `Raw is true`, it has the `token`. There is our key(`vastDevMod`) which is being used to identify the view. It is making a query on this area and is set dynamically.
Then it has some settings which is the action. We are using `JRouter` that is JavaScript trick that I wrote because oftentimes you have this Site View or the Admin View in the back-end and in the front-end. This takes care of whether it is a back-end or front-end call and that it executes it correctly. That is your component name. The `[[[arg1]]]` again would be the second argument, which is in our case documents. [00:24:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m52s) It says `documents`, the type. The third argument which is showing as `[[[arg2]]]` is `main`. It's passing the target as `main`. `Raw is true`, it has the `token`. There is our key(`vastDevMod`) which is being used to identify the view. It is making a query on this area and is set dynamically.
### Adding Formats
[00:25:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m21s)
Then over here we know that the formats must be added to this'.(`<?php echo implode`) area with pipe(|) between it. You remember it adds the formats with a pipe(|). We're exploding the array we have from the global parameters for documents, and it displays it in here(See video). [00:25:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m48s) This snippet, will I add under this name 'uikitFileUploader' on a GitHub gist. You could copy and paste it from there and adapted for your purpose. Again we are also imploding the formats because we want to display it, want to show the use of the formats. We have third and the second argument formats, which would be documents and main.[00:26:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m16s) If we look at our div, we will see the formats is `documents-main-formats`, it's targeting this `span` tag and adds it in there. That is adding the formats HTML to this id.
Then over here we know that the formats must be added to this'.(`<?php echo implode`) area with pipe(|) between it. You remember it adds the formats with a pipe(|). We're exploding the array we have from the global parameters for documents, and it displays it in here(See video). [00:25:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m48s) This snippet, will I add under this name 'uikitFileUploader' on a GitHub gist. You could copy and paste it from there and adapted for your purpose. Again we are also imploding the formats because we want to display it, want to show the use of the formats. We have third and the second argument formats, which would be documents and main. [00:26:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m16s) If we look at our div, we will see the formats is `documents-main-formats`, it's targeting this `span` tag and adds it in there. That is adding the formats HTML to this id.
### If No Formats - Update div - Upload Drop Area
[00:26:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m44s)
Then if we have detected that no formats had been set, we are going to update the whole div, which is the upload drop area with `'allowed formats are not set in a global setting please notify system administrator`'. That's the final part of our JavaScript. We have JavaScript mixed in with HTML taking care of some of the displays behavior on that page.
Then if we have detected that no formats had been set, we are going to update the whole div, which is the upload drop area with `'allowed formats are not set in a global setting please notify system administrator`'. That's the final part of our JavaScript. We have JavaScript mixed in with HTML taking care of some of the behavior of the display on that page.
### Reusable Snippet - uikitFileUploader
[00:27:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m16s)
That is the reusable snippet. This same snippet uikitFileUploader is reused for various areas. If we were to close, and open the Media Note, It may be seen that it is really just using the same snippet. If you go to Script, you will see it is the same snippet. [00:27:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m47s) I am changing the variables that I am passing, it is saying `media-media-main`. Where the other one was saying `document-documents-main`. The same applies to the image. With the image there is also that kind of behavior. It says uikitImageUploader, this one is not using the FileUploader, it is using the ImageUploader which is a little different. [00:28:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) There is an 'ImageUploader' and there is 'ImagesUploader' in my custom Snippets. I'll show you why they are different. One allows one image and the file one allows more than one, this one only allows one. [00:28:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m45s) So it has a little bit of a different flavor and behavior.<<<<<<<<<<
I will also paste this out for you to look at. Always remember these arguments behaves the same as an array which means that the first argument will always be 0, the second argument 1, and so forth. I'm using arguments in this snippet. Everywhere where I declare it, I am passing the three arguments that is required, use this `+` to pass it.
That is the reusable snippet. This same snippet uikitFileUploader is reused for various areas. If we were to close, and open the Media Note, It may be seen that it is really just using the same snippet. If you go to Script, you will see it is the same snippet. [00:27:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m47s) I am changing the variables that I am passing, it is saying `media-media-main`. Where the other one was saying `document-documents-main`. The same applies to the image. With the image there is also that kind of behavior. It says uikitImageUploader, this one is not using the FileUploader, it is using the ImageUploader which is a little different. [00:28:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) There is an 'ImageUploader' and there is 'ImagesUploader' in my custom Snippets. I'll show you why they are different. One allows one image and the file one allows more than one, this one only allows one. [00:28:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m45s) So it has a little bit of a different flavor and behavior. I will also paste this out for you to look at. Always remember these arguments behaves the same as an array which means that the first argument will always be 0, the second argument 1, and so forth. I'm using arguments in this snippet. Everywhere where I declare it, I am passing the three arguments that are required, use this `+` to pass it.
### Div - Have It In Place
[00:29:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m25s)
And the `div` looks very similar except that it now would say `images` and it is using different placeholders. You need to update those accordingly as needed. To set up the field you need to have that JavaScript in place and you need to have that `div` in place. <<<<<<<<<<
And the `div` looks very similar except that it now would say `images` and it is using different placeholders. You need to update those accordingly as needed. To set up the field you need to have that JavaScript in place and you need to have that `div` in place.
### Hidden Fields - Main-Documents - Target Naming Conventions
[00:29:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m52s)
Regarding the hidden if I was to take one of the hidden fields, let's say the Documents Hidden field, you'll see there is some naming conventions that you need to follow. It says main-documents, it doesn't say documents. You'll see when we add the value back to the page, we're able to target it based on these naming conventions. That's quite important.
Regarding the hidden fields, for instance, the Documents Hidden field, there are some naming conventions that you need to follow. It says main-documents, it does not say documents. when we add the value back to the page, we are able to target it based on these naming conventions. That is quite important.<<<<<
### Security - Different Encryption Options
[00:30:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m21s)
Then for some security, which is a little extra layer. Like the one guy said, that it's not that we can really stop them, we can just make it very hard. There are different encryption options. This medium encryption (local-file-key) is better than the basic. The basic stores the key in the database, which in that case means that if somebody swiped your database, they do have the key. It could happen that they are able to get hold of your database, but not all of your files. Specially those that are behind the public repository. The medium encryption option can generate a file behind the public folder, which therefore is not publicly accessible. That makes it just that little bit more difficult to get a key to open the value. [00:31:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m19s) The reason is let's say your documents are not available to every group on your system, maybe some groups can access that document, then this is another layer of security that's already by default built into the field behavior. That is just looking at the fields.
Then for some security, which is a little extra layer. There are different encryption options. This Medium Encryption (local-file-key) is better than the Basic Encyption(local-DB-key), which stores the key in the database, which in that case means that if somebody sweeps your database, they do have the key. It could happen that they are able to get hold of your database, but not all of your files. Especially those that are behind the public repository. The Medium Encryption option can generate a file behind the public folder, which therefore is not publicly accessible. That makes it just that little bit more difficult to get a key to open the value. [00:31:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m19s) The reason is for instance thst your documents are not available to every group on your system, maybe some groups can access that document, then this is another layer of security that is already by default built into the field behavior. That is just looking at the fields.
### Admin View Documents - setFileJS
[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're 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 has told you it's done, everything is good. You can do some house cleaning in the browser. That's what we doing. We're checking if it's done, we take away the progressbar, and if it has an error, we pop out the errors and alert. If it's successful, because we decide what this response going to be. So we will decide to give a successful [00:33:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m43s) value in the array. 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 that you see is being added. It's quite a lot of code, but it's 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's dealing with either images, documents, or media. I'm not going to try and explain all this, it is almost as if I'm going to end up teaching you some JavaScript.
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
@ -185,7 +181,7 @@ How the download works here with the document, I'm using a controller. If we hov
[00:48:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m17s)
Next one we wanted to show you here, is to upload some media file. I have a bunch of audio files, and I'm going to upload them. What I'm going to do is, I'm going to select a whole bunch of them, and then upload them all at once. This is what the Uploader can do. Let me see, there we go drop it there, I can't see it yet, but it's uploading. I need to refresh the page. Let's give it a name. [00:49:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) The Document. In Description say: More Soon. Save this. It didn't upload all of them. Interesting. [00:49:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m24s) Let me try again. I've got 6 of them uploaded. I can see there are 6 documents and you can download them and test them. See if they are still fine. Why the home? The order of the home. We see that the media is working. Let's also do that with documents. Let's add some more documents. [00:49:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m57s) I've got a few selected and drag and drop them there. 123 and is uploaded. I need to check some of the JavaScript. I see it didn't add the download button. Without saving, if we refresh the page, you'll see that it has all those documents there. Because it used Ajax to store them in the database. At the end of day that is the behavior we wanted here in our component. We wanted the option to upload multiple [00:50:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m31s) documents to one document, and multiple media files. To be able to test them in the back-end, if you wanted to test any of them. Even be able to remove any of them at any time, just click on remove and it will be removed. In the front we'll be able to use the file names, and the user would be able to identify this is what I want. [00:50:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) The filenames get preserved while it is being stored in the server with this hash behind it. We are seeing the JavaScript we looked at earlier in action, it is uploading, it is deleting. This one is cropping which we will look at it a little more. That is seeing our drag and drop options in action.
Next one we wanted to show you here, is to upload some media file. I have a bunch of audio files, and I'm going to upload them. What I'm going to do is, I'm going to select a whole bunch of them, and then upload them all at once. This is what the Uploader can do. Let me see, there we go drop it, I can't see it yet, but it's uploading. I need to refresh the page. Let's give it a name. [00:49:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) The Document. In Description say: More Soon. Save this. It didn't upload all of them. Interesting. [00:49:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m24s) Let me try again. I've got 6 of them uploaded. I can see there are 6 documents and you can download them and test them. See if they are still fine. Why the home? The order of the home. We see that the media is working. Let's also do that with documents. Let's add some more documents. [00:49:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m57s) I've got a few selected and drag and drop them there. 123 and is uploaded. I need to check some of the JavaScript. I see it didn't add the download button. Without saving, if we refresh the page, you'll see that it has all those documents there. Because it used Ajax to store them in the database. At the end of day that is the behavior we wanted here in our component. We wanted the option to upload multiple [00:50:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m31s) documents to one document, and multiple media files. To be able to test them in the back-end, if you wanted to test any of them. Even be able to remove any of them at any time, just click on remove and it will be removed. In the front we'll be able to use the file names, and the user would be able to identify this is what I want. [00:50:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) The filenames get preserved while it is being stored in the server with this hash behind it. We are seeing the JavaScript we looked at earlier in action, it is uploading, it is deleting. This one is cropping which we will look at it a little more. That is seeing our drag and drop options in action.
### Server Side Of Implementation