From 0aeb60b3f8262f82dfa16014212a3afcc4d3d599 Mon Sep 17 00:00:00 2001
From: Amigo <49749100+aamigo@users.noreply.github.com>
Date: Thu, 12 Sep 2019 12:00:29 +0200
Subject: [PATCH] Updated 057 Drag and Drop Upload functionality in JCB
 (markdown)

---
 057-Drag-and-Drop-Upload-functionality-in-JCB.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/057-Drag-and-Drop-Upload-functionality-in-JCB.md b/057-Drag-and-Drop-Upload-functionality-in-JCB.md
index b70b718..be7449b 100644
--- a/057-Drag-and-Drop-Upload-functionality-in-JCB.md
+++ b/057-Drag-and-Drop-Upload-functionality-in-JCB.md
@@ -13,10 +13,12 @@ Those of you who have not already watch how to use the file field type to upload
 
 The other thing you need to know about is UIKit. I suppose by now you're very familiar of UIkit. UIkit has a very nice file uploading front-end, which I have used quite often.  [00:01:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m29s) I am going to demonstrate using UIkit upload. If you know anything about JavaScript and that kind of stuff, it wouldn't be hard to plug-in Bootstraps or any other library which you want to use. JCB [00:01:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m47s) can be scaled to be using other libraries. You can go to libraries and setup the new library and then include the files in your Admin View. At this point I'm going to use UIkit. I'm going to use the older version to UIkit in my presentation. [00:02:14](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m14s) That's the one I've already got going in some of my projects. [00:02:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) Where would you like to go? You would like to go to get UIkit Version 2, to Components. You'll see there is a Upload at the very bottom [00:03:00](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m00s) that explains to you how to use this library. 
 
-### Using JavaScript
+### Using JavaScript - HTML - Markup For Select - Drag And Drop 
 
 [00:03:20](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m20s)
 
+This is the JavaScript that we will be using. It have a nice progressbar and everything. This is the HTML that we'll be using. It have a nice drag and drop and selecting area. You can give some information to the user as well as have them drop in the file right there. It works very well. I've used it for number of years. [00:03:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m37s) It have some events. It's very similar to Version 3. If you wanted to see Version 3 option, you'd simply click on Version 3 documentation. Scroll to the bottom where it says Upload. Then Select, there is Markup for the Select. [00:04:01](https://www.youtube.com/waAnd stch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m01s) There is the Markup for the Drag and Drop. You'd use this(see video), and then JavaScript. It's look very much the same there are a few changes. Little bit changes in the those but for the most part it's generally the same kind of approach. You would naturally be able to plug-in this if you instead want to use UIkit 3, [00:04:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m26s) or any other library. You are going to see me making, for example, this dynamic. The URL is going to be dynamic. And whether it's going to be allowing multiple or only one. This one allowed you what type of image of file you want to permit to be uploaded. The action is where the URL is. [00:05:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m02s) You'll see me make some of this dynamic with the script that I'm using. 
+
 ????
 
-This is the JavaScript that we will be using. It's got a nice progressbar and everything. This is the HTML that we'll be using. It's got a nice  drag and drop and selecting area. You can give some information to the user as well as have them drop the file right there. It works very well. I've used it for number of years. [00:03:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m37s) It's got some events. It's very similar to Version 3. If you wanted to see Version 3 option, you'd simply click on Version 3 documentation. Scroll somewhere to the bottom where it says download. And here it is Select there is the markup for the select [00:04:01](https://www.youtube.com/waAnd stch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m01s) And then the Drag and Drop there is the markup for the Drag and Drop so you'd use This And then this JavaScript So it's look very much the same as the few changes of course Little bit changes in the those but For the more part it's generally the same kind of approach so you would naturally just be able to plug-in this If instead you wanna use UIkit 3 [00:04:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m26s) Or any other library You gonna see me making for example this dynamic And The URL is going to be dynamic And whether it's going to be allowing multiple or only one all those kind of Let me I don't think the previous one and had the multiple option But this one also has allowed You know what what What type of image of file do you want to permit to be uploaded And the action is where the URL is right [00:05:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m02s) And yeah so you'll see me actually make some of this dynamic With the script that I'm using And of course here we are talking Ajax Oh so you are able to upload the File without saving The item Whether for this area is available And you simply can use a note To actually Add this [00:05:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m24s) Script to your page So that's what I usually do I use a note and just add this Somebody drop something here it's gonna post to the server And so if the item has ID I passed the ID So that it gets stored in the database immediately so even if you save it or don't save the file actually gets added to that item And if it's a new item which means no ID we actually add a hidden field To the form So we return the actual value that must go to the database [00:05:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m59s) And we put it in that hidden field So did when you then do save the item It actually does store it in the correct place So that's sort of the approach I'm gonna demonstrate that to you Step-by-step With an existing component which I really I got out there and which is using [00:06:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m19s) And it is actually available In JCB so you'll see there this new import JCB packages You could either click on this Or you can go to Joomla components and click on import components Is the same is really the same thing So I'm gonna go back to dashboard And click on import JCB packages There has been a release fix I think it was been in a The previous release if you clicked on import JCB packages it actually didn't Yeah I didn't give you this doesn't give you [00:06:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) This Package tab here It gave you only those In fact it's a little broken So best then go to Joomla components And Ensure to click on Import components Then to be sure that it gives you this VDM packages tab [00:07:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m12s) This VDM and packages tab is in new extension on the import of components It's actually the only Part of the import of the components that already does Actual validation on the package integrity So for each of these packages that I hear we actually do have a validation so giving your example Hello World is not Already if we come here will See Hello World isn't here So [00:07:39](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m39s) If I was to now Select Hello World Click get package It actually fetches it from GitHub And it has a method of actually Getting a hash a checksum Of the package Now you can make sure that It tells you here that the validation so now this point the package is on your server [00:08:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m02s) Now you can click cancel and that will delete the package from your server But This here tells you that the validation is pass so what is The actual package that we are distributing is the one you've now got And you can verify that By click on this link so if you click on this link It should open a simple A text string it's taking a moment my network here Ok and this text string Should be the same [00:08:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m32s) As the one You see here That is sort of just a heads up and its an area which we now We started adding some that checks on validation And yeah it's not military grade but it's Fair enough I think I anyone trying to NOW stand in the middle of this He's gonna have Quite crazy gymnastics too [00:08:58](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m58s) To take care of Ok so at this point we The package which is being imported is Displayed here and you just click Quiet means that You don't see all of the things it's doing I would suggest you Say no you wanna see everything Force update Means that if it finds a similar field type or a similar field or a similar admin View anything that is similar [00:09:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m29s) And the creation date Is Younger in your system It actually Overwrites it Because you're forced it if it If it finds it and the actual current date in your system Is older So that the one you importing is younger it automatically update it With the latest [00:09:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) Newest version This is how it works And that's why we telling you to make backups Because well the other advantages if you get to field type that was overwritten And it's not really what you expected You actually got history you can go back one step Usually you would Ok So I'm gonna say yes force that and then continue And that simply adds [00:10:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m16s) a whole list of What it's done What is imported And it also moved an image shows you that Tells you done Ok so there we go Hello World is Is now in the system Now We are going to look at something completely different And it is actually [00:10:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m35s) The Document manager is it paid Is a paid package which We distribute You can obviously buy this package From us It actually does have all this functionality that I'm going to demonstrate now In it and so I'm just gonna use that can I add a key here and click Continue [00:11:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m02s) And then basically install this component In JCB And then from there we will start demonstrating it's functionality Ok so we got document manager now installed here Let me quickly show you how it looks in action So I'm gonna install it to this component Joomla website And demonstrate it Ok Now [00:11:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) We have a here component manager Sorry document manager and we can create a document quite easily By clicking a new document and you'll see that there is some allowed image formats are not set in the global settings please Notify your system administrator So you can't at this point upload Actually anything Neither image neither documents neither any media So we'll go out of this and in the options of the component there is actually [00:12:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m03s) A media tab That says what type of documents you wanna allow So For our purpose I'm just gonna say PDF for now with the media I'm just MP3 and with the images just jpeg Now with The images I know in my This component I'm only having one image and I wanted to be a specific dimension [00:12:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m28s) So I'm gonna say I want the width To be 200 And the heights To be 300 so make it 350 So it's almost like a book A four kind of Dimensions I'm so that's gonna Be used [00:12:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m45s) to crop my Image I'm using a library which l'll Show you in a moment which gets these values To decide upon how to Actually go ahead and crop the image It's an image Obviously if it's any of these it doesn't do anything only if it's an image Does it actually use the crop mechanism And it doesn't via on Ajax ok so we've done that save and close If we now [00:13:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m11s) Again click on new documents We see this Drag and Drop area Like We are looked here I GitHub Sorry on UI kit We see this thing in action really so we see it says that your Upload your image and it tells you That This is the what the dimensions should be [00:13:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m35s) And if not the doc will be cropped to this size So that means if it's not this Dimension it will be cropped that either large or you know downsize By dropping the file here or selecting a file from your computer And formats allowed JPEG So it tells you what formats are allowed This is all Done Basically to dynamically through this [00:13:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) Script that I'll show you the moment Then the same goes here with the document it tells your PDF is allowed and with the media tells you MP3 Now the image I'm only allowing one image Where as with the documents I'm allowing multiple documents and multiple media for one document How this displays in works on the front end Works lovely no problems I'm going to demonstrate that that's not what this is all about I'm just Just gonna demonstrate this functionality of uploading a file [00:14:30](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m30s) And you need to you know if you use this in your own Component you will need to extend that and use it and make it more functional as a As it should Should be in your Component Ok So now let's go and look at the code There which we need to focus on first is basically the document Area of course We'll have to [00:14:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m55s) Look at some of its fields that is attached here Some of its JavaScript And The Ajax area which is really where everything Things happening As you'll see I'm using custom code placeholders Most everywhere Because I'm re using a lot of the scripts Everywhere under components [00:15:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m15s) And I've therefore Adapted it so that it could be used multiple places So you'll see you're also of God upload file remove file Functions And it's got target and Type and field filename target Flush Type it got values All these values play a role within the behaviour that we will eventually have [00:15:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m40s) Or did we demonstrated On a pay well I didn't demonstrate it I just Showed you how it is I will actually demonstrate it still You also see here I've got this set a vastdevmod Which is basically A function That generates For us some variables Which this case is called [00:16:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m05s) VDM Which gets placed in a variable Called vastDevMod This formation Is what is used to identify the view From which the query is made This is a long string which really is related to the cash At that stage Of The View ID and name [00:16:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m33s) This is how I passed the view name and ID So I do not really pass it via The Ajax query I actually have it in Session memory And only if these keys validate does it Actually work ..... sort of another layer And another layer this many layers in this to [00:16:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) To try and make this secure Then this adminKittwo is where I am actually loading All the Uikit Files So I am manually adding it to the View the admin backend Doesn't actually work as the site views where We could select A [00:17:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m19s) Library and it dynamically answer to the view on compilation you have to manually add it to the view and you'll do it basically in the custom Script of the document Now I can show you some of these Snippets And then Then we can take it further There's obviously in the custom buttons area This is the get VDM which I have [00:17:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m48s) Explained Again we have some custom script here And that's basically all that we have there And then in the JavaScript area we again have set file which is part of the script that will have to look at And you see I'm using set file here Here and I'm here because we have an image We have Documents And we have media [00:18:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m15s) And they all Using the set file Method Which is the JavaScript Function Which is declared in this custom Script and here at the bottom of the footer We got What is known as get file Snippet which again deals with actual some of the automated integration [00:18:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m37s) Of the file when Drag and drop And that it actually immediately displays On the page this this takes care of that Ok so We'll go and look at those individual Concepts We also going to see like I said previously Some notes [00:18:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m56s) So here is the Main media apploader note There is the main document apploader the note and there is the document image apploader note And so this is where I've added the HTML For the drag and drop that you see in the Admin View Then we have for each of those correspondingly a hidden value For the document image key [00:19:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m26s) Main document Documents key and a Main media key All of these are hidden Fields Which Basically is where we store These values and [00:19:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m40s) That's what We'll look at as well Ok So Let's go and see the code that is used maybe let's start in the interface Right So let's first look at one of these Uploading Concepts [00:19:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m59s) But since I know what's happening there I am already aware that The actual code is not there So it's actually also custom Placeholder snippet so before we actually dive in let me Anyway Open the custom code area and go back into criptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptdocuments So that when we see the code Snippet We can actually go and Look at the code snippet [00:20:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m28s) Let's use this documents apploader Note And open that So here we have the document apploader note Basically we have a diff All the way down there Which has an ID And then it has the Class for the placeholder Some icons [00:20:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m52s) And you'll see Try again have here upload your documents There, here I've got a span tag That says main documents formats so it's basically gone Be the place we load the formats with JavaScript And Then select the file from your computer is So this is all basically It's this snippet Just with a little bit of extra [00:21:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) Flavour Yeah that's really all we looking at And then obviously there are some conventions Like main documents apploader That again here Upload drop main documents there are conventions which if we go over the code Eventually you'll see that those conventions is what really makes this reusable then in the scripts area I added a JavaScript to View footer And a JavaScript I'm using [00:22:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m03s) Is this Uikit file apploader custom code so let's look at that then First We can just search for it There it is we can open that so this is the code that gets added So it's got a little bit of PHP here And it is saying ok great Argument zero Formats so we are asking we getting the global parameters Of the formats reset Which remember I showed you we said it in the global settings so here we are saying document is the First Parameter passing [00:22:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m45s) So we are basically saying document formats here So we getting the document formats and then Here we have arg 2 and arg 1 progress bar So if you think about the ID here It says progress bar The 2nd Which is the third argument Is Main Documents is the Second argument sorry the first argument because we counting from [00:23:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m16s) zero, so it's actually saying Main documents So if you look back at our thing here it says main documents Formats So this is all part Of Main Documents It is the way we Identify the progress bar to progress bar ,let's see [00:23:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m44s) where is the progress bar Here it is Progress bar main documents so it's an ID There's only one of them on the page So it's targeting it here saying ok that's the progress bar we gonna And Then Is having some settings the settings obviously the action We using J router now this J router is a little JavaScript [00:24:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m17s) Trick that I wrote because often times You have this Site view or are the admin View You have it in the back end And you have it in the front end And so this is this just takes care of whether it's a backend or front-end call So that it actually executes correctly Now that is your component name The argument one again would be the second argument Which is in our case [00:24:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m52s) Documents So basically there it says documents the type and then this the third argument which is showing as a Second one is Main So it's passing the target is main Raw is true it has the token and there is our key Which is being used to identify the view ok so it's making a query On this This area here And it is set dynamically Then over here [00:25:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m23s) We know that the formats must be Added to this area with pipe between it It's like you remember here It adds the formats With a pipe So we're just basically exploding the array we got here from the global parameters For documents And it displays it In here Then again we have other [00:25:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m48s) This actual snippet I will add under this name on a GitHub gist So you could actually copy paste it from there and adapted for your purpose Begin here We are also Imploding the formats because he wanted display it I want to show the use of the formats So we have here Second argument or sorry [00:26:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m16s) Third argument and The second argument formats which would be Documents and Main so if we look at our diff We see there the formats as Documents and main format so it's targeting this span tag And basically adding it in there Ok so that is Adding the formats HTML to this ID Then if [00:26:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m44s) We've detected up here That you didn't have any formats set We basically gonna update the whole diff Which is the upload drop area with allowed formats are not set in a global setting Please notify system administrator So that's the final part of our JavaScript so we have JavaScript next in with HTML Taking care of [00:27:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m11s) Some of the displays behaviour on that page Ok so that is the reusable snippet So I'm reusing this same snippet file apploader For various areas So If we were to close out here And I was then to actually open the media Note You'll see that it's really just using the same snippet so if it goes the script it's the same snippet [00:27:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m47s) I'm just changing the variables I'm passing here is saying media media Main Where's the other one was saying document documents plural and Main This one is saying media media main And then The same goes with the image The image we also have That kind of behaviour Say Uikit image apploader, this one is not using the file apploader Is using the image apploader which is a little different [00:28:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) There is an image apploader and there is images apploader in my custom Snippets I'll show you Why there are difference One allows one image And the other one allows More Wait him I'm over file one Allows one A 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 flavour and behaviour And yes I will also Show place this out there and Git For you to have a look at Always remember these arguments are Behaving the similar way as an array Which means that the first argument will always be zero the second argument one and so forth So I'm basically using arguments in And this snippet everywhere where I declare it I am actually passing The three arguments that is required use this plus there to pass [00:29:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m23s) And the diff obviously looks very similar except that it now would say images And Images you see there it's using different placeholders So you need to update those accordingly As it's needed So that's just to set up the field Set up the field you need to have that JavaScript in place and you need to have that diff Sort of in place [00:29:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m52s) Regarding the hidden if I was to take one of the hidden Fields let's say the documents Hidden field you'll see there is some naming conventions here that you need to follow So it says main documents it doesn't do say documents And you'll see when we actually add the value back to the page Were able to target it based on these naming conventions so yeah that's Quite important and then for some security Which It's really just a little extra layer I like the guy one guy said, that it's not that we can [00:30:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m31s) Really stop them, we can just make it very hard So there are different encryption options this medium encryption local file key Is actually better than the basic the basic stores the the key in the database Which in that case means that if somebody sweeped your database , they actually do have the key But it could happen that they were able to get hold of your database but not actually all of your files Specially those that are behind the public repository so the medium incription option can actually generate File behind the public folder which therefore is not publicly accessible And That makes it just that little bit more difficult to actually get a key to open The value [00:31:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m19s) And the reason is let's say your documents are You know not available to every group on your system maybe to some groups can access that document then This is another layer of security that's already by default built into the field behaviour Ok So that is Really just looking at the fields now the admin view documents have some Custom script in it as well So we got to here the set file which really is the JavaScript that fires when it [00:31:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m56s) Gets the request back from the Ajax call You'll see, let me show you if we go back Here on all complete there is a function And then At some point when everything is satisfied it has here a set file key And it passes a bunch of variables to it this is really the function That we're gonna have to look at [00:32:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m36s) So Let's say let's use that setFileJS And insert it here So here we go So we'll see here there is a set file key function In the Document And so in your Ajax which you're using Uikits [00:33:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m03s) function here It has an auto complete So even if you look here at allcomplete which is a place where there when you know the server has told you It's done everything is good then you can do some house cleaning in the browser And that's really what we doing We're checking if it's done We take away the progress bar and if it has an error we actually Pop out the errors and alert if it's successful because we decide what this response going to be So we decided to give a successful [00:33:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m43s) Value in the array then we fire the set file key Which is actually looking at our Admin View Where adding this custom code in here and it is actually adding all this code that you see here Is being added it's quite a lot of code But it's all being added To the admin view and it can be used for different admin views [00:34:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m13s) If it's obviously dealing with either images documents or media so I'm gonna try and explain all this,it looks almost as if I'm going to end up teaching you some JavaScript altough I'm being accused of writing Javascript like PHP yeah sorry the point is The JavaScript here actually does some checking and validating and I'll put this I'll just put it out there and Really when it discovers that everything is fine the file actually was added Then it You know goes ahead here it's checking the length of the filename see if the filename length is not [00:34:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m59s) Not greater than 20 . and if it's not an image or a document Then it must be removed So the return values are here quite key To make sure that We have this remove file from server Function in place where I showed you in the admin [00:35:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m21s) View that we've got these Remove file tasks And the methods well this basically is going to be as I Scroll down a bit Here Here it is It's basically querying that, you see Remove that And it's passing all the necessary variables [00:35:42](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m42s) To remove the correct file Yeah it's also checking That a person who is trying to remove the files actually logged in user and on the file Where we will look at in a moment,at the actual PHP which will again Validate that that user actually has permission to remove The file So there are all these checks and balances across every step of the this implementation And as you by now I might realise this implementation is far more complicated than the normal file upload, that's simple this really gets into the Nitty gritty of some of these things because you wanna give a real easy sort of [00:36:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s) Behaviour for your user But that will mean that you need to do way more To sort of thing for them and protect them So they don't Actually become vulnerable at any time Ok so Once we satisfied that the file is correct and it doesn't need to To be removed We actually Trigger [00:36:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m55s) A few Things which actually puts the file In the page That's really what we wanna Eventually end up doing Set file Is what We are moving Towards Because we want to make sure [00:37:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m12s) that The file now after you've dragged and dropped it on the page Boom it shows in the page once it's really on the server And that's really what's Being done here a little bit It's doing a little bit of checking just to make sure we're all good Everything's fine And we end up with what we now called File name And it get past here And now [00:37:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m36s) We are moving Into set file And the sent file is gonna take the the target And it's going to Determine What kind of target it is and Get the format get the this ,get the that So we can build the file name correctly And now I've got some functions here Which maybe not what you need [00:38:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m02s) But I mean You look through this And you decide what Keeping what is Throughout But we end up building a notice Which actually has You know You're so so have been Set [00:38:20](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s) And Then It Triggers The get file The get file is the other function Which if you look at the admin View Let's go back here to the JavaScript We've got here the set file [00:38:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m38s) And here we've gotta get file The get file is it getting another layer of validation and also just like just make sure that everything Is really Behaving as we would want and expect it to behave So the rest of the snippet here is just a remove file and is Json's String we also have a little snippet to check if If it's a Json string [00:39:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) and if it's empty it's all part of just Sanitizing and validating Making sure everything Is the way we expect Ok so we now wanna look at the get's file JS Which Has different [00:39:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m23s) Implementation and as you can see It is in the footer,the view footer so we have PHP In that area of the JavaScript So is the set and this is The get file In the get file We have a Again a link That was a echoed [00:39:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m44s) Which we are now gonna use to actually load the file To make it that it can be downloaded Now that's really the issue If it's a document or if it's a media We obviously don't wanna display it but we wanna have you be able to To download it So we have different behaviours for image and Images As well as if you Scroll down for [00:40:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m04s) Documents at for media So it has different behaviours it continues building Buttons and displays And I'll Pop this code also out there on the Gits And you can look at it And See if you can make sense out of it This thing here the document link Or the document button Is [00:40:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m26s) The potential idea about this If we go to actually let me Close out here And go to the actual document manager In the document manager when you create a document You have here what we call description So if you add a document you can actually use those Place holders In the description And It's the beginning of [00:40:58](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m58s) Actually using these documents Across the website And not just in the component So we'll eventually write a little plugin And if you actually use This place holder which it generates If you use that Anywhere The plugin will identify it [00:41:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m17s) And will load either a link or a button Depending on which one you're using This is the bottom this is the link That's really what it's doing So You might say I don't need placeholders and you can grab that part and Take it out also then wherever The bar placeholder [00:41:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m36s) is being used and You need to remove For example over There Because we got a file box that we are building And it's basically getting the place holders The download and a delete buttons All of them get loaded into the file box [00:41:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m53s) And If we are having more than one file We are treating it differently than just having one file And really that is what we do here being the document and a little different Behaviour but somewhat the same And That is what actually then does the final stretch it's like a relay race, one carries it this far and then the other one takes it over [00:42:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m17s) Carries it a little further And this one is at the very last end of the match Where it is now finally putting the image Back into the page And All of the nice little thrills, bells and whistles happens here And of course this is where you can really spice it up with some JavaScript And [00:42:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m37s) And you can see I 'm using Uikit to actually deal with most of the styling Ok So Now you've seen The Front-end As we would call it Of the behaviour of our Drag an Drop [00:42:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m53s) So you've seen how I set up the field You've seen When the Ajax has finished it's request It actually Runs this set file key And the set file key Then Triggers a Whole bunch of things Which ends up Adding the [00:43:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m11s) The file to the page Let me demonstrate here In the In our little New document Let me demonstrate some of these function so you can see That which I now explained and exactly what it does So here I've got a bunch of images Is Just generic open source [00:43:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m29s) kind of Images So I'm just gonna grab one And dump it in here And You didn't see that let me scroll down Get that image again Put it down a little lower let me get another one Let's use this house [00:43:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m50s) And I'm gonna drag it there and highlights it then for a moment it has this little apploader because we are on Local network It's very fast But usually would see it Uploads And then when it started says your document images set So that was built with JavaScript And there is the document [00:44:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m10s) image on display And there is now remove document image I can Click that and it'll tell me are you sure you wanted to leave this document Yes, and boom it gone Ok so and we back at Square One As if we had nothing And it doesn't only deleted from the page it actually removed from the server As well So 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 drop Uploads there is our nicely cropped image Obviously crops in the centre of the Image because How does it know the house is on On the side It not doing that kind of Smart Detection yet We just cropping the image in the most [00:44:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m50s) Sensible way Now with the uploading of a document More less the same let me just get a document Ok so we got a document here And you can Drag and Drop it in there And again it uploads it And with the upload It generates those links I told you would you could [00:45:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m10s) Copy And now put it in In the Description If you want Or you could test it What is noteworthy here Is that the name of the document doesn't Actually get lost While [00:45:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m25s) The the place where documents are added Is actually in the same folder so You could add multiple documents to This document I'll just keep on stacking them though they even have the same name each one will be uniquely tagged to not be the same as the other Which means that on the server we are storing this document with a [00:45:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m53s) Long hash Sort of added onto The name Which is an extra layer of security so people If they could access the folder they at least know what the name is Same with the image if we were to Actually inspect the Image You'll see [00:46:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m12s) That that image it got this Huge name doc image Jpeg wrrllll&&&&&&& ext. So it's no longer than same name as the one you uploaded It actually changes it if there is preserve the name for example in the documents Option here So did you giving to someone the document they get what you expect But we do actually [00:46:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m38s) Adapt the names For security So that You can't be actually allocated On the server if for some reason not a good document Ok and so you could test it by clicking here And it should then just Bring it up in And be available as a download Now how the download works here with the document [00:47:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m01s) I'm actually using a controller so if we Hovered over this Link here You see ok you can't see See that Showed you Well Maybe I'll just show you the Ok I've copy the link here now it's a little huge because we are using [00:47:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m25s) Basically a very much of a Encrypted Path to the file it could sometimes being encrypted or sometimes just be basically 64 encrypted But the point is we have what we see here as a task and download Document so there is actually a controller called download In my component And 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.
+And of course here we are talking Ajax. You are able to upload the file without saving the item whether this area is available. You can simply use a note to add this [00:05:24](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m24s) script to your page. That's what I usually do, I use a note and add this(see video). Somebody drop something here, it's going to post to the server. If the item has a ID, I passed the ID that it gets stored in the database immediately. Even if you save it or don't save, the file gets added to that item. If it's a new item which means no ID, we will add a hidden field to the form. We return the actual value that must go to the database, [00:05:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m59s) and we put it in that hidden field. When you do save the item, it does store it in the correct place. That's the approach I'm going to demonstrate to you. Step-by-step with an existing component which I've found out there and which is using [00:06:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m19s) And it is actually available In JCB so you'll see there this new import JCB packages You could either click on this Or you can go to Joomla components and click on import components Is the same is really the same thing So I'm gonna go back to dashboard And click on import JCB packages There has been a release fix I think it was been in a The previous release if you clicked on import JCB packages it actually didn't Yeah I didn't give you this doesn't give you [00:06:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) This Package tab here It gave you only those In fact it's a little broken So best then go to Joomla components And Ensure to click on Import components Then to be sure that it gives you this VDM packages tab [00:07:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m12s) This VDM and packages tab is in new extension on the import of components It's actually the only Part of the import of the components that already does Actual validation on the package integrity So for each of these packages that I hear we actually do have a validation so giving your example Hello World is not Already if we come here will See Hello World isn't here So [00:07:39](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m39s) If I was to now Select Hello World Click get package It actually fetches it from GitHub And it has a method of actually Getting a hash a checksum Of the package Now you can make sure that It tells you here that the validation so now this point the package is on your server [00:08:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m02s) Now you can click cancel and that will delete the package from your server But This here tells you that the validation is pass so what is The actual package that we are distributing is the one you've now got And you can verify that By click on this link so if you click on this link It should open a simple A text string it's taking a moment my network here Ok and this text string Should be the same [00:08:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m32s) As the one You see here That is sort of just a heads up and its an area which we now We started adding some that checks on validation And yeah it's not military grade but it's Fair enough I think I anyone trying to NOW stand in the middle of this He's gonna have Quite crazy gymnastics too [00:08:58](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m58s) To take care of Ok so at this point we The package which is being imported is Displayed here and you just click Quiet means that You don't see all of the things it's doing I would suggest you Say no you wanna see everything Force update Means that if it finds a similar field type or a similar field or a similar admin View anything that is similar [00:09:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m29s) And the creation date Is Younger in your system It actually Overwrites it Because you're forced it if it If it finds it and the actual current date in your system Is older So that the one you importing is younger it automatically update it With the latest [00:09:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) Newest version This is how it works And that's why we telling you to make backups Because well the other advantages if you get to field type that was overwritten And it's not really what you expected You actually got history you can go back one step Usually you would Ok So I'm gonna say yes force that and then continue And that simply adds [00:10:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m16s) a whole list of What it's done What is imported And it also moved an image shows you that Tells you done Ok so there we go Hello World is Is now in the system Now We are going to look at something completely different And it is actually [00:10:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m35s) The Document manager is it paid Is a paid package which We distribute You can obviously buy this package From us It actually does have all this functionality that I'm going to demonstrate now In it and so I'm just gonna use that can I add a key here and click Continue [00:11:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m02s) And then basically install this component In JCB And then from there we will start demonstrating it's functionality Ok so we got document manager now installed here Let me quickly show you how it looks in action So I'm gonna install it to this component Joomla website And demonstrate it Ok Now [00:11:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m32s) We have a here component manager Sorry document manager and we can create a document quite easily By clicking a new document and you'll see that there is some allowed image formats are not set in the global settings please Notify your system administrator So you can't at this point upload Actually anything Neither image neither documents neither any media So we'll go out of this and in the options of the component there is actually [00:12:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m03s) A media tab That says what type of documents you wanna allow So For our purpose I'm just gonna say PDF for now with the media I'm just MP3 and with the images just jpeg Now with The images I know in my This component I'm only having one image and I wanted to be a specific dimension [00:12:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m28s) So I'm gonna say I want the width To be 200 And the heights To be 300 so make it 350 So it's almost like a book A four kind of Dimensions I'm so that's gonna Be used [00:12:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m45s) to crop my Image I'm using a library which l'll Show you in a moment which gets these values To decide upon how to Actually go ahead and crop the image It's an image Obviously if it's any of these it doesn't do anything only if it's an image Does it actually use the crop mechanism And it doesn't via on Ajax ok so we've done that save and close If we now [00:13:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m11s) Again click on new documents We see this Drag and Drop area Like We are looked here I GitHub Sorry on UI kit We see this thing in action really so we see it says that your Upload your image and it tells you That This is the what the dimensions should be [00:13:35](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m35s) And if not the doc will be cropped to this size So that means if it's not this Dimension it will be cropped that either large or you know downsize By dropping the file here or selecting a file from your computer And formats allowed JPEG So it tells you what formats are allowed This is all Done Basically to dynamically through this [00:13:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m59s) Script that I'll show you the moment Then the same goes here with the document it tells your PDF is allowed and with the media tells you MP3 Now the image I'm only allowing one image Where as with the documents I'm allowing multiple documents and multiple media for one document How this displays in works on the front end Works lovely no problems I'm going to demonstrate that that's not what this is all about I'm just Just gonna demonstrate this functionality of uploading a file [00:14:30](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m30s) And you need to you know if you use this in your own Component you will need to extend that and use it and make it more functional as a As it should Should be in your Component Ok So now let's go and look at the code There which we need to focus on first is basically the document Area of course We'll have to [00:14:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m55s) Look at some of its fields that is attached here Some of its JavaScript And The Ajax area which is really where everything Things happening As you'll see I'm using custom code placeholders Most everywhere Because I'm re using a lot of the scripts Everywhere under components [00:15:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m15s) And I've therefore Adapted it so that it could be used multiple places So you'll see you're also of God upload file remove file Functions And it's got target and Type and field filename target Flush Type it got values All these values play a role within the behaviour that we will eventually have [00:15:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m40s) Or did we demonstrated On a pay well I didn't demonstrate it I just Showed you how it is I will actually demonstrate it still You also see here I've got this set a vastdevmod Which is basically A function That generates For us some variables Which this case is called [00:16:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m05s) VDM Which gets placed in a variable Called vastDevMod This formation Is what is used to identify the view From which the query is made This is a long string which really is related to the cash At that stage Of The View ID and name [00:16:33](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m33s) This is how I passed the view name and ID So I do not really pass it via The Ajax query I actually have it in Session memory And only if these keys validate does it Actually work ..... sort of another layer And another layer this many layers in this to [00:16:54](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) To try and make this secure Then this adminKittwo is where I am actually loading All the Uikit Files So I am manually adding it to the View the admin backend Doesn't actually work as the site views where We could select A [00:17:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m19s) Library and it dynamically answer to the view on compilation you have to manually add it to the view and you'll do it basically in the custom Script of the document Now I can show you some of these Snippets And then Then we can take it further There's obviously in the custom buttons area This is the get VDM which I have [00:17:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m48s) Explained Again we have some custom script here And that's basically all that we have there And then in the JavaScript area we again have set file which is part of the script that will have to look at And you see I'm using set file here Here and I'm here because we have an image We have Documents And we have media [00:18:15](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m15s) And they all Using the set file Method Which is the JavaScript Function Which is declared in this custom Script and here at the bottom of the footer We got What is known as get file Snippet which again deals with actual some of the automated integration [00:18:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m37s) Of the file when Drag and drop And that it actually immediately displays On the page this this takes care of that Ok so We'll go and look at those individual Concepts We also going to see like I said previously Some notes [00:18:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m56s) So here is the Main media apploader note There is the main document apploader the note and there is the document image apploader note And so this is where I've added the HTML For the drag and drop that you see in the Admin View Then we have for each of those correspondingly a hidden value For the document image key [00:19:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m26s) Main document Documents key and a Main media key All of these are hidden Fields Which Basically is where we store These values and [00:19:40](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m40s) That's what We'll look at as well Ok So Let's go and see the code that is used maybe let's start in the interface Right So let's first look at one of these Uploading Concepts [00:19:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m59s) But since I know what's happening there I am already aware that The actual code is not there So it's actually also custom Placeholder snippet so before we actually dive in let me Anyway Open the custom code area and go back into criptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptcriptdocuments So that when we see the code Snippet We can actually go and Look at the code snippet [00:20:28](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m28s) Let's use this documents apploader Note And open that So here we have the document apploader note Basically we have a diff All the way down there Which has an ID And then it has the Class for the placeholder Some icons [00:20:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m52s) And you'll see Try again have here upload your documents There, here I've got a span tag That says main documents formats so it's basically gone Be the place we load the formats with JavaScript And Then select the file from your computer is So this is all basically It's this snippet Just with a little bit of extra [00:21:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) Flavour Yeah that's really all we looking at And then obviously there are some conventions Like main documents apploader That again here Upload drop main documents there are conventions which if we go over the code Eventually you'll see that those conventions is what really makes this reusable then in the scripts area I added a JavaScript to View footer And a JavaScript I'm using [00:22:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m03s) Is this Uikit file apploader custom code so let's look at that then First We can just search for it There it is we can open that so this is the code that gets added So it's got a little bit of PHP here And it is saying ok great Argument zero Formats so we are asking we getting the global parameters Of the formats reset Which remember I showed you we said it in the global settings so here we are saying document is the First Parameter passing [00:22:45](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m45s) So we are basically saying document formats here So we getting the document formats and then Here we have arg 2 and arg 1 progress bar So if you think about the ID here It says progress bar The 2nd Which is the third argument Is Main Documents is the Second argument sorry the first argument because we counting from [00:23:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m16s) zero, so it's actually saying Main documents So if you look back at our thing here it says main documents Formats So this is all part Of Main Documents It is the way we Identify the progress bar to progress bar ,let's see [00:23:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m44s) where is the progress bar Here it is Progress bar main documents so it's an ID There's only one of them on the page So it's targeting it here saying ok that's the progress bar we gonna And Then Is having some settings the settings obviously the action We using J router now this J router is a little JavaScript [00:24:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m17s) Trick that I wrote because often times You have this Site view or are the admin View You have it in the back end And you have it in the front end And so this is this just takes care of whether it's a backend or front-end call So that it actually executes correctly Now that is your component name The argument one again would be the second argument Which is in our case [00:24:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m52s) Documents So basically there it says documents the type and then this the third argument which is showing as a Second one is Main So it's passing the target is main Raw is true it has the token and there is our key Which is being used to identify the view ok so it's making a query On this This area here And it is set dynamically Then over here [00:25:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m23s) We know that the formats must be Added to this area with pipe between it It's like you remember here It adds the formats With a pipe So we're just basically exploding the array we got here from the global parameters For documents And it displays it In here Then again we have other [00:25:48](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m48s) This actual snippet I will add under this name on a GitHub gist So you could actually copy paste it from there and adapted for your purpose Begin here We are also Imploding the formats because he wanted display it I want to show the use of the formats So we have here Second argument or sorry [00:26:16](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m16s) Third argument and The second argument formats which would be Documents and Main so if we look at our diff We see there the formats as Documents and main format so it's targeting this span tag And basically adding it in there Ok so that is Adding the formats HTML to this ID Then if [00:26:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m44s) We've detected up here That you didn't have any formats set We basically gonna update the whole diff Which is the upload drop area with allowed formats are not set in a global setting Please notify system administrator So that's the final part of our JavaScript so we have JavaScript next in with HTML Taking care of [00:27:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m11s) Some of the displays behaviour on that page Ok so that is the reusable snippet So I'm reusing this same snippet file apploader For various areas So If we were to close out here And I was then to actually open the media Note You'll see that it's really just using the same snippet so if it goes the script it's the same snippet [00:27:47](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m47s) I'm just changing the variables I'm passing here is saying media media Main Where's the other one was saying document documents plural and Main This one is saying media media main And then The same goes with the image The image we also have That kind of behaviour Say Uikit image apploader, this one is not using the file apploader Is using the image apploader which is a little different [00:28:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m21s) There is an image apploader and there is images apploader in my custom Snippets I'll show you Why there are difference One allows one image And the other one allows More Wait him I'm over file one Allows one A 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 flavour and behaviour And yes I will also Show place this out there and Git For you to have a look at Always remember these arguments are Behaving the similar way as an array Which means that the first argument will always be zero the second argument one and so forth So I'm basically using arguments in And this snippet everywhere where I declare it I am actually passing The three arguments that is required use this plus there to pass [00:29:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m23s) And the diff obviously looks very similar except that it now would say images And Images you see there it's using different placeholders So you need to update those accordingly As it's needed So that's just to set up the field Set up the field you need to have that JavaScript in place and you need to have that diff Sort of in place [00:29:52](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m52s) Regarding the hidden if I was to take one of the hidden Fields let's say the documents Hidden field you'll see there is some naming conventions here that you need to follow So it says main documents it doesn't do say documents And you'll see when we actually add the value back to the page Were able to target it based on these naming conventions so yeah that's Quite important and then for some security Which It's really just a little extra layer I like the guy one guy said, that it's not that we can [00:30:31](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m31s) Really stop them, we can just make it very hard So there are different encryption options this medium encryption local file key Is actually better than the basic the basic stores the the key in the database Which in that case means that if somebody sweeped your database , they actually do have the key But it could happen that they were able to get hold of your database but not actually all of your files Specially those that are behind the public repository so the medium incription option can actually generate File behind the public folder which therefore is not publicly accessible And That makes it just that little bit more difficult to actually get a key to open The value [00:31:19](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m19s) And the reason is let's say your documents are You know not available to every group on your system maybe to some groups can access that document then This is another layer of security that's already by default built into the field behaviour Ok So that is Really just looking at the fields now the admin view documents have some Custom script in it as well So we got to here the set file which really is the JavaScript that fires when it [00:31:56](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m56s) Gets the request back from the Ajax call You'll see, let me show you if we go back Here on all complete there is a function And then At some point when everything is satisfied it has here a set file key And it passes a bunch of variables to it this is really the function That we're gonna have to look at [00:32:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m36s) So Let's say let's use that setFileJS And insert it here So here we go So we'll see here there is a set file key function In the Document And so in your Ajax which you're using Uikits [00:33:03](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m03s) function here It has an auto complete So even if you look here at allcomplete which is a place where there when you know the server has told you It's done everything is good then you can do some house cleaning in the browser And that's really what we doing We're checking if it's done We take away the progress bar and if it has an error we actually Pop out the errors and alert if it's successful because we decide what this response going to be So we decided to give a successful [00:33:43](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m43s) Value in the array then we fire the set file key Which is actually looking at our Admin View Where adding this custom code in here and it is actually adding all this code that you see here Is being added it's quite a lot of code But it's all being added To the admin view and it can be used for different admin views [00:34:13](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m13s) If it's obviously dealing with either images documents or media so I'm gonna try and explain all this,it looks almost as if I'm going to end up teaching you some JavaScript altough I'm being accused of writing Javascript like PHP yeah sorry the point is The JavaScript here actually does some checking and validating and I'll put this I'll just put it out there and Really when it discovers that everything is fine the file actually was added Then it You know goes ahead here it's checking the length of the filename see if the filename length is not [00:34:59](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m59s) Not greater than 20 . and if it's not an image or a document Then it must be removed So the return values are here quite key To make sure that We have this remove file from server Function in place where I showed you in the admin [00:35:21](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m21s) View that we've got these Remove file tasks And the methods well this basically is going to be as I Scroll down a bit Here Here it is It's basically querying that, you see Remove that And it's passing all the necessary variables [00:35:42](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m42s) To remove the correct file Yeah it's also checking That a person who is trying to remove the files actually logged in user and on the file Where we will look at in a moment,at the actual PHP which will again Validate that that user actually has permission to remove The file So there are all these checks and balances across every step of the this implementation And as you by now I might realise this implementation is far more complicated than the normal file upload, that's simple this really gets into the Nitty gritty of some of these things because you wanna give a real easy sort of [00:36:32](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m32s) Behaviour for your user But that will mean that you need to do way more To sort of thing for them and protect them So they don't Actually become vulnerable at any time Ok so Once we satisfied that the file is correct and it doesn't need to To be removed We actually Trigger [00:36:55](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m55s) A few Things which actually puts the file In the page That's really what we wanna Eventually end up doing Set file Is what We are moving Towards Because we want to make sure [00:37:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m12s) that The file now after you've dragged and dropped it on the page Boom it shows in the page once it's really on the server And that's really what's Being done here a little bit It's doing a little bit of checking just to make sure we're all good Everything's fine And we end up with what we now called File name And it get past here And now [00:37:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m36s) We are moving Into set file And the sent file is gonna take the the target And it's going to Determine What kind of target it is and Get the format get the this ,get the that So we can build the file name correctly And now I've got some functions here Which maybe not what you need [00:38:02](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m02s) But I mean You look through this And you decide what Keeping what is Throughout But we end up building a notice Which actually has You know You're so so have been Set [00:38:20](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m20s) And Then It Triggers The get file The get file is the other function Which if you look at the admin View Let's go back here to the JavaScript We've got here the set file [00:38:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m38s) And here we've gotta get file The get file is it getting another layer of validation and also just like just make sure that everything Is really Behaving as we would want and expect it to behave So the rest of the snippet here is just a remove file and is Json's String we also have a little snippet to check if If it's a Json string [00:39:05](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) and if it's empty it's all part of just Sanitizing and validating Making sure everything Is the way we expect Ok so we now wanna look at the get's file JS Which Has different [00:39:23](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m23s) Implementation and as you can see It is in the footer,the view footer so we have PHP In that area of the JavaScript So is the set and this is The get file In the get file We have a Again a link That was a echoed [00:39:44](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m44s) Which we are now gonna use to actually load the file To make it that it can be downloaded Now that's really the issue If it's a document or if it's a media We obviously don't wanna display it but we wanna have you be able to To download it So we have different behaviours for image and Images As well as if you Scroll down for [00:40:04](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m04s) Documents at for media So it has different behaviours it continues building Buttons and displays And I'll Pop this code also out there on the Gits And you can look at it And See if you can make sense out of it This thing here the document link Or the document button Is [00:40:26](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m26s) The potential idea about this If we go to actually let me Close out here And go to the actual document manager In the document manager when you create a document You have here what we call description So if you add a document you can actually use those Place holders In the description And It's the beginning of [00:40:58](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m58s) Actually using these documents Across the website And not just in the component So we'll eventually write a little plugin And if you actually use This place holder which it generates If you use that Anywhere The plugin will identify it [00:41:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m17s) And will load either a link or a button Depending on which one you're using This is the bottom this is the link That's really what it's doing So You might say I don't need placeholders and you can grab that part and Take it out also then wherever The bar placeholder [00:41:36](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m36s) is being used and You need to remove For example over There Because we got a file box that we are building And it's basically getting the place holders The download and a delete buttons All of them get loaded into the file box [00:41:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m53s) And If we are having more than one file We are treating it differently than just having one file And really that is what we do here being the document and a little different Behaviour but somewhat the same And That is what actually then does the final stretch it's like a relay race, one carries it this far and then the other one takes it over [00:42:17](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m17s) Carries it a little further And this one is at the very last end of the match Where it is now finally putting the image Back into the page And All of the nice little thrills, bells and whistles happens here And of course this is where you can really spice it up with some JavaScript And [00:42:37](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m37s) And you can see I 'm using Uikit to actually deal with most of the styling Ok So Now you've seen The Front-end As we would call it Of the behaviour of our Drag an Drop [00:42:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m53s) So you've seen how I set up the field You've seen When the Ajax has finished it's request It actually Runs this set file key And the set file key Then Triggers a Whole bunch of things Which ends up Adding the [00:43:11](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m11s) The file to the page Let me demonstrate here In the In our little New document Let me demonstrate some of these function so you can see That which I now explained and exactly what it does So here I've got a bunch of images Is Just generic open source [00:43:29](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m29s) kind of Images So I'm just gonna grab one And dump it in here And You didn't see that let me scroll down Get that image again Put it down a little lower let me get another one Let's use this house [00:43:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m50s) And I'm gonna drag it there and highlights it then for a moment it has this little apploader because we are on Local network It's very fast But usually would see it Uploads And then when it started says your document images set So that was built with JavaScript And there is the document [00:44:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m10s) image on display And there is now remove document image I can Click that and it'll tell me are you sure you wanted to leave this document Yes, and boom it gone Ok so and we back at Square One As if we had nothing And it doesn't only deleted from the page it actually removed from the server As well So 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 drop Uploads there is our nicely cropped image Obviously crops in the centre of the Image because How does it know the house is on On the side It not doing that kind of Smart Detection yet We just cropping the image in the most [00:44:50](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m50s) Sensible way Now with the uploading of a document More less the same let me just get a document Ok so we got a document here And you can Drag and Drop it in there And again it uploads it And with the upload It generates those links I told you would you could [00:45:10](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m10s) Copy And now put it in In the Description If you want Or you could test it What is noteworthy here Is that the name of the document doesn't Actually get lost While [00:45:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m25s) The the place where documents are added Is actually in the same folder so You could add multiple documents to This document I'll just keep on stacking them though they even have the same name each one will be uniquely tagged to not be the same as the other Which means that on the server we are storing this document with a [00:45:53](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m53s) Long hash Sort of added onto The name Which is an extra layer of security so people If they could access the folder they at least know what the name is Same with the image if we were to Actually inspect the Image You'll see [00:46:12](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m12s) That that image it got this Huge name doc image Jpeg wrrllll&&&&&&& ext. So it's no longer than same name as the one you uploaded It actually changes it if there is preserve the name for example in the documents Option here So did you giving to someone the document they get what you expect But we do actually [00:46:38](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m38s) Adapt the names For security So that You can't be actually allocated On the server if for some reason not a good document Ok and so you could test it by clicking here And it should then just Bring it up in And be available as a download Now how the download works here with the document [00:47:01](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m01s) I'm actually using a controller so if we Hovered over this Link here You see ok you can't see See that Showed you Well Maybe I'll just show you the Ok I've copy the link here now it's a little huge because we are using [00:47:25](https://www.youtube.com/watch?v=UvzDyVQyHDI&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m25s) Basically a very much of a Encrypted Path to the file it could sometimes being encrypted or sometimes just be basically 64 encrypted But the point is we have what we see here as a task and download Document so there is actually a controller called download In my component And 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.