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-24 12:35:19 +02:00
parent d634ed360a
commit d2b0610ed3
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -163,25 +163,35 @@ We want to look at the getFileJS which has a different implementation and as you
[00:43:18](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m18s)
Let me demonstrate in our little new document some of these function which I now explained, and do exactly what it does. I've got a bunch of images, it is generic open source kind of images. I'm just going to grab one and dump it in Upload your image. You didn't see that, let me scroll down get that image, put it down a little lower, let me get another one. Let's use this house. [00:43:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m50s) I'm going to drag it there and highlights it for a moment. It has this little Uploader because we are on local network. It's very fast. When it started it says 'Your doc images is set'. That was built by JavaScript. There is the document [00:44:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m10s) image on display. There is 'Remove document image'. I can click that and it'll tell me are you sure you wanted to leave this document? Yes, and boom it gone. We back at Square One as if we had nothing. It doesn't only delete it from the page, it removed it from the server as well. Let's drag another one, just [00:44:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m33s) drag it there and drops it on Uploads. There is our nicely cropped image. It crops in the center of the image, because how does it know the house is on the side. It not doing that kind of smart detection yet. We are cropping the image in the most sensible way.
Let me demonstrate in our new document some of these function which I have explained. I have got a bunch of images, it is generic open source kind of images. I am going to grab one and dump it in 'Upload your image'. Let's use this house. [00:43:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m50s) I am going to drag it and highlights it for a moment. It has this little Uploader. When it started it says 'Your doc images is set'. That was built by JavaScript. There is the document image on display.[00:44:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m10s) There is 'Remove document image'. I can click that and it will tell me 'are you sure you wanted to leave this document?', 'Yes', and it is gone. It doesn't only delete it from the page, it removed it from the server as well. Let's drag another one, just [00:44:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m33s) drag it there and drops it on Uploads. There is our nicely cropped image. It crops in the center of the image, because how does it know the house is on the side. It not doing that kind of smart detection yet. We are cropping the image in the most sensible way.
### Demostration - Uploading A Document (see video)
[00:44:51](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m51s)
With the uploading of a document, it is more or less the same. Let me just get a document. We have a document, and you can Drag and Drop it in there. Again it uploads it, and with the upload it generates those links I told you, you could [00:45:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m10s) copy. Put it in the description if you want. You could test it. What is noteworthy here? Is that the name of the document doesn't get lost, while [00:45:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m25s) the place where the documents are added, is in the same folder. You could add multiple documents to this document. I'll just keep on stacking them though they even have the same name. Each one will be uniquely tagged to not be the same as the other. Which means that on the server we are storing this document with a [00:45:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m53s) long hash, sort of added onto the name. Which is an extra layer of security, that people if they could access the folder, they will at least know what the name is. Same with the image, if we were to inspect the image, you'll see [00:46:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m12s) that the image have this huge name: /doc_image_jpegxxxxxxxxxxxxxxxxxxxxxxxxxisland jpeg. So it's no longer than same name as the one you uploaded. It changes it and preserve the name for example in the documents option. That you giving to someone the document they have, what you expect. We do [00:46:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m38s) adapt the names for security, that you can't be allocated on the server if for some reason it is not a good document. You could test it by clicking here. And it should then bring it up in and be available as a download.
With the uploading of a document, it is more or less the same. If you have a document, and you can Drag and Drop it in there. Again it uploads it, and with the upload it generates those links I told you, you could copy.[00:45:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m10s) Put it in the description if you want. It can be tested. What is noteworthy here, is that the name of the document does not get lost, while the place where the documents are added, is in the same folder.[00:45:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m25s) You could add multiple documents to this document. I will just keep on stacking them though they have the same name. Each one will be uniquely tagged to not be the same as the other which means that on the server we are storing this document with a [00:45:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m53s) long hash, sort of added onto the name. Which is an extra layer of security, that people if they could access the folder, they will at least know what the name is. The same applies to image. If we were to inspect the image, you will see that the image have this huge name: /doc_image_jpegxxxxxxxxxxxxxxxxxxxxxxxxxisland jpeg. [00:46:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m12s) So it is no longer than same name as the one you have uploaded. It changes it and preserve the name for example in the documents option. That when you give the document to someone that they will have the document that you expect them to have. [00:46:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m38s) We do adapt the names for security, that it can not be allocated on the server if for some reason it is not a good document. You could test it by clicking here and it should then bring it up in and be available as a download.
### How The Download Works - Using Controller
[00:46:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m57s)
How the download works here with the document, I'm using a controller. If we hovered over this link, you will see, you can't see that. I'll just show you. I have copy the link, it's a little huge because we are using [00:47:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m25s) an encrypted path to the file. It could sometimes being encrypted or sometimes just be basic64 encrypted. But the point is we have what we see here as a task and download document. There is a controller called download. In my component, I will show you how this download document [00:47:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m54s) concept works, but you'll need to write that. You need to figure that one out. That's unto you, that's if you want people to download your documents. If it's just to upload images of course [00:48:09](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m09s) you don't need any of this. But it is only when you are going to have a downloadable file or media.
How the download works here with the document, I'm using a controller. If we hovered over this link, it is not visable. So I have to copy the link, it is long because we are using an encrypted path to the file.[00:47:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m25s) It could sometimes being encrypted or sometimes just be basic64 encrypted. But the point is we have what we see here as a task and download document. There is a controller called '`download`' in my component, This is how this download document [00:47:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m54s) concept works, but you will have to write that. You need to figure that one out if you want people to download your documents. If it is just to upload images of course you do not need any of this. But it is only when you are going to have a downloadable file or media.
### Demostration - Uploading A Media File (see video)
[00:48:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m17s)
Next one we wanted to show you here, is to upload some media file. I have a bunch of audio files, and I'm going to upload them. What I'm going to do is, I'm going to select a whole bunch of them, and then upload them all at once. This is what the Uploader can do. Let me see, there we go drop it, I can't see it yet, but it's uploading. I need to refresh the page. Let's give it a name. [00:49:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) The Document. In Description say: More Soon. Save this. It didn't upload all of them. Interesting. [00:49:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m24s) Let me try again. I've got 6 of them uploaded. I can see there are 6 documents and you can download them and test them. See if they are still fine. Why the home? The order of the home. We see that the media is working. Let's also do that with documents. Let's add some more documents. [00:49:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m57s) I've got a few selected and drag and drop them there. 123 and is uploaded. I need to check some of the JavaScript. I see it didn't add the download button. Without saving, if we refresh the page, you'll see that it has all those documents there. Because it used Ajax to store them in the database. At the end of day that is the behavior we wanted here in our component. We wanted the option to upload multiple [00:50:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m31s) documents to one document, and multiple media files. To be able to test them in the back-end, if you wanted to test any of them. Even be able to remove any of them at any time, just click on remove and it will be removed. In the front we'll be able to use the file names, and the user would be able to identify this is what I want. [00:50:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) The filenames get preserved while it is being stored in the server with this hash behind it. We are seeing the JavaScript we looked at earlier in action, it is uploading, it is deleting. This one is cropping which we will look at it a little more. That is seeing our drag and drop options in action.
Next one is how to upload some media files. I have a bunch of audio files, and I am going to upload them. What I am going to do, is to select a whole bunch of them, and then upload them all at once. This is what the Uploader can do. After it is dropped it will upload. The page needs to be refreshed and a name given to it. [00:49:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) The Document. In Description say: 'More Soon'. Save this. [00:49:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m24s) If it did not upload all of them, try again. I have 6 of them uploaded. There are 6 documents and you can download them and test them. See if they are still fine. 'Why the home?', 'The order of the home'. The media is working. Let us also do that with documents and add some more documents. [00:49:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m57s)<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
I've got a few selected and drag and drop them there. 123 and is uploaded. I need to check some of the JavaScript. I see it didn't add the download button. Without saving, if we refresh the page, you'll see that it has all those documents there. Because it used Ajax to store them in the database. At the end of day that is the behavior we wanted here in our component. We wanted the option to upload multiple [00:50:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m31s) documents to one document, and multiple media files. To be able to test them in the back-end, if you wanted to test any of them. Even be able to remove any of them at any time, just click on remove and it will be removed. In the front we'll be able to use the file names, and the user would be able to identify this is what I want. [00:50:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) The filenames get preserved while it is being stored in the server with this hash behind it. We are seeing the JavaScript we looked at earlier in action, it is uploading, it is deleting. This one is cropping which we will look at it a little more. That is seeing our drag and drop options in action.
### Server Side Of Implementation