現在記事作成画面を作成していて、画像をローカルから選択しそれがすぐにプレビューとしてみれるようなものを作っています。
「同じ画像を続けて2回選択する」という特殊なケースを除いてはうまく動作するのですが、この唯一のケースにおいては何も起きないという状況に陥ってしまします。
現在のコードは以下に添付してある通りです。
どのように修正すれば、これが解決されるか、教えていただきたいです。
HTML
1<div id='body-text' class='body-text' contenteditable=true></div> 2 3<label> 4 <i class='fa fa-picture-o' aria-hidden='true'></i> 5 <input type='file' name='image' onchange={ inputImage } hidden> 6</label>
Javascript
1inputImage(e) { 2 var fileData = e.target.files[0] 3 var fileType = fileData.type 4 5 var reader = new FileReader() 6 7 reader.onerror = () => { 8 alert('Failed to upload. Please do it again') 9 } 10 11 reader.onload = () => { 12 var url = reader.result 13 var imageArea = document.createElement('div') 14 var image = document.createElement('img') 15 image.setAttribute('src', url) 16 imageArea.appendChild(image) 17 var target = document.getElementById('body-text') 18 target.appendChild(imageArea) 19 } 20 reader.readAsDataURL(fileData) 21}
動かないのは特定のブラウザでしょうか。
現在chromeで動かない状況で、ご質問を頂いてから他のブラウザでも試してみようと思ったのですが、開発環境についての知識が乏しく、現状どうやって他のブラウザで試すのかわからない状況です。。chromeで動かないのだから動かないのだろうと思っていました。
個人的には「onchange」で関数を呼び出しているので、2回連続で同じファイルを選択すると変化がなく発火しないのかなと思っているのですが、1度選択して設定したものをどう消すのかわからず、これがわかれば解決するのかもしれないなと思っています。全然違うのかもしれませんが。