 Hey, everyone. Sam here. This is a quick web series about solving web problems with standards. These tips are part of the platform and work with any framework or library. These are quick tips. Let's go. Today, I'm going to upload a file. Let's drag here. That wasn't what I meant. Let's upload the file in the standard way. As we saw, if you drag a file onto a browser, by default, it'll open the file, replacing the site you had open. If your site deals with files in any way, your users might actually get confused. To prevent this default behavior, add handlers for the drag over and drop events. Both handlers just need to call prevent default. And presto, dropping files on your page does nothing. Of course, you probably do want to do something. So we want to expand on the drop event handler. If you have an existing HTML form containing a file upload element, one simple option is to place the user's file there for later to upload when the user hits submit. This even works if the form element is hidden. But if you want to upload the files immediately, another option would be to grab the files directly with JavaScript. In this example, we choose just the images and then upload them to our backend in parallel, not waiting for a traditional form submission. It's worth noting that it's actually possible to add these handlers to any element in your page. But my preference is to add it to the HTML tag, you know, so the whole page can be your drop target. Drag and drop isn't just about uploading files. You know, you can drag text, UI elements, really anything from your computer. And my longer article will give you an in-depth explanation on a variety of different use cases. Remember, use drag over and drop to override the browser's default behavior. And for simplicity, use the whole page as a drop target. That was drag and drop, the standard way. See you on the next tip. Somebody gold. Remember. Drag and drop isn't just about, I did it again. See you now, you've got good outtakes.