firefox copy-paste bug repro
HTML
<div id="app"></div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
.done {
color: rgba(0, 0, 0, 0.3);
text-decoration: line-through;
}
input {
margin-right: 5px;
}
React
class Repro extends React.Component {
constructor(props) {
super(props)
this.state = { files: [] }
}
componentDidMount() {
window.document.addEventListener("paste", (ev) => {
const file = Array.from(ev.clipboardData.items)
.filter((item) => item.type.indexOf("image") > -1)
.map((item) => item.getAsFile())
.filter((item) => !!item)[0];
if (file) {
return this.setState((state, props) => ({ files: [...this.state.files, file] }));
}
});
}
render() {
return (<div>
{this.state.files.map(file => {
const objectURL = URL.createObjectURL(file);
return <img width="100" height="100" src={objectURL} />;
})}
</div>)
}
}
ReactDOM.render(<Repro />, document.querySelector("#app"))