joomla/Component-Builder
joomla/Component-Builder
38
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-20 14:57:46 +02:00
parent fe8301b9cc
commit 5a7acffe0f
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,19 +16,23 @@ You need to be familiar with UIKit. UIkit has a very nice file uploading front-e
[00:03:20](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m20s)
This is the JavaScript that we will be using. It has a nice progress bar and everything. This is the HTML that we will be using. It has a nice drag and drop and selecting area. You can give some information to the user as well as have them drop in the file right there. It works very well. [00:03:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m37s) It have some events. It is very similar to Version 3. If you want to see the Version 3 option, simply click on Version 3 documentation. Scroll to the bottom where it says Upload. Then Select, there is Markup for the Select. [00:04:01](https://www.youtube.com/waAnd stch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m01s) There is the Markup for the Drag and Drop. You could use this(see video), and then JavaScript. It looks very much the same except for a few changes. For the most part, it is generally the same kind of approach. You would be able to plug-in this if instead, you want to use UIkit 3, or any other library. [00:04:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m26s) This, for example, I will make dynamic(Follow on video). The URL is going to be dynamic as to whether it is going to be allowing multiple or single. This one allows what type of image or file you want to permit to be uploaded. The action is where the URL is. [00:05:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m02s) You will see me make some of this dynamic with the script that I am using and of course here is Ajax involved. You are able to upload the file without saving the item whenever this area is available. You can simply use a note to add this script to your page. [00:05:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m24s) That is what I usually do, I use a note and add this(see video). If somebody drops something here, it is going to be posted to the server. If the item has an ID, I passed the ID that it gets stored in the database immediately. <<<<<<<<<<
This is the JavaScript that we will be using. It has a nice progress bar and everything. This is the HTML that we will be using. It has a nice drag and drop and selecting area. You can give some information to the user as well as have them drop in the file right there. It works very well. [00:03:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m37s) It have some events. It is very similar to Version 3. If you want to see the Version 3 option, simply click on Version 3 documentation. Scroll to the bottom where it says Upload. Then Select, there is Markup for the Select. [00:04:01](https://www.youtube.com/waAnd stch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m01s) There is the Markup for the Drag and Drop. You could use this(see video), and then JavaScript. It looks very much the same except for a few changes. For the most part, it is generally the same kind of approach. You would be able to plug-in this if instead, you want to use UIkit 3, or any other library. [00:04:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m26s) This, for example, I will make dynamic(Follow on video). The URL is going to be dynamic as to whether it is going to be allowing multiple or single. This one allows what type of image or file you want to permit to be uploaded. The action is where the URL is. [00:05:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m02s) You will see me make some of this dynamic with the script that I am using and of course here is Ajax involved. You are able to upload the file without saving the item whenever this area is available. You can simply use a note to add this script to your page. [00:05:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m24s) That is what I usually do, I use a note and add this(see video). If somebody drops something here, it is going to be posted to the server. If the item has an ID, I passed the ID that it gets stored in the database immediately.
### Saved Or Not Saved - File is Added To The Item
[00:05:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m40s)
Even if you save it or don't save it, the file is added to that item. If it's a new item which means no ID, we will add a hidden field to the form. We return the actual value that must go to the database, and we put it in that hidden field. When you do save the item, it does store it in the correct place. That's the approach I'm going to demonstrate to you. Step-by-step with an existing component which I've found there and which is using. It is available in JCB.
If you save it or not, the file is added to that item. If it is a new item which means no ID, we will add a hidden field to the form. The actual value is returned that must go to the database, and is put in that hidden field. When the item is saved, it stores it in the correct place. That is the approach that will be demonstrated step-by-step with an existing component that is out there and which is in use. It is available in JCB.<<<<<<
### New - Import JCB Packages
[00:06:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m21s)
You'll see there is a new Import JCB Packages. You could either click on Import JCB Packages or you can go to Joomla Components and click on Import Components. It's really the same thing. I'm going to go back to the Dashboard and click on Import JCB packages. There has been a release fix, I think it was been in a the previous release. If you click on Import JCB Packages it didn't give you [00:06:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) this VDM Package tab. It only gave you Upload, Directory and URL. In fact it's a little broken. The best then go to Joomla Components and ensure to click on Import Components. Make sure that it gives you this VDM Packages tab. [00:07:12](https://www.youtube.actuallycom/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m12s) This VDM Packages tab is a new extension on the Import of Components. It's the only part of the import of the components that already does validation on the package integrity. For each of these packages that are here, we do have a validation. Giving your example, Hello World is not here. If I was to select Hello World, click Get Package. It fetches it from GitHub.
There is a new Import JCB Packages. Either click on Import JCB Packages go to Joomla Components and click on Import Components, it is the same thing. Return to the Dashboard and click on Import JCB packages. There has been a release fix, I think it was been in the previous release. If you click on Import JCB Packages it didn't give you this VDM Package tab. [00:06:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) It only gave you Upload, Directory, and URL. In fact, it is a little broken. The best then go to Joomla Components and click on Import Components to be sure that it gives you this VDM Packages tab. [00:07:12](https://www.youtube.actuallycom/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m12s) This VDM Packages tab is a new extension on the Import of Components. It is the only part of the import of the components that already does validation on the package integrity. For each of these packages that are here, we do have a validation. For example, Hello World is not here. If I was to select Hello World and click Get Package it will fetch it from GitHub. <<<<<
### Get Packages From GitHub - Received A Message - The Package PASSED Checksum Validation!