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

8
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_)
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
[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
[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
@ -259,4 +259,4 @@ One thing I didn't emphasize here, is that we remove the files as well. There is
Let's again look at that 'getFileJS'. You'll see that those links come in to play. You will see that here I have 'load the links to the page' document links, and I'm adding it to a variable called 'documentLinks'. [01:15:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m37s) In the Custom script, 'getFileJS' you'll see if I'll take this copy and search, you'll see that I'm using that array and saying, is this property there? [01:16:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m03s) And then creating a link. That is how we deal with some of that. It works very well, to sort of pass value from JavaScript to PHP, and have it available there.
I know this was a lot of [01:16:22](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m22s) things to take in, and I would expect you to realize that the previous implementation is much easier. But like you've seen when someone does create a document, and they are able to easily drag and drop stuff, it crops it and gives your component a much easier feel to it. [01:16:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m52s) Instead of the old you could still do the old select, but the drag and drop has become quite popular. This implementation is very nice to have. I'm sure from what I've shown you, you should be able to get this going in your component. [01:17:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m14s) I'm not going to give support on to this, meaning that if you get stuck, you are on your own. You will need to know your JavaScript, and your PHP, and you will need to know how to debug, and how to line-up these concepts that they all [01:17:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m36s) I work in synergy together. It's not going to be easy for me to do that, especially since I do not see the code. But if there isn't any of the code that I've share on Gits, which I will also put in the description below this video. Even if that code has issues in it, [01:17:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m57s) or errors that are a very big problem or something. Then please do feel free to give me a heads up over there. We'll collaborate and improve it as necessary. At the end of the day this feature is way behind what [01:18:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m19s) you really need. There is a media manager in Joomla which is ideal. The advantage about this way, is that your user is never going to interfere with other users documents or images or stuff. If you use this concept, they will not ever going to look on your server at a list and select stuff. This is why I think people would like this, [01:18:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m43s) because they can upload stuff in and it doesn't affect other people. It doesn't make you more vulnerable as the owner of the system or who uses the application, it is a better approach. But like I said there is a Media Manager. If you go to content, there is a Media Manager, and a media file type which [01:19:07](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m07s) works very well, and can also add these kind of functionality to your component, if this is a little bit too a big of a challenge for you.
I know this was a lot of [01:16:22](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m22s) things to take in, and I would expect you to realize that the previous implementation is much easier. But like you've seen when someone does create a document, and they are able to easily drag and drop stuff, it crops it and gives your component a much easier feel to it. [01:16:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m52s) Instead of the old you could still do the old select, but the drag and drop has become quite popular. This implementation is very nice to have. I'm sure from what I've shown you, you should be able to get this going in your component. [01:17:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m14s) I'm not going to give support on to this, meaning that if you get stuck, you are on your own. You will need to know your JavaScript, and your PHP, and you will need to know how to debug, and how to line-up these concepts that they all [01:17:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m36s) I work in synergy together. It's not going to be easy for me to do that, especially since I do not see the code. But if there isn't any of the code that I've share on Gits, which I will also put in the description below this video. Even if that code has issues in it, [01:17:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m57s) or errors that are a very big problem or something. Then please do feel free to give me a heads up over there. We'll collaborate and improve it as necessary. At the end of the day this feature is way behind what [01:18:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m19s) you really need. There is a media manager in Joomla which is ideal. The advantage about this way, is that your user is never going to interfere with other users documents or images or stuff. If you use this concept, they will not ever going to look on your server at a list and select stuff. This is why I think people would like this, [01:18:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m43s) because they can upload stuff in and it doesn't affect other people. It doesn't make you more vulnerable as the owner of the system or who uses the application, it is a better approach. But like I said there is a Media Manager. If you go to content, there is a Media Manager, and a media file type which [01:19:07](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m07s) works very well, and can also add these kind of functionality to your component, if this is a little bit too a big of a challenge for you.