NS-Lib

File upload


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:







Usage


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.




Events


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
});

On this page