Coding

Laravel Tutorial – Filemanager/ Image Upload with a WYSIWYG Editor (TinyMCE)

  • 00:00:01 hi welcome back in the last part we left
  • 00:00:05 when we had our editor set up and we
  • 00:00:08 could well use it we could write a bold
  • 00:00:11 create lists and so on but one very
  • 00:00:13 interesting part is missing the image
  • 00:00:16 upload now this is something which is a
  • 00:00:19 very complex and I'll be honest we won't
  • 00:00:23 write all the logic the back and logic
  • 00:00:25 here on our own though I will truly out
  • 00:00:28 that I will make some videos about file
  • 00:00:30 management creating your own file
  • 00:00:32 manager in the future but right now what
  • 00:00:35 I will use is this lateral file manager
  • 00:00:38 of a uni sharp and you will find a link
  • 00:00:40 skit have repository in the description
  • 00:00:42 which is a great file manager and best
  • 00:00:46 thing is it is well kind of configured
  • 00:00:50 to work great with tiny MCE and ckeditor
  • 00:00:54 and it is really easy to set up and to
  • 00:00:58 get going and yet as you can already see
  • 00:01:01 in the screenshot here it not only
  • 00:01:03 allows allows you to pick up file
  • 00:01:05 uploaded it allows you to manage all the
  • 00:01:07 files on your lateral application or in
  • 00:01:10 your lateral application on your disks
  • 00:01:12 you have there so really great thing and
  • 00:01:15 as I said might definitely be
  • 00:01:17 interesting to create something like
  • 00:01:18 this in future videos but as this is a
  • 00:01:21 very complex project I really only want
  • 00:01:25 to focus on getting this going in tiny
  • 00:01:27 MCE so that you can get started right
  • 00:01:29 away because that really is an important
  • 00:01:32 part of programming to knowing how to
  • 00:01:35 use for party packages and saving time
  • 00:01:37 by using them there is nothing bad about
  • 00:01:40 that so first thing us we need to
  • 00:01:44 install it and we can follow the
  • 00:01:46 installation document here it's really
  • 00:01:50 easy first thing is I'll well I will
  • 00:01:53 just basically copy all these lines here
  • 00:01:55 I'll go to my command line here and I
  • 00:02:00 will require it via composer
  • 00:02:03 this will take a couple of seconds and
  • 00:02:06 we'll then add it to our approach
  • 00:02:07 and install it I'll be back once it's
  • 00:02:10 done cool so my installation just
  • 00:02:13 finished and now this was the first step
  • 00:02:17 the next step as described here is to
  • 00:02:21 take these service providers here and
  • 00:02:24 add them in our application in the
  • 00:02:26 config directory the app dot PHP file
  • 00:02:29 here at the bottom this will actually
  • 00:02:36 register them in our egg look in our
  • 00:02:39 angular in our level application without
  • 00:02:42 these lines here yes we have installed
  • 00:02:45 it but level would not use it and would
  • 00:02:47 not know how to use it because this kind
  • 00:02:49 of is the interface written by the
  • 00:02:52 creators of the third-party packaging
  • 00:02:54 you need to do this for every third
  • 00:02:55 party package you might produce to tell
  • 00:02:59 their world how to use it how to use
  • 00:03:01 this package so this is these are the
  • 00:03:05 service providers next thing is fs8 here
  • 00:03:07 I'm going to import and then I will need
  • 00:03:15 to run these two commands here to
  • 00:03:18 actually publish the own configuration
  • 00:03:22 file this word party package ships with
  • 00:03:25 and if we know how to look in our a
  • 00:03:26 config folder we see this new file this
  • 00:03:32 l of m dot PHP this was just added by
  • 00:03:36 this published command which allows for
  • 00:03:38 party packages to copy files into your
  • 00:03:41 main application because you might need
  • 00:03:42 to access them there and we do need to
  • 00:03:45 access this configuration file which
  • 00:03:47 configures our file manager the first
  • 00:03:50 thing I'll do is I will disable the
  • 00:03:52 renaming of files because this word
  • 00:03:55 we're use ready and I won't don't want
  • 00:03:58 to restrict us to only locked in users
  • 00:04:00 now this is all fine here but here we
  • 00:04:04 need to change off to web because well
  • 00:04:07 of indications not only something we
  • 00:04:09 want to enforce but the web malware is
  • 00:04:12 important for this to work correctly I
  • 00:04:13 also want a line below
  • 00:04:16 to user access here and well the rest
  • 00:04:20 ship you find as it shifts with and as
  • 00:04:22 you can see you can configure which
  • 00:04:24 types of files you want to be able to
  • 00:04:26 handle and you can see tells us much
  • 00:04:28 more than just some images here where to
  • 00:04:32 store them on your your application also
  • 00:04:35 we're important and yeah and so on so
  • 00:04:40 just a basic configuration this is how
  • 00:04:41 we need to have it set up and now coming
  • 00:04:45 back to this welcome to plated PHP file
  • 00:04:47 here I said that this part here is
  • 00:04:51 related to the file manager and it is
  • 00:04:53 and what does it do well it basically
  • 00:04:56 defines the dimensions of our window
  • 00:04:59 here and then just defines basically
  • 00:05:04 which which layout to load or yeah how
  • 00:05:07 to load this file manager so this is
  • 00:05:09 important for this recording package
  • 00:05:12 however file browser callback is a
  • 00:05:15 configuration provided by tiny MCE and
  • 00:05:18 if we were to write our own file browser
  • 00:05:20 we needed to implement this function and
  • 00:05:23 tell tiny MCE what you do whenever the
  • 00:05:26 user clicks this file manager button
  • 00:05:29 which basically is the button next to
  • 00:05:31 the I want to upload an image thing so
  • 00:05:35 this is very important and this is the
  • 00:05:37 configuration as we need it for it as
  • 00:05:40 file into reusing here the lateral
  • 00:05:42 vitamin planet shirt we're correcting it
  • 00:05:44 only works for this file manager that's
  • 00:05:46 very important
  • 00:05:47 this has to be hand tailored to
  • 00:05:49 whichever file mentor you use and you
  • 00:05:52 can see the setup here in the
  • 00:05:55 integration part where basically it is
  • 00:05:58 described how you can integrate it with
  • 00:06:00 tiny FC and this is pretty much the same
  • 00:06:03 code you'll see here I just copied it
  • 00:06:06 from there and it also describes how to
  • 00:06:09 use it with ckeditor or independent of
  • 00:06:12 any well what you see is what you get
  • 00:06:15 and for because the end it's a file
  • 00:06:16 entry you might use it in whichever way
  • 00:06:19 you want it doesn't have to be limited
  • 00:06:21 to a rich editor you
  • 00:06:24 just have normal button which you should
  • 00:06:26 trigger file upload so this is how you
  • 00:06:29 use it and here is more information
  • 00:06:31 about how to configure it and lastly how
  • 00:06:35 to customize it of course now with all
  • 00:06:39 this is there anything else we have to
  • 00:06:42 do no let's reload and now let's click
  • 00:06:45 this insert edit image button here now
  • 00:06:49 here we could enter semi URL but you can
  • 00:06:53 also click this file enter button I was
  • 00:06:55 talking about which will trigger this
  • 00:06:58 file browser callback function here and
  • 00:07:02 which will open up our file mature as
  • 00:07:06 you can see I already uploaded one file
  • 00:07:08 but I will upload a new one here let's
  • 00:07:12 click this button and let's say well
  • 00:07:14 I'll just upload this image here so now
  • 00:07:18 I got my images here and I can easy even
  • 00:07:22 resize and drop them and you can see my
  • 00:07:27 awesome Amazon purchases here and yeah
  • 00:07:33 so really a great functionality this
  • 00:07:36 editor has built-in this is the reason
  • 00:07:38 why we are using it this would be a
  • 00:07:39 whole lot of work to create your own and
  • 00:07:42 as you can see you can really do a lot
  • 00:07:46 here you can create new folders and so
  • 00:07:48 on so it is a fully fledged file lantern
  • 00:07:50 not limited to image upload but of
  • 00:07:53 course does or it is and it does offer
  • 00:07:56 resizing and cropping and so on now back
  • 00:08:00 into this folder I can then select this
  • 00:08:03 image here ok now you can see is edited
  • 00:08:06 here I can click Submit and I got it on
  • 00:08:08 the next page – obviously not style this
  • 00:08:11 will have to be done by you but this is
  • 00:08:14 how it works and how you can integrate
  • 00:08:16 tiny MCE and a file manager to manage
  • 00:08:19 what files and uploads in your level
  • 00:08:23 application lastly let's have a look
  • 00:08:25 where these files are saved at and as
  • 00:08:27 you can see I got this photos folder
  • 00:08:29 here ways where it to say
  • 00:08:30 well this is done in this place because
  • 00:08:33 in my configuration file for a file
  • 00:08:36 enter I specified the public folders
  • 00:08:39 should be the place where images are
  • 00:08:41 saved and of course I could use our
  • 00:08:44 places yourtube now I hope this helps
  • 00:08:49 you and yeah I hope this helps you get
  • 00:08:52 going with your applications that
  • 00:08:53 integrate such a editors there see you
  • 00:08:56 in the next videos bye