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-20 12:36:32 +02:00
parent 17957ac13d
commit ceed4a5f18
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,19 +4,19 @@
[00:00:00](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m09s)(_Click on these time links to see Youtube video_) [00:00:00](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m09s)(_Click on these time links to see Youtube video_)
Those of you who have not already watch how to use the file field type to upload a file in JCB. If you haven't watched this, I would suggest that you first must come and watch this tutorial, because a lot of things that I am going to explain, I'm not going to go into depth again. Otherwise [00:00:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m25s) it's going to take 2 hours. In this tutorial I'm going to talk about a Drag and Drop Automated Crop Functionality, which could also be used instead of this implementation(how to use the file field type to upload a file in JCB). This implementation would be much more limited. [00:00:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m47s) You could do a crop with this(how to use the file field type to upload a file in JCB) one as well, but we haven't demonstrated that, we are going to demonstrate it in this tutorial. The library I'm going to use before I go on, let me just add a link to this video underneath the one that you watching. This tutorial deals with the Drag and Drop Automated Crop Functionality, which could also be used instead of this implementation(how to use the file field type to upload a file in JCB). This implementation would be much more limited. [00:00:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m47s) A crop can be done with this(how to use the file field type to upload a file in JCB) as well, and since it has not been demonstrated before it it will be done in this tutorial. There is a link to this library that I am going to use below this video.
### UIKit - Very Nice File Uploading Front-end ### UIKit - Very Nice File Uploading Front-end
[00:01:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m13s) [00:01:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m13s)
The other thing you need to know about is UIKit. I suppose by now you're very familiar of UIkit. UIkit has a very nice file uploading front-end, which I have used quite often. [00:01:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m29s) I am going to demonstrate using UIkit upload. If you know anything about JavaScript and that kind of stuff, it wouldn't be hard to plug-in Bootstraps or any other library which you want to use. JCB [00:01:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m47s) can be scaled to be using other libraries. You can go to libraries and setup the new library and then include the files in your Admin View. At this point I'm going to use UIkit. I'm going to use the older version to UIkit in my presentation. [00:02:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m14s) That's the one I've already got going in some of my projects. [00:02:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) Where would you like to go? You would like to go to get UIkit Version 2, to Components. You'll see there iNow s a Upload at the very bottom [00:03:00](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m00s) that explains to you how to use this library. You need to be familiar with UIKit. UIkit has a very nice file uploading front-end, which I have used quite often. [00:01:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m29s) I am going to demonstrate this by using UIkit upload. If you are familiar with JavaScript, it would not be hard to plug-in Bootstrap or any other library which you want to use. [00:01:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m47s) JCB can be scaled to use other libraries. You can go to libraries and set up the new library and then include the files in your Admin View. In this presentation, I will be using the older Uikit version which is the same one that I am using in some of my projects. [00:02:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) Go to get UIkit Version 2, to Components. There is an Upload at the very bottom that explains to you how to use this library.
### Using JavaScript - HTML - Markup For Select - Drag And Drop ### Using JavaScript - HTML - Markup For Select - Drag And Drop
[00:03:20](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m20s) [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 have a nice progressbar and everything. This is the HTML that we'll be using. It have 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. I've used it for number of years. [00:03:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m37s) It have some events. It's very similar to Version 3. If you wanted to see Version 3 option, you'd 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'd use this(see video), and then JavaScript. It's look very much the same there are a few changes. Little bit changes in the those but for the most part it's generally the same kind of approach. You would naturally be able to plug-in this if you instead want to use UIkit 3, [00:04:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m26s) or any other library. You are going to see me making, for example, this dynamic. The URL is going to be dynamic. And whether it's going to be allowing multiple or only one. This one allowed you what type of image of 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'll see me make some of this dynamic with the script that I'm using. And of course here we are talking Ajax. You are able to upload the file without saving the item whether this area is available. You can simply use a note to add this [00:05:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m24s) script to your page. That's what I usually do, I use a note and add this(see video). Somebody drop something here, it's going to be post 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 ### Saved Or Not Saved - File is Added To The Item