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 08:21:29 +02:00
parent 151e3f494c
commit 76594d5078
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,25 +67,25 @@ Let's go and look at the code and first focus on the document area. It is necess
[00:15:49](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m49s)
You will also see here I've got this `setVastDevMod`, which is a function that generates for us some variables. Which in this case it is called `VDM` which gets placed in a variable called '`VastDevMod`'. This formation is what is used to identify the view from which the query is made. This is a long string that is related to the cache at that stage of the view ID and name. [00:16:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m33s) This is how I passed the view name and ID, so it is not passed via the Ajax query. I have it in session memory only if these keys validate that it does work. Sort of another layer, and another layer. There are many layers to [00:16:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) try and make this secure. Then this `adminKittwo` is where all the Uikit files are loaded. I am manually adding it to the
Admin View. The admin back-end does not work as the Site Views where we can select a library and then it dynamically answers to the view on compilation. You have to manually add it to the view and it is done in the Custom Script of the document. <<<<<<<<<<<<<<<<<<
Admin View. The admin back-end does not work as the Site Views where we can select a library and then it dynamically answers the view on compilation. You have to manually add it to the view and it is done in the Custom Script of the document.
### setfile Method - Image - Documents - Media
[00:17:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m48s)
I can show you some of these Snippets and then take it further. There's in the Custom Buttons area, there is the getVDM which I have explained. Again we have some custom script. That's all that we have there. In the JavaScript area, we again have setfile which is part of the script that will have to look at. You will see I'm using setfile on different places, because we have image, documents and media. [00:18:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m15s) They are all using the setfile method. It is a JavaScript function, and is declared in this customScript.
I can show you some of these Snippets and then take it further. In the Custom Buttons area, is the `getVDM` which I have explained. Again we have some custom script. In the JavaScript area, we again have `setfile` which is part of the script that we will have to look at. I am using `setfile` in different places because we have `image`, `documents` and `media`. [00:18:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m15s) They are all using the `setfile` method. It is a JavaScript function and is declared in this customScript.
### Individual Concepts - Notes - Main Media Uploader Note - Main Document Uploader note - Document Image Uploader note
[00:18:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m24s)
At the bottom of the footer, we have what is known as getfile snippet which again deals with some of the automated integration of the file, when drag and drop. It immediately displays on the page, this takes care of that. We'll go and look at those individual concepts. We are also going to see, like I said previously notes. [00:18:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m56s) There is the Main Media Uploader note and the Main Document Uploader note and the Document Image Uploader note. This is where I've added the HTML for the drag and drop that you see in the Admin View. Then we have for each of those correspondingly a hidden value for the Document Image key and [00:19:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m26s) the Main Document key and the Main Media key. All of these are hidden fields which is where we store these values. [00:19:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m40s) We'll look at that as well.
At the bottom of the footer, we have what is known as `getfile` snippet which again deals with some of the automated integration of the file, when drag and drop. It immediately displays on the page, this takes care of that. We will look at those individual concepts and will also see, as mentioned previously that there is the Main Media Uploader note and the Main Document Uploader note and the Document Image Uploader note. [00:18:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m56s) This is where I have added the HTML for the drag and drop that you see in the Admin View. Then we have for each of those correspondingly a hidden value for the Document Image key and the Main Document key and the Main Media key.[00:19:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m26s) All of these are hidden fields which is where we store these values. [00:19:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m40s)
### Uploading Concepts
[00:19:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m45s)
Let's go and see the code that is used. Let's start in the interface. Let's first look at one of these Uploading Concepts. But since I know what's happening there, I am already aware that the code is not there. It's also custom Placeholder snippet. Before we dive in, let me open the custom code area and go back into documents. We can go 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, we have 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) You'll see that I again have here upload your documents. I've got a span tag, that says main documents formats. It's going to be the place where we load the formats with JavaScript. Select the file from your computer. It's this snippet with a little bit of extra [00:21:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) flavor. That's all we are looking at. There are some conventions, like main documents uploader, that again upload-drop-main-documents. There are conventions which if we go over the code, eventually you'll see that those conventions is what really makes 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