Custom HTML File Browser

There may be many ways to customize the file browser provided by HTML5, but i chose the easiest way to achieve it.

Firstly create an Input tag with the type as file and attach a function for ‘onchange’ event. Hide the browser tag by setting the display style of this tag to none. Create one more input box without specifying type as text, and also create a button with onclick event.

Customize the input box as well as the button according to your choice. In the function called when the button is clicked, trigger the click for the hidden input tag. Since a demo is attached with the code am not writing the code after explanation. Refer the function ‘triggerFileBrowser()’ from js tab.

After a file is selected the control reaches the ‘onchange’ event of file browser, here collect the value from the browser and show it in the input box created, which is done in function ‘fileSelected()’.

Below is the URL for codepen if it doesn’t load in your browser.

Simple isn’t it?

See the Pen Custom HTML file browser by shyam (@shyam_kumar) on CodePen.18322

Happy coding…………………….:)

Convert the selected file to base64 string

Tagged as: