joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 81 Pull Requests Projects 4 Wiki Activity

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

Amigo 2019-09-25 15:51:24 +02:00
parent 809f1688d7
commit 928bfe59c5
1 changed files with 17 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,7 +91,7 @@ Let's look at the code that is used by starting in the interface. Let's first lo
[00:22:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m01s)
The JavaScript I'm using is this `uikitFileUploader` custom code. Let's look at that first. We can search for it and open 'uikitFileUploader'. This is the code that gets added have a little bit of PHP, and it is saying `[[[arg0]]]_formats'`. We are asking getting the global parameters of the formats we set. Remember it is set in the global settings. We are saying that `document` is the first parameter that is passed. [00:22:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m45s) We are saying document `formats`, to get the document formats. Here we have `[[[arg2]]]` and `[[[arg1]]]` `progressbar`. If you think about the id, it says `progressbar` which is the third argument that is `main`. Documents is the first argument because we counting from zero.[00:23:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m16s) It's saying `main documents`. If you look back at our thing here it says `main-documents-formats`. This is all part of `main documents`. It is the way we identify the progressbar. [00:23:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m44s) `Progressbar-main-documents` is an ID. There's only one of them on the page. It is targeting it here saying that is the `progressbar` we are going to use.
The JavaScript I'm using is this `uikitFileUploader` custom code. Let's look at that first. We can search for it and open 'uikitFileUploader'. This is the code that gets added have a little bit of PHP, and it is saying `[[[arg0]]]_formats'`. We are asking getting the global parameters of the formats we set. Remember it is set in the global settings. We are saying that `document` is the first parameter that is passed. [00:22:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m45s) We are saying document `formats`, to get the document formats. Here we have `[[[arg2]]]` and `[[[arg1]]]` `progressbar`. If you think about the id, it says `progressbar` which is the third argument that is `main`. Documents are the first argument because we counting from zero.[00:23:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m16s) It's saying `main documents`. If you look back at our thing here it says `main-documents-formats`. This is all part of `main documents`. It is the way we identify the progressbar. [00:23:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m44s) `Progressbar-main-documents` is an ID. There's only one of them on the page. It is targeting it here saying that is the `progressbar` we are going to use.
### Settings - JRouter(see video)
@ -115,7 +115,7 @@ Then if we have detected that no formats had been set, we are going to update th
[00:27:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m16s)
That is the reusable snippet. This same snippet uikitFileUploader is reused for various areas. If we were to close, and open the Media Note, It may be seen that it is really just using the same snippet. If you go to Script, you will see it is the same snippet. [00:27:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m47s) I am changing the variables that I am passing, it is saying `media-media-main`. Where the other one was saying `document-documents-main`. The same applies to the image. With the image there is also that kind of behavior. It says uikitImageUploader, this one is not using the FileUploader, it is using the ImageUploader which is a little different. [00:28:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) There is an 'ImageUploader' and there is 'ImagesUploader' in my custom Snippets. I'll show you why they are different. One allows one image and the file one allows more than one, this one only allows one. [00:28:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m45s) So it has a little bit of a different flavor and behavior. I will also paste this out for you to look at. Always remember these arguments behaves the same as an array which means that the first argument will always be 0, the second argument 1, and so forth. I'm using arguments in this snippet. Everywhere where I declare it, I am passing the three arguments that are required, use this `+` to pass it.
That is the reusable snippet. This same snippet uikitFileUploader is reused for various areas. If we were to close and open the Media Note, It may be seen that it is really just using the same snippet. If you go to Script, you will see it is the same snippet. [00:27:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m47s) I am changing the variables that I am passing, it is saying `media-media-main`. Where the other one was saying `document-documents-main`. The same applies to the image. With the image there is also that kind of behavior. It says uikitImageUploader, this one is not using the FileUploader, it is using the ImageUploader which is a little different. [00:28:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) There is an 'ImageUploader' and there is 'ImagesUploader' in my custom Snippets. I'll show you why they are different. One allows one image and the file one allows more than one, this one only allows one. [00:28:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m45s) So it has a little bit of a different flavor and behavior. I will also paste this out for you to look at. Always remember these arguments behaves the same as an array which means that the first argument will always be 0, the second argument 1, and so forth. I'm using arguments in this snippet. Everywhere where I declare it, I am passing the three arguments that are required, use this `+` to pass it.
### Div - Have It In Place
@ -151,7 +151,7 @@ The JavaScript does some checking and validating. I will put it out there and wh
[00:37:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m05s)
This '`setFile`' is what we are moving towards, because we want to make sure that the file after you have dragged and dropped it on the page, shows in the page once it is on the server. It is doing a little bit of checking to make sure everything is fine. We end up with what we called '`filename`', and it get passed. [00:37:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m36s) We are moving into '`setFile`', and the '`setFile`' is going to take the target and it is going to determine what kind of target it is and get the format, etc. We can build the '`filename`' correctly. There is some functions which you may not need, you can look through this and decide what to keep. We end up building a notice which has been set. [00:38:20](https://www.youtube.com/watch?eventuallyv=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s) It triggers the '`getFile`'. The '`getFile`' is the other function which if you look at the Admin View, go back to the JavaScript. We have the '`setFile`' and the '`getFile`'. [00:38:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m38s) The '`getFile`' gets another layer of validation and also make sure that everything behaves as it should. The rest of the snippet is a '`removefile`', and '`isJsonString`'. There is a little snippet to check if it is a JsonString and if it is empty. [00:39:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) It is all part of sanitizing and validating and making sure everything is the way we expect.
This '`setFile`' is what we are moving towards, because we want to make sure that the file after you have dragged and dropped it on the page, shows in the page once it is on the server. It is doing a little bit of checking to make sure everything is fine. We end up with what we called '`filename`', and it get passed. [00:37:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m36s) We are moving into '`setFile`', and the '`setFile`' is going to take the target and it is going to determine what kind of target it is and get the format, etc. We can build the '`filename`' correctly. There are some functions which you may not need, you can look through this and decide what to keep. We end up building a notice which has been set. [00:38:20](https://www.youtube.com/watch?eventuallyv=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s) It triggers the '`getFile`'. The '`getFile`' is the other function which if you look at the Admin View, go back to the JavaScript. We have the '`setFile`' and the '`getFile`'. [00:38:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m38s) The '`getFile`' gets another layer of validation and also make sure that everything behaves as it should. The rest of the snippet is a '`removefile`', and '`isJsonString`'. There is a little snippet to check if it is a JsonString and if it is empty. [00:39:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) It is all part of sanitizing and validating and making sure everything is the way we expect.
### GetFile
@ -163,19 +163,19 @@ 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 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.
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 are 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. 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.
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 the same name as the one you have uploaded. It changes it and preserves 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, 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.
How the download works here with the document, I'm using a controller. If we hovered over this link, it is not visible. 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
@ -183,25 +183,25 @@ How the download works here with the document, I'm using a controller. If we hov
Next 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. 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 and it is uploaded. I need to check some of the JavaScript. I see it did not add the download button. Without saving, if we refresh the page, you will 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 documents to one document, and multiple media files. [00:50:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m31s) To be able to test them in the back-end, if you want 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 will be able to use the file names, and the user would be able to identify the one he 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 deal with a bit more. That is our drag and drop options in action.
I've got a few selected and drag and drop them and it is uploaded. I need to check some of the JavaScript. I see it did not add the download button. Without saving, if we refresh the page, you will 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 documents to one document, and multiple media files. [00:50:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m31s) To be able to test them in the back-end, if you want 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 will be able to use the file names, and the user would be able to identify the one he wants. [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 deal with a bit more. That is our drag and drop options in action.
### Server Side Of Implementation
[00:51:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m28s)
Now let's go look at the server side of this implementation. The server side is in the documents Admin View. On opening the PHP tab, we have this Ajax area. Like I showed before you need to set up the Ajax where this area targets the controller. In the controller it creates all these necessary script [00:51:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m54s) to make this method. We are going to look at the inside of that custom code to make this method available to the Ajax call. There are some values that we set because every component I use this stuff in is different, so for some we are using `images`, `documents` and `media` as the types and for some targets the `main` and `doc`.[00:52:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m23s) Regarding the `allowedView`; there is only one view in this component that is allowed to use in the Uploader and that is the document view. The `getViewID` is the function which I get the actual view name and ID. It is using the session to throw that around to insure that nobody is able to tamper with that value through the front. So that is just extra gymnastics to add another layer.
Now let's go look at the server-side of this implementation. The server side is in the documents Admin View. On opening the PHP tab, we have this Ajax area. Like I showed before you need to set up the Ajax where this area targets the controller. In the controller, it creates all these necessary script [00:51:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m54s) to make this method. We are going to look at the inside of that custom code to make this method available to the Ajax call. There are some values that we set because every component I use this stuff in is different, so for some we are using `images`, `documents` and `media` as the types and for some targets the `main` and `doc`.[00:52:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m23s) Regarding the `allowedView`; there is only one view in this component that is allowed to use in the Uploader and that is the document view. The `getViewID` is the function in which I get the actual view name and ID. It is using the session to throw that around to insure that nobody is able to tamper with that value through the front. So that is just extra gymnastics to add another layer.
### phpAjaxUploader - Custom Code Area
[00:53:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m01s)
We are going to look at this `phpAjaxUploader` in the custom codes area. Let's Search for it in the custom code area. I am using custom code because I am reusing it. At the moment it does not look like I am reusing it in many places, it only says it is used in component. This is not the area where I am doing my work, this is just for tutorials. I am using a different Joomla website than this one. This one is only for demonstration. I am reusing this code in many components and we have `image` formats that are allowed in the system, `Document` formats that are allowed in the system and `Media` formats that are allowed in the system.[00:53:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m57s) You can adapt this to allow whatever you like. This is the available formats. Remember in the options area of our component, it has a media area and there we have allowed documents, allowed media formats, and allowed image formats. These should be the same. It should be the same list, having the same values. But these are a field we created in Joomla, a List field. This is manually added to the components configuration area.
We are going to look at this `phpAjaxUploader` in the custom codes area. Let's Search for it in the custom code area. I am using custom code because I am reusing it. At the moment it does not look like I am reusing it in many places, it only says it is used in component. This is not the area where I am doing my work, this is just for tutorials. I am using a different Joomla website than this one. This one is only for demonstration. I am reusing this code in many components and we have `image` formats that are allowed in the system, `Document` formats that are allowed in the system and `Media` formats that are allowed in the system.[00:53:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m57s) You can adapt this to allow whatever you like. This are the available formats. Remember in the options area of our component, it has a media area and there we have allowed documents, allowed media formats, and allowed image formats. These should be the same. It should be the same list, having the same values. But these are a field we created in Joomla, a List field. This is manually added to the components configuration area.
### Quick Demonstration How add A List Field To The Components Configuration Area
[00:54:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m48s)
If you don't know what that is, let me quickly show you. In the component it has this component config. If your component doesn't show one like this, Hello World, it doesn't show a component config, you can go into the component and then in [00:55:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m16s) settings there is this button '_Create component config for this Joomla component_'. Close, I do not want to do Hello World, I can show you with the Document Manager. We could use the same button in Settings. We can edit it if it has not have one, you can create one. You select fields with their custom values and the tabs in which they should be displayed.[00:55:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m50s) I have selected 'Allowed Document Formats(list)', which is just a list of the formats and I set it to allow multiple selection. That is how this Allowed Media, Allowed Image, and Allowed Documents are done. Then there is the crop document image. If you do not know how to create a field, and how to set radio buttons, or list, then go review the videos about that. That is how we deal with that and that list we have looked at now is the same list as what we see here. [00:56:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m29s) It should be the same because this is the allowed, and that list shows the user what is allowed for the system. [00:57:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m03s) This is what you could say is available formats, and then those drop-downs is what you as the owner of this website, where this application will run, will allow. This list should be the same as the one there, but it also is going to be used if people post a specific type, as if it is allowed. We are going to be able to bounce this and make sure that security wise we are safe.
If you don't know what that is, let me quickly show you. In the component, it has this component config. If your component doesn't show one like this, Hello World, it doesn't show a component config, you can go into the component and then in [00:55:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m16s) settings there is this button '_Create component config for this Joomla component_'. Close, I do not want to do Hello World, I can show you with the Document Manager. We could use the same button in Settings. We can edit it if it has not had one, you can create one. You select fields with their custom values and the tabs in which they should be displayed.[00:55:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m50s) I have selected 'Allowed Document Formats(list)', which is just a list of the formats and I set it to allow multiple selection. That is how this Allowed Media, Allowed Image, and Allowed Documents are done. Then there is the crop document image. If you do not know how to create a field, and how to set radio buttons or list, then go review the videos about that. That is how we deal with that and that list we have looked at now is the same list as what we see here. [00:56:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m29s) It should be the same because this is the allowed, and that list shows the user what is allowed for the system. [00:57:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m03s) This is what you could say is available formats, and then those drop-downs is what you as the owner of this website, where this application will run, will allow. This list should be the same as the one there, but it also is going to be used if people post a specific type, as if it is allowed. We are going to be able to bounce this and make sure that security-wise we are safe.
### uploadFile Function
@ -235,39 +235,36 @@ We end up here with the `fullPath` which is the `filePath` and the `fileName` an
[01:06:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m35s)
I am doing some encryption to see whether the basic encryption is available in this program. To use that encryption, when I start storing the documents to the database. Here is a local file, and we are checking if it is a document or a media and then encrypt it. Again here we make sure that this ID value is greater than zero.[01:07:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m04s) Because if it is still an unsaved item, we do not have any place in the database to add this. We could skip this. If we realize this file or this Upload doesn't have an ID, then we skip this function, and we rather do an image. If it is a document or if it is a media, then we load the filename.[01:07:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m29s) We are going to pass it back to the view, taking the results as you see here formats, it got a '`lock`' value and a '`token`' and [01:07:46](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m46s) '`link`'. It has different behavior for different things. It all builds this result array and this is what we give them back. It gets started over here(see video). The fileformat is added, success gets the `filename` which is this value here. Then we start building some other things which are necessary. [01:08:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m10s) Like the '`tokenLink`' for the '`link`' as you want to have it downloadable, if it is media or document. If it is an image, we do not need any of this. We can skip that. Then the '`keyName`'. We are done. Where as it is a safe item, we are going to update the database, [01:08:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m35s) with this new '`targetType`' and '`target`'.<<<<<<<<<<<<<<<<<<<<<
I am doing some encryption to see whether the basic encryption is available in this program. To use that encryption, when I start storing the documents to the database. Here is a local file, and we are checking if it is a document or a media and then encrypt it. Again here we make sure that this ID value is greater than zero.[01:07:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m04s) Because if it is still an unsaved item, we do not have any place in the database to add this. We could skip this. If we realize this file or this Upload doesn't have an ID, then we skip this function, and we rather do an image. If it is a document or if it is a media, then we load the filename.[01:07:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m29s) We are going to pass it back to the view, taking the results as you see here formats, it got a '`lock`' value and a '`token`' and [01:07:46](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m46s) '`link`'. It has different behavior for different things. It all builds this result array and this is what we give them back. It gets started over here(see video). The fileformat is added, success gets the `filename` which is this value here. Then we start building some other things which are necessary. [01:08:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m10s) Like the '`tokenLink`' for the '`link`' as you want to have it downloadable, if it is media or document. If it is an image, we do not need any of this. We can skip that. Then the '`keyName`'. We are done. Whereas it is a safe item, we are going to update the database, [01:08:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m35s) with this new '`targetType`' and '`target`'.
### Convention In The Hidden Field Name
[01:08:39](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m39s)
This is where the hidden field name, remember I said to you there's some convention in the hidden field name. Well, this is where that convention comes into play. The hidden field name is build up from 'target' and 'targetType'. If these two are not correct we are not going to save this value at all. We are building an object which we will take, since we have validated that this is definitely the allowed view, and this object and ID, then we update the database. We're done. [01:09:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m13s) We have the 'fileName' and we are going to pass the 'fileName' here in the same way, and return to the browser. That's the service side of this implementation. There are some things which I haven't explained. Like [01:09:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m33s) this resizing of the image. I didn't give much explanation. 'GetFolderPath' you don't need to write that all up. You could make this work without knowing those things. [01:09:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m48s) You could put a hardcoded path here as the filePath. You will not have to do any cropping, let the user make sure about the cropping. [01:10:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m01s) That is how I upload many of my documents and things. This is constantly improving because I'm using the snippet across multiple places. It's very easy for me to come in here and say oh this is not [01:10:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m17s) ideal and then fix it. Then I fix it everywhere for every place it's been used. There is sometimes the need for decoupling some of these functions in some, but I'm trying to do as much as I can to not to that.
Remember I said that there is some convention in the hidden field name. Well, this is where that convention comes into play. The hidden field name is build up from '`target`' and '`targetType`'. If these two are not correct we are not going to save this value at all. We are building an object which then we will take, since we have validated that this is definitely the allowed view, and this object and ID, then we update the database. We are done. [01:09:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m13s) We have the '`fileName`' and we are going to pass the '`fileName`' here in the same way, and return to the browser. That is the server side of this implementation. There are some things which I have not explained. [01:09:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m33s) Like this resizing of the image. I did not give much explanation. '`GetFolderPath`', you do not need to write that all. You could make this work without knowing those things. [01:09:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m48s) You could put a hardcoded path here as the `filePath`. It is not necessary to do any cropping, let the user make sure about the cropping. [01:10:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m01s) That is how I upload many of my documents and things. This is constantly improving because I am using the snippet across multiple places. It is very easy for me to come in here and say; this is not ideal and then fix it.[01:10:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m17s) Then I fix it everywhere for every place it has been used. There is sometimes the need for decoupling some of these functions in some, but I am trying to avoid that.
### SetFileNameArray - Another Function
[01:10:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m47s)
'setFileNameArray' is another function that you saw in the upload where is it 'setFileNameArray'. This 'setFileNameArray' is key when you realize that the actual file already exists because the ID is there. That means that there are other files possibly still already in the database. With the add and basic view, we trigger the 'setFileNameArray' function to check the database [01:11:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m16s) for that specific target field, get the values, encrypt them, load new values to that and then pass it back to us. Where if the item doesn't exist, that means it doesn't have an ID, I don't know if you remember when we [01:11:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m35s) did some demonstration, I was adding multiple media files that only one ended up being remembered, that is sort of the downside of the current implementation. If the ID doesn't exist, we're not able to keep track of that. [01:11:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m55s) It's only when the ID exists, that we are able to do multiple uploads at once.
'`setFileNameArray`' is another function that you saw in the upload where is it '`setFileNameArray`'. This '`setFileNameArray`' is key when you realize that the actual file already exists because the ID is there. That means that there are other files possibly still already in the database. With the add and basic view, we trigger the '`setFileNameArray`' function to check the database [01:11:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m16s) for that specific target field, get the values, encrypt them, load new values to that and then pass it back to us. Where if the item does not exist, that means it does not have an ID. Remember when we [01:11:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m35s) did some demonstration, I was adding multiple media files that only one ended up being remembered, that is sort of the downside of the current implementation. If the ID does not exist, we are not able to keep track of that. [01:11:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m55s) It is only when the ID exists, that we are able to do multiple uploads at once.
### Heads Up - Once Saved The Item - Ready To Allow Multiple
[01:12:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m03s)
I should give a little bit heads up about that. Once you have saved the item, you're ready to expand upon it and to allow multiple upload at once. The 'setFileNameArray' is dealing when you are having multiple. You'll see there are image and document. When the file I'm using is plural, it tells me that it should allow multiple. [01:12:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m32s) If it's singular, image and document, then I don't allow multiple. I'm just going to remove the old one, and add the new, done. When it is plural, we are using the 'setFileNameArray', and we are building it to be multiple.
Once you have saved the item, you are ready to expand upon it and to allow multiple upload at once. The '`setFileNameArray`' is dealing when you are having multiple. You'll see there are `image` and `document`. When the file I am using is plural, it tells me that it should allow multiple. [01:12:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m32s) If it's singular, `image` and `document`, then I do not allow multiple. I am just going to remove the old one and add the new one. When it is plural, we are using the '`setFileNameArray`', and we are building it to be multiple.
### 'removeFile' - Some Point Do Validation
[01:12:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m53s)
One thing I didn't emphasize here, is that we remove the files as well. There is a 'removeFile'. It also at some point does a validation to check whether the user has the permission to remove files. It will remove the file. It's also uses [01:13:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m23s) this 'setFileNameArray', but then it passes the remove variable to it. Which then means the action is not to add but to take away. You will see the action and the Add and the takeaway option. It behaves a little bit different. [01:13:41](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m41s) We still get back the array, we still build an object, and we still updated the database, as well as removing the file. All of this code I will dump on GitHub and the gits for you to reuse as you see fit. you'll obviously have to Adapt it And Keep it under an open-source license. That's the only requirement. [01:14:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m14s) That if all those things line-up and are in place, going back to our Admin View. 'CUSTOMCODE=phpAjaxUploader' needs to be there. These things need to be here(see video). You could pause the video [01:14:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m31s) and make sure that you have the same kind of Ajax query calls option. Here I am doing some opening of the files. You will see that I'm building what I have called 'links'. It is going a little beyond showing you a little bit of my implementation and these links eventually end up on the page. We've go back to our JavaScript, and scroll down, we will see this 'getFiledJS'.
One thing I did not emphasize here, is that we remove the files as well. There is a '`removeFile`'. It also at some point does a validation to check whether the user has the permission to remove files. It will remove the file. It also uses [01:13:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m23s) this '`setFileNameArray`', but then it passes the remove variable to it which then means the action is not to add but to take away. You will see the action and the Add and the takeaway option. It behaves a little bit different. [01:13:41](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m41s) We still get back the array, we still build an object, and we still updated the database, as well as removing the file. All of this code I will dump on GitHub and the gits for you to reuse as you see fit. You will obviously have to adapt it and keep it under an open-source license. That is the only requirement. [01:14:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m14s) If all those things line-up and are in place, we return to our Admin View. '`CUSTOMCODE=phpAjaxUploader`' needs to be there. These things need to be here(see video). You could pause the video and make sure that you have the same kind of Ajax query calls option. Here I am doing some opening of the files. You will see that I'm building what I have called '`links`'. It is going a little beyond to show you a little bit of my implementation and these links eventually end up on the page. Return to our JavaScript, and scroll down, we will see this '`getFiledJS`'.
### 'getFileJS'
[01:15:06](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m06s)
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.
Let's again look at that '`getFileJS`'. You will see that those links come into play. You will see that here I have '`/load the links to the page`'` document links`, and I am 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 will see if I will take this copy and search, you will see that I am 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 create 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 have 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 of this way is that your user is never going to interfere with other user documents or images or stuff. If you use this concept, they will not ever go 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 this 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 things to take in, and I would expect you to realize that the previous implementation is much easier. But like you have 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) You could still do the old select, but the drag and drop have become quite popular. This implementation is very nice to have. 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 am 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 is not going to be easy for me to do that, especially since I do not see the code. But if there is not any of the code that I have 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 can collaborate and improve it as necessary. At the end of the day, this feature is way behind what you really need. [01:18:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m19s) There is a media manager in Joomla which is ideal. The advantage of 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 go 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 does not affect other people. It does not 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 you can also add this kind of functionality to your component, if this is a little bit too a big of a challenge to you.