Coding a drag and drop form with TailwindCSS

[00:00] So what we want to build is a drag and drop form similar to what we have here in this sketch. The first thing I'm going to do is to add a route that will render the form. So I'll do Route::get('media/create') and we'll pass a closure that will return an inertia view - let's say, CreateMedia.

[00:27] Then I will go to resources/js/Pages and duplicate this dashboard component. Let's now view this in the browser. I'll authenticate and go to media/create and start by changing the heading to "add new media" and remove this part right here.

[00:57] If we go back to the sketch we can start laying down the form structure. We'll have a container, an svg icon that I'll paste in, a p tag for "dropped files to upload", another one for "or" and the select files button that will actually be a label wrapping a file input - and we can hide this with sr-only, and here we'll have "select files"

[01:35] Finally we need another p tag for the "maximum upload file size".

[01:48] Now that we have the html structure in place we can focus on styling it. We'll start with the container and move down from there. We'll go here and say class, and we'll make this a vertical flex, we'll then add a border and let's make this thicker and, say, dashed border-gray-400, and let's make it rounded

[02:19] Now let's go on the svg and make it a bit smaller using class w-12 h-12and to set the color we'll do text-gray-500, and we can also add some padding using px-6 py-12, and to center the items we can do items-center.

[02:44] Let's move down to the "drop files" text and we'll do class text-xl, we'll leave the "or" as it is and focus on the label. We'll do bg-white px-4 h-9, and to align the text we can do inline-flex items-center, and let's make this rounded, give it a border, and a bit of shadow, and for the text we can do text-sm font-medoum text-gray-700.

[03:33] Moving down to the maximum upload file size, we can do class text-xs text-gray-600 mt-4, I would also like to have som efocus styles for the button, so we'll do ring-2 ring-offset-2 and ring-indigo-500, and to apply these on focus we can do focus-within and now, if I click, here it is.

[04:14] Let's make this text a bit lighter and add some margin between the button and the "or", and then move on to other things. I'll do class py-2, and here we'll do text-gray-800, and the same for the or.

[04:41] Now, usually drag and drop forms offer some kind of visual cue whenever the user drags files over the form area. In our case we could turn this grey border into indigo when that happens.

[04:54] To do that we can listen to the dragover and dragleave events, toggle a data model and use that to style the form. So we can do dragover and set dragging to true, and dragleave to set draggint to false.

[05:13] Let's add dragging to our data, and the initial value will be false, and now we can use it to style the border. If dragging, then border-indigo-500 otherwise border-gray-400, and let's also add the default styles without the border gray.

[05:51] Now if I pick a file and drag it over, the border changes its color.