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

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

Amigo 2019-09-23 09:36:05 +02:00
parent 76594d5078
commit 8eafed5a41
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,37 +85,41 @@ 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) [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, 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 ### Snippet - uikitFileUploader custom code - progressbar-main-document-formats
[00:22:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m01s) [00:22:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m01s)
The JavaScript I'm using is this uikitFileUploader custom code. Let's look at that first. We can search for it. We can open uikitFileUploader. This is the code that gets added. It have a little bit of PHP, and it is saying [[[arg0]]]_formats'. We are asking getting the global parameters of the formats we set. Remember I showed you, we set it in the global settings. We are saying document is the first parameter we are passing. [00:22:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m45s) We are saying document formats, and we are getting the document formats. Here we have [[[arg2]]] and [[[arg1]]] progressbar. If you think about the id, it says progressbar which is the third argument that is main. Documents is the first argument because we counting from [00:23:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m16s) zero. It's saying main documents. If you look back at our thing here it says main documents formats. This is all part of main documents. It is the way we identify the progressbar. [00:23:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m44s) Progressbar-main-documents is an ID. There's only one of them on the page. It's targeting it here saying that's the progressbar we are going to use. The JavaScript I'm using is this `uikitFileUploader` custom code. Let's look at that first. We can search for it and open 'uikitFileUploader'. This is the code that gets added have a little bit of PHP, and it is saying `[[[arg0]]]_formats'`. We are asking getting the global parameters of the formats we set. Remember it is set in the global settings. We are saying that `document` is the first parameter that is passed. [00:22:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m45s) We are saying document `formats`, to get the document formats. Here we have `[[[arg2]]]` and `[[[arg1]]]` `progressbar`. If you think about the id, it says `progressbar` which is the third argument that is `main`. Documents is the first argument because we counting from zero.[00:23:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m16s) It's saying `main documents`. If you look back at our thing here it says `main-documents-formats`. This is all part of `main documents`. It is the way we identify the progressbar. [00:23:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m44s) `Progressbar-main-documents` is an ID. There's only one of them on the page. It is targeting it here saying that is the `progressbar` we are going to use.
### Settings - JRouter(see video) ### Settings - JRouter(see video)
[00:24:06](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m06s) [00:24:06](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m06s)
Then it have some settings. The settings is the action, we are using JRouter. JRouter is a little 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's a back-end or front-end call, that it executes it correctly. That is your component name. The [[[arg1]]] again would be the second argument, which is in our case [00:24:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m52s) documents. 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 which is being used to identify the view. It's making a query on this area. It is set dynamically. 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.
### Adding Formats ### Adding Formats
[00:25:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m21s) [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. Again we have other. [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 [00:26:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m16s) formats, which would be documents and main. If we look at our div, we will see the formOk so tats is documents-main-formats, it's targeting this span tag, basically adding 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 ### If No Formats - Update div - Upload Drop Area
[00:26:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m44s) [00:26:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m44s)
Then if we've detected that you don't have any formats 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 displays behavior on that page.
### Reusable Snippet - uikitFileUploader ### Reusable Snippet - uikitFileUploader
[00:27:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m16s) [00:27:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m16s)
That is the reusable snippet. I'm reusing this same snippet uikitFileUploader for various areas. If we were to close out here, and I was then to open the Media Note, You'll see that it's really just using the same snippet. If you go to Script, you will see it's the same snippet. [00:27:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m47s) I'm changing the variables I'm passing, it is saying media-media-main. Where's the other one was saying document-documents-main. The same goes with the image. The image we also have that kind of behavior. It says uikitImageUploader, this one is not using the FileUploader, it's 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 there 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 are behaving the similar way 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 are behaving the similar way 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.
### Div - Have It In Place ### Div - Have It In Place