Alright, now that we have Vue in our frontend, we need to give our users an interface for them to choose and upload pictures with. We could code something like this manually, but I'd prefer to go down the route of a well-supported, open-source library. Specifically this one, FilePond. FilePond is a modern, sleek, and easy-to-use image uploading library for JavaScript that also happens to have a lot of different components for a variety of frontend frameworks. So if we check out the documentation page, and under the Installation section, you can see that besides the plain JavaScript API, we have adapters for jQuery, React, Vue, Angular, and Svelte.

see that besides the plain JavaScript API, we have adapters for jQuery, React, Vue, Angular, and Svelte. Since our project is in Vue, we're going to use the Vue one. So following the documentation, we'll first have to install it with npm, and then add in a FilePond component into our main app component. Alright so let's take this step by step, and head back into the source code for our app. Let's open up the terminal. And run npm install --save-dev vue-filepond filepond. And once that finishes up, we'll also have to install another dependency. So npm install --save-dev filepond-plugin-file-validate-type.

And once that finishes up, we'll also have to install another dependency. So npm install --save-dev filepond-plugin-file-validate. This won't be used in our app immediately, but it will cause some warnings in the console if we don't include it. Okay our dependencies are installed, so now we can exit the terminal and focus on getting this into our app. First let's include the FilePond component, like in the documentation. So filepond. And we're going to use some bare bones attributes just to get this thing up and running. We'll give it a name, like image, a ref tag, pond.

And we're going to use some bare bones attributes just to get this thing up and running. We'll give it a name, like image, a ref tag, a pond. The label-idle attribute is the text that will appear inside of the box whenever there's no images present. So let's do click to choose image, or drag here. And server. This is where our files will be sent to whenever they're uploaded. And if you'll remember, we added a route in our routes/web.php file for /upload, so we'll use /upload. And that's it.

use slash upload. And that's it. We can close this out. Let's move on to importing it. So in our script tag, before the export, we'll run import viewFilePond from 'viewFilePond'. And we'll also have to include the stylesheet that comes with it, otherwise it'll just look like a mess. So import 'filepond/dist/filepond.min.css'. Now next we have to initialize the plugin by using const filepond = viewFilePond. Because what we're importing here is a function.

Now next we have to initialize the plugin by using const filepond equals viewFilePond. Because what we're importing here is a function. And so we're going to be using that function to create our component. And then we can include that component like we would normally in view by having a components object and including it with the Pascal case name. So because this is capital F and capital P in one word, it'll break down as an alias to file-pond for the actual element in the markup. If you wanted to change this or explicitly say a different name for it, you could do something like viewFilePond, filepond, and then up here instead of filepond you would call viewFilePond.

something like viewFilePond, filepond, and then up here instead of filepond you would call viewFilePond. But we're keeping it just filepond. Okay so now if we compile this and take a look at our browser, we should see our filepond component displaying as expected. So in our terminal, let's run npm run dev. And take a look at our browser. And there we go. We see our filepond component here pulled in. And we can click this to choose an image.

We see our filepond component here pulled in. And we can click this to choose an image. We'll select this one. And it'll say that it's uploading but errors out at the end of it. And that's because while this route does exist, it doesn't return anything back to filepond. And before we continue, let's clean this up a little bit. Back in our component, let's get rid of this helloWorld message. We can remove the message attribute down here as well. And let's give this div a class mt-4 so there's some spacing between it and the top title. Now recompiling again.

And let's give this div a class mt4 so there's some spacing between it and the top title. Now recompiling again. And taking a look at our browser. That's a bit better. We also have a multitude of events that we can hook onto in this component for various lifecycle points that happen in filepond. One that might be useful is init. So when using Vue, we can either do v-on:init or the shortcode @init. And have it fire off some method. So let's do filepondInitialized.

And have it fire off some method. So let's do filePond initialized. And create that method in our component below. And this will fire whenever filePond is loaded and ready to be used. So if we console.log that, filePond is ready. At this point we can also grab the entire filePond object by using this.refs.pond. Which the pond I'm referring to is the ref label that we added up here. So now if we save and recompile. And take a look in our browser. If we open up the console, we see filePond is ready and we have the whole filePond object.

And take a look in our browser. If we open up the console, we see filepond is ready and we have the whole filepond object. Now you can see that we have this warning up here, property acceptedFileTypes was accessed during render but not defined on instance. This is the warning that I was talking about earlier and why we needed to include that separate dependency. So I'll show you real quick how to get rid of this. Back in our component, underneath the import for the filepond CSS, we're also going to import FilePondPluginFileValidationType from FilePondPluginFileValidateType. And we pass that in to the viewFilePond method down here, FilePondPluginFileValidateType.

import FilePondPluginFileValidateType from FilePondPluginFileValidateType. And we pass that in to the ViewFilePond method down here, FilePondPluginFileValidateType. So now if we recompile this and take a look in our browser, we don't see that warning anymore because the plugin that was expected, even though it's not being used, was passed through to the library. And FilePond has a great documentation website set up and if we go down to the API instance section down here, we have all the properties, methods, and events that are accessible on any of the framework adapters, including our ViewOne. So as you can see here, this allowDrop is by default set to true, but we could pass in an allowDrop property set to false that would disable that.

So as you can see here, this allowDrop is by default set to true, but we could pass in an allowDrop property set to false that would disable that. And likewise with browse. So if we go to our code and add on a property, allowBrowse equals false, and we shouldn't be able to click on the element to open up our window to find an image, we'd only be able to upload them through drag and drop. Now because we're using Vue, passing in false here passes in the string false. It doesn't actually pass in the boolean value false. In order to do this, we have to bind this attribute to the Vue component. Now we can use v-bind, or the shortcode, which is just :.

In order to do this, we have to bind this attribute to the View component. Now we can use v-bind, or the shortcode, which is just a colon. Now if we recompile that, and take a look in our browser, you can see that clicking here will not open up our window anymore, but dragging and dropping an image to it still works. Uh oh, but we're getting this error now, file is of invalid type. Well we included that file type plugin, but I think it also expects an initialization in the FilePondView component. So I want to allow browsing, so we'll just remove this, and instead replace it with Accepted File Types, and we're going to say Image, Any.

So I want to allow browsing, so we'll just remove this, and instead replace it with Accepted File Types, and we're going to say Image, Any. So this will allow any image type of file to be uploaded through FilePond. And again one more time, we'll recompile, and take a look at this in our browser. So now let's try to upload a file, and it passed through, but it still errored on the upload because we don't have anything powering that upload route. But that's exactly what we'll do in the next video.