From 8eafed5a41b2160bab19d40a492afc30697a6ac0 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Mon, 23 Sep 2019 09:36:05 +0200 Subject: [PATCH] Updated 057 Drag and Drop Upload functionality in JCB (markdown) --- 057-Drag-and-Drop-Upload-functionality-in-JCB.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/057-Drag-and-Drop-Upload-functionality-in-JCB.md b/057-Drag-and-Drop-Upload-functionality-in-JCB.md index f6d8419..483ed3d 100644 --- a/057-Drag-and-Drop-Upload-functionality-in-JCB.md +++ b/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) -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 [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) [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 [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'.(