input-type-file – Tarik Billa

How to display a image selected from input type = file in reactJS

May 30, 2023 by Tarik

Hook version: const [image, setImage] = useState(null) const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { setImage(URL.createObjectURL(event.target.files[0])); } } return ( <div> <input type=”file” onChange={onImageChange} className=”filetype” /> <img alt=”preview image” src={image}/> </div> ) Class version render() { return ( <div> <input type=”file” onChange={onImageChange} className=”filetype” /> <img alt=”preview image” src={this.state.image}/> <div/> ) } onImageChange … Read more

limit selectable files by extensions [duplicate]

December 9, 2022 by Tarik

Easy way of doing it would be: <input type=”file” accept=”.gif,.jpg,.jpeg,.png,.doc,.docx”> Works with all browsers, except IE9. I haven’t tested it in IE10+.

How can I clear an HTML file input with JavaScript?

October 4, 2022 by Tarik

There’s 3 ways to clear file input with javascript: set value property to empty or null. Works for IE11+ and other modern browsers. Create an new file input element and replace the old one. The disadvantage is you will lose event listeners and expando properties. Reset the owner form via form.reset() method. To avoid affecting … Read more

Twitter Bootstrap Form File Element Upload Button

September 10, 2022 by Tarik

Here’s a solution for Bootstrap 3, 4, and 5. To make a functional file input control that looks like a button, you only need HTML: HTML <label class=”btn btn-default”> Browse <input type=”file” hidden> </label> This works in all modern browsers, including IE9+. If you need support for old IE as well, please use the legacy … Read more