File uploads allow you to give users a way to upload files that looks a lot better than the browser's built-in file upload boxes. They're very easy to set up and support hover effects out of the box. Check it out compared to the default file input:
File inputs are set up by creating a wrapper div with a file input inside it. The wrapper div needs to have the CSS class custom-file-input
.
<div class="custom-file-input">
<input type="file" id="example-input-1" />
</div>
Then, you can run the SetupCustomFiles
function to activate your inputs.
NSLib.SetupCustomFiles();
That's it! Your file input box will now function like a normal file input, but look a lot nicer.
The finishupload
event will be triggered when a user has uploaded a file using a custom file input:
document.getElementById("example-input-1").addEventListener("finishupload", function() {
// handle event
});