diff --git a/057-Drag-and-Drop-Upload-functionality-in-JCB.md b/057-Drag-and-Drop-Upload-functionality-in-JCB.md index 07df1c6..4aeadc9 100644 --- a/057-Drag-and-Drop-Upload-functionality-in-JCB.md +++ b/057-Drag-and-Drop-Upload-functionality-in-JCB.md @@ -173,5 +173,32 @@ With the uploading of a document, it is more or less the same. Let me just get a [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. + +### 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 there, 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. + +### 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 we have in the documents Admin View. We're opening the PHP tab, have this Ajax area. Like I showed before you would need to set up the Ajax in 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. Make this method available to the Ajax call. There are some values that we set because every component I used, this stuff is different. For some we're using images, documents and media as the types. For some [00:52:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m23s) target the main and doc. The allowedView, there's 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. Little extra little gymnastics to add another layer there. + +### 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. Why am I using custom code? Because I'm reusing this. At the moment it doesn't look like I'm reusing it many places, it only says it's used in component. This is not the area where I'm doing my work, this is just for tutorials. I'm using a whole different developing environment [00:53:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m33s) or rather a developing system Joomla website than this one. This one is explaining and demonstrating. I'm 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. [00:53:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m57s) Media formats that are allowed in the system. You can adapt this to whatever you need. At the end of the day it is up to you to decide what you want to allow and what you wouldn't. The reality is this is the available formats. If you 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. We manually added this to the components configuration area. + +### Quick Demonstration How add 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. I'm going to close out, I don't want to do Hello World, I can show you with the Document Manager. We could use the same button in settings. We can edit if it hasn't have one, you can create one. You select fields [00:55:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m50s) with their custom values and the tabs in which they should be display. As you can see I've selected Allowed Document Formats(list), which is just a list of the formats and I set it to allow multiple selection. That's how I'm doing this Allowed Media, Allowed Image, and Allowed Documents. Then here's 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. I'm not going to explain that now. + + ???? -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 To figure that one out That's sort of Onto you That's if you want people to download your 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 gonna actually have a downloadable File Or media So next one we wanted to show you here It's just upload some media file Ok so here 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 Whole bunch of them [00:48:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m33s) And then upload them all at once Which is really what this apploader can actually do So let me see, there we go Drop it there And Can't see it yet but it's actually uploading uploading uploading And Think I need to refresh the page So let's give it a name [00:49:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) Let's say The Document Let's say More Soon And then save this And then see ok it didn't Actually upload all of them Interesting [00:49:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m24s) Let me try again Ok now I've got 6 of them uploaded so I can see there are 6 documents and you can Actually download them and test them See if they are still fine Why the home The order of the home Yes 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) So I've got a few selected and Drag and drop them there 123 And is uploaded I need to maybe check some of the JavaScript I see you didn't add the download button here But without saving if we just refresh the page you'll see that it actually has All those documents are there Because it's really used Ajax to Store them in the Database And so at the end of day That is the behaviour 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 And To be able to test them in the backend if you wanted to test any of them And in even be able to remove Any of them At any time Just click on remove and it will be removed and in the front We'll be able to use the file names and The user Would be able to identify oh ok so this is what I want [00:50:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) And so the filenames actually get preserved While it is actually being stored in the server With this Hash behind it And so We are seeing the JavaScript we looked at earlier in action it is uploading it is deleting This one is actually cropping which will look at it a little more So That is seeing our Drag and Drop [00:51:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m26s) Options in action Now let's go look at the server side of this implementation The server side we have in the documents admin View we're opening the PHP tab Got this Ajax area And Like I showed before you would obviously need to set up the Ajax with this area targets the controller So 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 Which is again we gonna look at inside of that Custom code Make this method available to the Ajax call There are some values that we set because every Component I used this stuff in is different and so for some we're using images ,documents and media As the types And for some [00:52:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m23s) The target or Main and Doc and the allow view there's only one of you in this component that is allowed To use the apploader and that is the document view and so they get view ID Is the function With which I get the actual view name And ID And it is basically using The session to sort of throw that around to insure That nobody is able to tamper with That value through the front in anyway [00:52:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m55s) So little extra little gymnastics to make Just add another layer there Ok so we gonna look now at this PHP Ajax apploader in the custom codes area So let's just go here and then Search for it So here in the custom codes area and why I'm using custom code because I'm Reusing this At the moment it doesn't look like I'm reusing it many places it only says it's used in component but this is not the The area where I'm actually doing my work this is just for tutorials I'm using a whole different developing environment [00:53:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m33s) or rather a developing System Joomla website than this one, so this one is just for Explaining and demonstrating ok so I'm reusing This code in many components And here We have formats, image formats that are allowed In the system Document formats that are allowed in the system [00:53:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m57s) Media formats that is allowed in the system and this you can adapt to whatever you need At the end of the day Is up to you to decide what you want to Allow and what you wouldn't, the reality is this is the available formats but as you remember Here where was it again 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 and These is Should be the same right it should be the same list having the same values But these are what is [00:54:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m36s) a field we created in Joomla a List field and so we manually added this to the components configuration area so if you don't know what that is Let me quickly show you So in the component Here is our component it has this component config If your component doesn't show one like this Hello World doesn't show a component config You can go into the component And then here in [00:55:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m16s) Let's see think settings There is this button here of create component config For this Joomla component and it's in this I'm gonna close out here I don't want to do that one of I could just show you with a document Manager Basically we could use the same button in settings There it is We can actually edit or now if it hasn't have one you can Create and here you select fields [00:55:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m50s) With a custom values and the tabs in which they should display and it's basically as you can see here I've selected allowed document formats list Which is just a list of The formats and I obviously said it to allow multiple selection So that's how I'm doing this allowed media allowed image and allowed documents and then here's the crop document image and 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 I'm gonna explain that now But that's really how we deal with that and that list that list that we looked at now [00:56:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m29s) is the same list as what To see here It should be the same Because This is the allowed And that list Shows the user what is allowed for the system So how can I Sorry notice [00:57:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m03s) Sorry about that Notice came up and messed up everything But I hate to start over now Anyway So this is what you could say as available formats and then those Dropdowns is what you as the owner of this website Where this application will run is what you will allow Ok and that this list should be the same as the one there but it also is sort of going to be use so that people Post a specific type [00:57:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m38s) As if it is allowed we're gonna able to sort of bounce this and make sure that Security wise we are safe So here is the upload file function And the upload file starts by first getting the view ID checking it And Then making sure that there is a view set of course And that that view is actually part of the allowed views array so they allowed views array if you remember In our [00:58:08](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m08s) Where did I show you that Ok it's in the admin View document admin view Maybe this one no here it is The allowed views is documents So that's why I'm saying I'm setting that outside of the Custom code because it Depends on which component we are working in right So if it is an allowed View We then get the target And the type and we set it to Global target and global target type [00:58:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m45s) Then we check that this type What is the format that we are talking about so If we think about The format There is Again we go back to this one, where is it? Here let's move it closer so we Close to each other That is the Formats that we allow the types because we want to [00:59:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m17s) Sort of validate that the person and who is uploading Is uploading the things we anticipate so it is setting the format with the type So if it's image it will be images If it's images it will be images If it's document it will be document if it's documents it'll be document and media will be media so that's the Types And we setting that is the format type now then we using a function get package from upload now if you watch the previous tutorial of using the file type uploader Then it's more or less the same kind of function So if I scroll down [01:00:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m02s) We'll get to it where is it get package from upload so the only differences we doing the application at get and the input in the function And we are targeting files because we are passing those values in the files place Then We are seeing what is the file we are checking whether these things are allowed warning import a file Error This kind of error you'll see I'm not throwing it to Joomla I'm adding it to the error messages [01:00:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m35s) Error error message Because we gonna have to give it back to the view We're not able to this is Ajaxs call he did nobody will see it if we just You know used the arrays warning or something So we are actually grabbing the value in saying We done here get out of here if we still going and so you see you could go through this and Very much the same implementation than the one we've demonstrated the only difference though is our Check method is actually a little bit more Taking that View [01:01:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m12s) And again validating it So we doing a 2nd layer of validation here And then checking whether this specific user that is now logged in has the right to actually Edit this item so it is doing some user validation And if not it removes the archive And it's really we still can have that remove method with little bit of the code that you saw me take out Is still left in it here In the previous Tutorial I use some of these codes and yeah so that's really all the Same I'm not gonna go into depth if you don't understand what I've just looked at here then please go back to the [01:01:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m56s) The previous tutorial watch that It gives you enough information so that we actually up here in our file upload Upload file here we at this point have the package And we passed the package to upload now Now move the file into place so remember we had to do that in the The previous here I'm using a function upload now and in the upload now function We are returning and if Any error now still remains It's gonna be doubt here where is errors that might have a curred here if this was false We would use that [01:02:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m36s) See that's the error message put it in error And Pass It out and if we were having Any other issues we will do there it's been an error and will pass it out so this error handling there already Now in upload now package We are checking whether the package is actually there the package name and we're starting to From that we are building the Name. Now remember I showed you or explain to you That we are using This we're preserving the filename but we are sort of hiding the filename so we Using the target the target type the file format and then this random key generator [01:03:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m17s) Now I'm not exactly sure I think all JCB helper classes comes out with this Random key so you could just use it in your component and you can decide how long this string should Be and then I'm using a little place holder which is little generic placeholder VDM And Then I'm adding the actual name of the file after this placeholder so that everything before this placeholder Is really internal my system uses this but the client uses everything this Side And so then if it's a document [01:03:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m56s) We are gonna need the folder path for hidden file path so again Get folder path is a function which I wrote And I'm not gonna share that with you But you can build your own helper class function To get the path to where you wanna put the file this is up to you I'm using a hidden file path But there is A lot of Discussion behind that If I don't pass any values like in this case [01:04:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m28s) It most probably return a public path And which would be where the images So every documents go in a hidden area Images go public And usually because the image you wanted to load somewhere So you don't want it to be behind The root folder of your website Ok now we end up here with the full path which is the file path Sorry for this this one here The filename and the file format [01:04:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m57s) So that becomes the file name And this becomes The file format Now I think you will notice that at this stage The package Name Is Is really what it's used to build this name here And we stripping the file format from that package name making sure [01:05:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m19s) That it doesn't have a file format in it Really to ensure that this Yeah this file is stored in exactly the format we detected as and not as what do I say it is Now We move The package This is where get interesting To its Final Destination if something fails at this point like it doesn't move [01:05:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m45s) We actually remove the package and we say there was an error So we just like we are done We not gonna worry about it If it succeeds then obviously if it's an image At this stage Image We definitely want to resize it so I've got a resize Image helper Class This is also something that you would need to write yourself [01:06:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m12s) Which Helps me to resize my image I passing it some values to actually target the image and resize it And it really doesn't change anything with the image location Or anything like that so I don't need any value back I just need it to resize it and get it done and I don't need to know anything else Then I'm doing some encryption here To see whether the basic encryption is available in this program And [01:06:42](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m42s) Then to actually use that encryption When I start storing the documents To the database So Here is a local file And We are checking if it's a document or a media We are going to encrypt it And Then 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 So we could just skip this basically So if we realize ok this This file or this Upload Doesn't have an ID Then we skip this function here and we rather do if it's an image If it's a document or is it it excuse me 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 like that And We are going to pass it back to The View Basically taking the results you See here Formats it's got a lock value Then a token [01:07:46](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m46s) Link So it has different behavior for different things And 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. +That's how we deal with that and that list that list that we looked at now [00:56:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m29s) is the same list as what To see here It should be the same Because This is the allowed And that list Shows the user what is allowed for the system So how can I Sorry notice [00:57:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m03s) Sorry about that Notice came up and messed up everything But I hate to start over now Anyway So this is what you could say as available formats and then those Dropdowns is what you as the owner of this website Where this application will run is what you will allow Ok and that this list should be the same as the one there but it also is sort of going to be use so that people Post a specific type [00:57:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m38s) As if it is allowed we're gonna able to sort of bounce this and make sure that Security wise we are safe So here is the upload file function And the upload file starts by first getting the view ID checking it And Then making sure that there is a view set of course And that that view is actually part of the allowed views array so they allowed views array if you remember In our [00:58:08](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m08s) Where did I show you that Ok it's in the admin View document admin view Maybe this one no here it is The allowed views is documents So that's why I'm saying I'm setting that outside of the Custom code because it Depends on which component we are working in right So if it is an allowed View We then get the target And the type and we set it to Global target and global target type [00:58:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m45s) Then we check that this type What is the format that we are talking about so If we think about The format There is Again we go back to this one, where is it? Here let's move it closer so we Close to each other That is the Formats that we allow the types because we want to [00:59:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m17s) Sort of validate that the person and who is uploading Is uploading the things we anticipate so it is setting the format with the type So if it's image it will be images If it's images it will be images If it's document it will be document if it's documents it'll be document and media will be media so that's the Types And we setting that is the format type now then we using a function get package from upload now if you watch the previous tutorial of using the file type uploader Then it's more or less the same kind of function So if I scroll down [01:00:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m02s) We'll get to it where is it get package from upload so the only differences we doing the application at get and the input in the function And we are targeting files because we are passing those values in the files place Then We are seeing what is the file we are checking whether these things are allowed warning import a file Error This kind of error you'll see I'm not throwing it to Joomla I'm adding it to the error messages [01:00:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m35s) Error error message Because we gonna have to give it back to the view We're not able to this is Ajaxs call he did nobody will see it if we just You know used the arrays warning or something So we are actually grabbing the value in saying We done here get out of here if we still going and so you see you could go through this and Very much the same implementation than the one we've demonstrated the only difference though is our Check method is actually a little bit more Taking that View [01:01:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m12s) And again validating it So we doing a 2nd layer of validation here And then checking whether this specific user that is now logged in has the right to actually Edit this item so it is doing some user validation And if not it removes the archive And it's really we still can have that remove method with little bit of the code that you saw me take out Is still left in it here In the previous Tutorial I use some of these codes and yeah so that's really all the Same I'm not gonna go into depth if you don't understand what I've just looked at here then please go back to the [01:01:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m56s) The previous tutorial watch that It gives you enough information so that we actually up here in our file upload Upload file here we at this point have the package And we passed the package to upload now Now move the file into place so remember we had to do that in the The previous here I'm using a function upload now and in the upload now function We are returning and if Any error now still remains It's gonna be doubt here where is errors that might have a curred here if this was false We would use that [01:02:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m36s) See that's the error message put it in error And Pass It out and if we were having Any other issues we will do there it's been an error and will pass it out so this error handling there already Now in upload now package We are checking whether the package is actually there the package name and we're starting to From that we are building the Name. Now remember I showed you or explain to you That we are using This we're preserving the filename but we are sort of hiding the filename so we Using the target the target type the file format and then this random key generator [01:03:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m17s) Now I'm not exactly sure I think all JCB helper classes comes out with this Random key so you could just use it in your component and you can decide how long this string should Be and then I'm using a little place holder which is little generic placeholder VDM And Then I'm adding the actual name of the file after this placeholder so that everything before this placeholder Is really internal my system uses this but the client uses everything this Side And so then if it's a document [01:03:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m56s) We are gonna need the folder path for hidden file path so again Get folder path is a function which I wrote And I'm not gonna share that with you But you can build your own helper class function To get the path to where you wanna put the file this is up to you I'm using a hidden file path But there is A lot of Discussion behind that If I don't pass any values like in this case [01:04:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m28s) It most probably return a public path And which would be where the images So every documents go in a hidden area Images go public And usually because the image you wanted to load somewhere So you don't want it to be behind The root folder of your website Ok now we end up here with the full path which is the file path Sorry for this this one here The filename and the file format [01:04:57](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m57s) So that becomes the file name And this becomes The file format Now I think you will notice that at this stage The package Name Is Is really what it's used to build this name here And we stripping the file format from that package name making sure [01:05:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m19s) That it doesn't have a file format in it Really to ensure that this Yeah this file is stored in exactly the format we detected as and not as what do I say it is Now We move The package This is where get interesting To its Final Destination if something fails at this point like it doesn't move [01:05:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m45s) We actually remove the package and we say there was an error So we just like we are done We not gonna worry about it If it succeeds then obviously if it's an image At this stage Image We definitely want to resize it so I've got a resize Image helper Class This is also something that you would need to write yourself [01:06:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m12s) Which Helps me to resize my image I passing it some values to actually target the image and resize it And it really doesn't change anything with the image location Or anything like that so I don't need any value back I just need it to resize it and get it done and I don't need to know anything else Then I'm doing some encryption here To see whether the basic encryption is available in this program And [01:06:42](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m42s) Then to actually use that encryption When I start storing the documents To the database So Here is a local file And We are checking if it's a document or a media We are going to encrypt it And Then 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 So we could just skip this basically So if we realize ok this This file or this Upload Doesn't have an ID Then we skip this function here and we rather do if it's an image If it's a document or is it it excuse me 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 like that And We are going to pass it back to The View Basically taking the results you See here Formats it's got a lock value Then a token [01:07:46](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m46s) Link So it has different behavior for different things And 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.