joomla/Component-Builder
joomla/Component-Builder
38
22
Fork 10
Code Issues 75 Pull Requests Projects 4 Wiki Activity

Updated 057 Drag and Drop Upload functionality in JCB (markdown)

Amigo 2019-09-21 15:18:34 +02:00
parent 84ce225dfe
commit c457b593d2
1 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,19 +16,19 @@ 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 can 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)
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.
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)
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.
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. 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 validates 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!
@ -40,7 +40,7 @@ It has a method of getting a hash, a checksum of the package. You can make sure
[00:09:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m03s)
The package which has been imported is displayed here, and if you click Quiet, all the things that it is going to do will be hidden. I would suggest that you say 'No'. Force Local Update, means that if it finds a similar Fieldtype or Field or Admin View or anything that is similar, [00:09:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m29s) and the creation date is later in your system, it will overwrite it because it had been forced. If it finds it and the actual current date in your system is earlier and the one that is imported is later, it will automatically update it with the latest version. [00:09:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) **NB. That is why it is important to make backups**. The other advantage is if you get to Fieldtype that had been overwritten, and it is not really what you expected, you can go back one step in your history. Say 'Yes', Force that and then click 'Continue'. That simply adds a whole list of what has been imported, and it moved an image. Hello World is now in the system.
The package which has been imported is displayed here, and if you click Quiet, all the things that it is going to do will be hidden. I would suggest that you say 'No'. Force Local Update, means that if it finds a similar Fieldtype or Field or Admin View or anything similar, [00:09:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m29s) and the creation date is later in your system, it will overwrite it because it had been forced. If it finds it and the actual current date in your system is earlier and the one that is imported is later, it will automatically update it with the latest version. [00:09:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) **NB. That is why it is important to make backups**. The other advantage is if you get to Fieldtype that had been overwritten, and it is not really what you expected, you can go back one step in your history. Say 'Yes', Force that and then click 'Continue'. That simply adds a whole list of what has been imported, and it moved an image. Hello World is now in the system.
### Document Manager - Paid Package - Demonstration
@ -52,29 +52,28 @@ We are going to look at something completely different. It is the Document Manag
[00:12:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m03s)
Go out of this and in the Options of the Component there is a Media tab, that says what type of documents you want to allow. For our purpose I am going to say in Allow Document Format, 'PDF' for now, with the Media, 'MP3' and with the Images, 'jpeg'. With the images in this component, there is one image and I want it to be a specific dimension. [00:12:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m28s) For instance make the width to be 200 and the heights to be 350 and use that to crop my image('Crop All Doc Images'). [00:12:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m45s) I am using a library, which gets these values to decide how to crop the image if it is an image. If it is any of these it will not do anything. Only if it is an image it does use the cropping mechanism. It does it via an Ajax. Save and close. [00:13:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m11s) If we now click on 'New documents', we see this Drag and Drop area. In UIkit we see this in action. It says Upload Your Image, it tells you what the dimensions should be, if not the doc will be cropped to this size. [00:13:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m35s) <<<<<<<<
Go out of this and in the Options of the Component there is a Media tab, that says what type of documents you want to allow. For our purpose I am going to say in Allow Document Format, 'PDF' for now, with the Media, 'MP3' and with the Images, 'jpeg'. With the images in this component, there is one image and I want it to be a specific dimension. [00:12:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m28s) For instance make the width to be 200 and the heights to be 350 and use that to crop my image('Crop All Doc Images'). [00:12:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m45s) I am using a library, which gets these values to decide how to crop the image if it is an image. If it is any of these it will not do anything. Only if it is an image it does use the cropping mechanism. It does it via an Ajax. Save and close. [00:13:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m11s) If we now click on 'New documents', we see this Drag and Drop area. In UIkit we see this in action. It says Upload Your Image, it tells you what the dimensions should be, if not the doc will be cropped to this size. [00:13:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m35s)
That means if it's not this dimension it will be cropped to that, either large or downsize. By dropping the file or selecting a file from your computer, and formats allowed.jpeg, it tells you what formats are allowed. This is all done dynamically through this [00:13:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) Script that I'll show you in a moment. Then the same goes with the document. It tells your PDF is allowed and with the media it tells you mp3 is allowed. In the image, I'm allowing one image. Where as with the documents, I'm allowing multiple documents, and multiple media for one document. How this displays and works on the front-end? It works lovely, no problems. I'm not going to demonstrate that. That's not what this is all about. I'm going to demonstrate this functionality of uploading a file. [00:14:30](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m30s) You need to use this in your own Component, you will need to extend that and use it and make it more functional as it should be in your Component.
That means if it is not this dimension it will be cropped to the desired size.' _By dropping the file or selecting a file from your computer, and formats allowed.jpeg_ '. So it tells you what formats are allowed. This is all done dynamically through this Script. [00:13:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) Then the same applies to the document. It tells your 'PDF' is allowed and with the media, it tells you 'mp3' is allowed. In the image, I am allowing one image. Whereas with the documents, multiple documents are allowed, and multiple media for one document. It displays and works on the front-end without problems. I am going to demonstrate this functionality of uploading a file. [00:14:30](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m30s) You need to use this in your Component, and need to extend that and use it and make it more functional as it should be in your Component.
### Looking In The Code
[00:14:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m43s)
Let's go and look at the code. We need to first focus on the document area. We'll have to look at some of its fields that is attached. Some of it is JavaScript. The Ajax area which is where everything happens. As you'll see I'm using custom code placeholders almost everywhere. Because I'm reusing a lot of the scripts everywhere under components. [00:15:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m15s) I've therefore adapted it so that it could be used in multiple places. You'll see here I also have uploadfile, removeFile functions. It have target, type and field, filename, target, flush and type. It have values, all these values play a role within the behavior that we will eventually have [00:15:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m40s) or been demonstrated. On a paid, I didn't demonstrate it, I just showed you how it is. I will demonstrate it still.
Let's go and look at the code and first focus on the document area. It is necessary to look at some of its fields that are attached. Some of them are JavaScript. The Ajax area is where everything happens. Custom code placeholders are used almost everywhere since a lot of the scripts are reused everywhere under components. [00:15:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m15s) It is therefore adapted so that it could be used in multiple places. Here is 'uploadfile' and 'removeFile' functions. It have 'target', 'type', 'field', 'filename', 'target', 'flush' and 'type'. It has values, all these values play a role within the behavior that I eventually have to demonstrate.<<<<<<<<<<<<<<<<<<<
### VastDevMod - VDM - Generates Variables
[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 which really is related to the cash 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 I do not really pass it via the Ajax query. I have it in session memory. Only if these keys validate it does work. Sort of another layer, and another layer. There is 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 I am loading all the Uikit Files. I am manually adding it to the
Admin View. The admin back-end doesn't work as the Site Views where we could select a [00:17:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m19s) library and it dynamically answer to the view on compilation. You have to manually add it to the view and you'll do it in the Custom Script of the document.
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 cash 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 I do not pass it via the Ajax query. I have it in session memory. Only if these keys validate 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 I am loading all the Uikit Files. I am manually adding it to the
Admin View. The admin back-end doesn't work as the Site Views where we could select a [00:17:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m19s) library and it dynamically answers to the view on compilation. You have to manually add it to the view and you'll do it 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. 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.
### Individual Concepts - Notes - Main Media Uploader Note - Main Document Uploader note - Document Image Uploader note