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 09:53:08 +02:00
parent 45e6137f5b
commit 84ce225dfe
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,25 +34,28 @@ There is a new Import JCB Packages. Either click on Import JCB Packages go to Jo
[00:07:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m44s)
It has a method of getting a hash, a checksum of the package. You can make sure that it tells you that ' _This package PASSED checksum validation!_ '. On this point, the package is on your server. You can click 'Cancel' and that will delete the package from your server. On the top of the page it tells you that the validation is passed. The actual package that we are distributing is the one you have now. You can verify that by clicking on this link http://raw.githubusevomponent.com/vdm-oi/JCB-Packages/master/JCB_helloWorld.sha. It should open a simple text string. This text string should be the same as the one you see In Data Importer. [00:08:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m32s) That is just a heads up and its an area where we started to add some checksum validation. It is not military grade but it is fair enough. <<<<<<
It has a method of getting a hash, a checksum of the package. You can make sure that it tells you that ' _This package PASSED checksum validation!_ '. On this point, the package is on your server. You can click 'Cancel' and that will delete the package from your server. On the top of the page, it tells you that the validation is passed. The actual package that we are distributing is the one you have now. You can verify that by clicking on this link http://raw.githubusevomponent.com/vdm-oi/JCB-Packages/master/JCB_helloWorld.sha. It should open a simple text string. This text string should be the same as the one you see In Data Importer. [00:08:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m32s) That is just a heads up and its an area where we started to add some checksum validation. It is not military-grade but it is fair enough.
### Imported Package - Quiet - Force Local Update
[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 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.
### Document Manager - Paid Package - Demonstration
[00:10:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m29s)
We are going to look at something completely different. It is the Document Manager it is a paid package which we distribute. You can buy this package from us. It does have all this functionality that I'm going to demonstrate in it. I'm going to use that, and I am going to add a key and click Continue. [00:11:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m02s) Then install this component in JCB. From there we will start demonstrating it's functionality. We have Document Manager installed. Let me quickly show you how it looks in action. I'm going to install it to this component Joomla website and demonstrate it. [00:11:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) We have Document Manager and we can create a document quite easily by clicking a new document. You'll see that there is: Allowed image formats are not set in the global settings, please notify your system administrator. You can't at this point upload anything, neither Image, neither Documents, neither any Media.
We are going to look at something completely different. It is the Document Manager which is a paid package that VDM distributes. It has all this functionality that I am going to demonstrate in it. I am going to use that, and add a key and click 'Continue'. [00:11:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m02s) Then install this component in JCB. From there we will demonstrate its functionality. We have Document Manager installed. Let me quickly show you how it looks in action. I am going to install it in this component Joomla website and demonstrate it. [00:11:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) We have Document Manager and we can create a document quite easily by clicking a new document. There is: 'Allowed image formats are not set in the global settings, please notify your system administrator'. You can not at this point upload anything, neither Image, neither Documents, neither any Media.
### Media Tab - Allow Document Format, Media and Images
[00:12:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m03s)
We'll 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'm 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, I'm only having one image and I wanted to be a specific dimension, [00:12:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m28s) I'm going to say I want the width to be 200 and the heights to be 350. It's almost like a book. A four kind of dimensions. I'm going to used that [00:12:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m45s) to crop my image. I'm using a library which l'll show you in a moment, which gets these values to decide upon how to go ahead and crop the image if it's an image. If it's any of these it doesn't do anything. Only if it's an image it does use the crop mechanism. It does it via an Ajax. We've done that save and close. If we now [00:13:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m11s) again click on new documents, we see this Drag and Drop area, when we looked in UIkit where we see this thing in action. It says Upload Your Image, it tells you what the dimensions should be, [00:13:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m35s) if not the doc will be cropped to this size. 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.
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.
### Looking In The Code