diff --git a/057-Drag-and-Drop-Upload-functionality-in-JCB.md b/057-Drag-and-Drop-Upload-functionality-in-JCB.md index 839c769..5eb82cd 100644 --- a/057-Drag-and-Drop-Upload-functionality-in-JCB.md +++ b/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'.(`