From f51218b7d06687ca33b88a565e7662a38b7757fc Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Thu, 19 Sep 2019 08:31:37 +0200 Subject: [PATCH] Updated 057 Drag and Drop Upload functionality in JCB (markdown) --- 057-Drag-and-Drop-Upload-functionality-in-JCB.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/057-Drag-and-Drop-Upload-functionality-in-JCB.md b/057-Drag-and-Drop-Upload-functionality-in-JCB.md index 546c492..07ced2f 100644 --- a/057-Drag-and-Drop-Upload-functionality-in-JCB.md +++ b/057-Drag-and-Drop-Upload-functionality-in-JCB.md @@ -227,9 +227,18 @@ We end up here with the fullPath which is the filePath and the fileName and the [01:06:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m35s) -I'm 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's a document or a media. We are going to encrypt it. Again here we make sure that this ID value [01:07:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m04s) is greater than zero. Because if it's still a unsaved item, we don't 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's a document or if it's a media, [01:07:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m29s) then we load the filename. We are going to pass it back to the view, taking the results as you see here formats, it's 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. +I'm 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's a document or a media. We are going to encrypt it. Again here we make sure that this ID value [01:07:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m04s) is greater than zero. Because if it's still a unsaved item, we don't 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's a document or if it's a media, [01:07:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m29s) then we load the filename. We are going to pass it back to the view, taking the results as you see here formats, it's 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'. Because you want to have it downloadable, if it is media or document. If it's an image, we don't 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'. -????? +### Convention In The Hidden Field Name +[01:08:39](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m39s) -It all builds this result array and this is what we Give them back We give them back to result array And it gets started over here So the File format is added Success gets the file name which is this value here And then we start building some other things Switch are necessary [01:08:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m10s) Like the token link for the link Because you want to have the downloadable if Media document or if it's media If it's an image no we don't need any of this we can just skip that And then the key name And there we go We done Where is it it is actually a safe item We are going to update the database right now [01:08:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m35s) With this new target type And Target So 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 To play the hidden field name is build up from Target And target type [01:08:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m52s) and if these two are not correct we are going to not save this value At all And so we are building an object Which then we take And since we have validated this this is definitely the allowed view And this Object and this ID and then we update the database And Yes We're done [01:09:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m13s) We've got the File name And we are basically going to pass the filename Here Same way And return to the browser So 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 Encryption Sorry Resizing of the image I didn't give much explanation Get the folder path didn't You need to write all that up But You could make this work without knowing those things You [01:09:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m48s) You could Put a Hardcoded path Here is the file path And you could You know not do any cropping and let 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 really How I upload many of my Documents and Things Obviously 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 Fix it And then it fix it Everywhere for every every place it's been used And so there is sometimes the Need of decoupling some of these functions in some but I'm trying to Yes try as much as I can to not Do that So set filename array that's another function that you saw Here in in the upload where is it [01:10:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m47s) Set filename array This set file name array is really a key when you realize that the actual file Already exists So the ID is there Because that means that there are other files possibly still already in the database So with The add and basic view we actually trigger the set filename array 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 I decrypt them and Load new values to that And then basically 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 Actually adding multiple Media files that only one ended up Being remembered And that sort of the downside Of the current Implementation Is that if the ID doesn't Exist We're not able to actually keep track of that [01:11:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m55s) So it's only when the ID exist That we are able to Actually do multiple uploads at Once So I should actually Give a little bit heads up of the about that That you want to save the item You're actually ready to To expand upon it And to allow [01:12:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m13s) Multiple upload at Once So the set filename array is Is really dealing with multiple when you are having multiple so you'll see there is image And document Is when the file I'm using the The plural to tell me That it should allow multiple [01:12:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m32s) So if it's singular Image And document then I don't allow multiple I'm just gonna remove the old one And add the new Done And when it is plural And we are using the set filename array And we basically building It to [01:12:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m50s) actually be Multiple And then One thing I didn't Emphasize here Is That we actually remove the files as well There is a remove file right [01:13:06](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m06s) There's remove file And it also at some point does a validation To check whether the user has the Permission to remove files And And then will basically remove the file So that is Also and it's Also uses [01:13:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m23s) Is this file name But then it passes the remove Variable to it Which then means the action is not to add but to take Away and You will see that there The action here There is the Add and there is the take away option So behave still different [01:13:41](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m41s) So we still basically get back the array we still build an object and we still updated Database As well as Actually removing the file here Ok so 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 licence That's Only requirement Ok well [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 Basically That needs to be there These things Need to be here so you could Pause the film And Video [01:14:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m31s) And just make sure that you have the same kind of Ajax Query calls option And then here I am actually Doing some opening of the files You see that I'm building but I'm called links So this is going a little Beyond Just showing you a little bit of my implementation and these links Eventually End up on the page [01:14:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m57s) So we've go back to Our JavaScript Here Scroll down We see this get filed JS Now let's Again look at that get file JS Because You'll see that those links [01:15:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m13s) Actually come in To play there If I Remember correctly let see here Oh I see now is not in that JavaScript Is actually down here You see that here I got a Load the links to the page document links And I'm actually adding it to a variable called document links you see [01:15:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m37s) So in the Custom script Where is it it's not this one It's this one you'll see if I If I now search So I'll take this copy and here I'll search You'll see that I'm actually 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 And so that is how we deal with some of that And it it works very well To sort of pass value from JavaScript to PHP And have it available there Ok well I know this was a lot of [01:16:22](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m22s) Things to sort of take in and I would expect you to realize that that previous implementation is So much easier But like you've seen When someone actually does create a document And they Are able to so easily Just drag and Drop stuff And it just crops and It just gives your component so much an easier you know for you feel to it [01:16:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m52s) Instead of The olds you could still do the old select But the Drag and Drop is Becoming quite popular And this implementation is Really Very Very Yeah it's very nice to have And 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 really gonna give support on to this meaning that If you get stuck you on your own Because if It is really the truth that you will need to know your JavaScript you'll need to know 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 gonna be So easy for me to Do that Specially since I usually 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 have that code has issues in it [01:17:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m57s) Or errors in it that the That are like ok a very big problem or something Then please do feel free to Give me a heads up over there And we'll collaborate Improve it as Necessary At the end of the day This feature is really way behind What [01:18:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m19s) What you really need There is a media manager in In Joomla Which is actually ideal The advantage about this way is that your user is Is never gonna interfere with other users documents or images or Stuff So if you use this concept they not ever gonna actually 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 It doesn't affect other people it doesn't make you more vulnerable as the owner of the system Who uses the application So it is I think we better approach But like I said there is a media manager So if you go to content There is a media manager And there is a media file type Which [01:19:07](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m07s) Works very well And And can also add These kind of functionality to your component If this is a little bit too challenge To a big of a challenge for you Anyway thanks for watching I know this might again be so such a long Tutorial But I'm trying my very best [01:19:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m26s) To sort of get you on your feet and you to go.OK. +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 to 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've 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 it fix it everywhere for every place it's been used. There is sometimes the need of decoupling some of these functions in some, but I'm trying to do as much as I can to not to 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 a 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. +???? +So with The add and basic view we actually trigger the set filename array 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 I decrypt them and Load new values to that And then basically 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 Actually adding multiple Media files that only one ended up Being remembered And that sort of the downside Of the current Implementation Is that if the ID doesn't Exist We're not able to actually keep track of that [01:11:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m55s) So it's only when the ID exist That we are able to Actually do multiple uploads at Once So I should actually Give a little bit heads up of the about that That you want to save the item You're actually ready to To expand upon it And to allow [01:12:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m13s) Multiple upload at Once So the set filename array is Is really dealing with multiple when you are having multiple so you'll see there is image And document Is when the file I'm using the The plural to tell me That it should allow multiple [01:12:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m32s) So if it's singular Image And document then I don't allow multiple I'm just gonna remove the old one And add the new Done And when it is plural And we are using the set filename array And we basically building It to [01:12:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m50s) actually be Multiple And then One thing I didn't Emphasize here Is That we actually remove the files as well There is a remove file right [01:13:06](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m06s) There's remove file And it also at some point does a validation To check whether the user has the Permission to remove files And And then will basically remove the file So that is Also and it's Also uses [01:13:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m23s) Is this file name But then it passes the remove Variable to it Which then means the action is not to add but to take Away and You will see that there The action here There is the Add and there is the take away option So behave still different [01:13:41](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m41s) So we still basically get back the array we still build an object and we still updated Database As well as Actually removing the file here Ok so 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 licence That's Only requirement Ok well [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 Basically That needs to be there These things Need to be here so you could Pause the film And Video [01:14:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m31s) And just make sure that you have the same kind of Ajax Query calls option And then here I am actually Doing some opening of the files You see that I'm building but I'm called links So this is going a little Beyond Just showing you a little bit of my implementation and these links Eventually End up on the page [01:14:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m57s) So we've go back to Our JavaScript Here Scroll down We see this get filed JS Now let's Again look at that get file JS Because You'll see that those links [01:15:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m13s) Actually come in To play there If I Remember correctly let see here Oh I see now is not in that JavaScript Is actually down here You see that here I got a Load the links to the page document links And I'm actually adding it to a variable called document links you see [01:15:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m37s) So in the Custom script Where is it it's not this one It's this one you'll see if I If I now search So I'll take this copy and here I'll search You'll see that I'm actually 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 And so that is how we deal with some of that And it it works very well To sort of pass value from JavaScript to PHP And have it available there Ok well I know this was a lot of [01:16:22](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m22s) Things to sort of take in and I would expect you to realize that that previous implementation is So much easier But like you've seen When someone actually does create a document And they Are able to so easily Just drag and Drop stuff And it just crops and It just gives your component so much an easier you know for you feel to it [01:16:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m52s) Instead of The olds you could still do the old select But the Drag and Drop is Becoming quite popular And this implementation is Really Very Very Yeah it's very nice to have And 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 really gonna give support on to this meaning that If you get stuck you on your own Because if It is really the truth that you will need to know your JavaScript you'll need to know 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 gonna be So easy for me to Do that Specially since I usually 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 have that code has issues in it [01:17:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m57s) Or errors in it that the That are like ok a very big problem or something Then please do feel free to Give me a heads up over there And we'll collaborate Improve it as Necessary At the end of the day This feature is really way behind What [01:18:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m19s) What you really need There is a media manager in In Joomla Which is actually ideal The advantage about this way is that your user is Is never gonna interfere with other users documents or images or Stuff So if you use this concept they not ever gonna actually 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 It doesn't affect other people it doesn't make you more vulnerable as the owner of the system Who uses the application So it is I think we better approach But like I said there is a media manager So if you go to content There is a media manager And there is a media file type Which [01:19:07](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m07s) Works very well And And can also add These kind of functionality to your component If this is a little bit too challenge To a big of a challenge for you Anyway thanks for watching I know this might again be so such a long Tutorial But I'm trying my very best [01:19:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m26s) To sort of get you on your feet and you to go.OK.