インターンで思いっきり失敗した話

こんにちは！ラブグラフ開発インターンの筒井です！

タイトル通りおぞましい話なのですが、あれはラブグラフでインターンを始めてから約1ヶ月が経とうとしていた頃でした…

アサインされたタスク

画像をアップロードするコンポーネントでファイルをドラッグ&ドロップもしくはドラッグ&ドロップできる範囲内をクリックすることで、ファイル参照ダイアログから選択できるはずだったのですが、どうやらドラッグ&ドロップが反応しないとのことでそこを修正するタスクにアサインされました。

ざっくりコードはこんな感じ。

hoge.vue

<div>
    <div>
        ファイルをここにドラッグ&ドロップしてください
    </div>
    <input @change="onFileChanged" accept="image/*" id="upload-button"
        　　multiple name="upload-field" type="file">
</div>

原因究明と解決（したと思っていた…）

何が原因なのかを探っていくと、どうやら<input>と<div>が被さってるのが問題っぽそうだなということに気がつきました。

「ファイルをここにドラッグ&ドロップしてください」の文言上では<input>が邪魔してドラッグ&ドロップが反応せず、input以外の範囲では反応するという挙動になっていました。

なのでinputにtype="hidden"を指定すれば直るのでは！っと思い、コードをこんな感じで修正しました。

hoge.vue

<input @change="onFileChanged" accept="image/jpeg" id="upload-field"
       multiple name="upload-field" type="hidden" ref="file_input">

ローカル・ステージング環境両方で動作確認して、その時は良い感じに動いていたのでレビューしてもらいリリースされました🎉

と思っていたら、問題発生

リリースされて数日後、ユーザさんからスマホで「ファイルをここにドラッグ&ドロップしてください」をタップしてもファイル参照ダイアログが表示されないという報告が来ました😨

サービスの中でも画像をアップロードする部分は大事なとこなので、今回の不具合はユーザさんに迷惑がかかってしまいました。

大変申し訳ございませんでした！！！！！！！！！！！！！！🙇‍♂️🙇‍♂️🙇‍♂️🙇‍♂️🙇‍♂️🙇‍♂️🙇‍♂️

早速修正に取りかかる

やはり、type="hidden"をつけたのが原因で、なぜリリース前に気づけなかったのかは謎…（以後気をつけます🙇‍♂️）

ファイル参照ボタンとドラッグ&ドロップができる範囲を共存させる方法がないかと思って調べましたが、どうやら厳しそうでした…何か良い方法があれば教えてください🙏

そのため、サービス内で他にも画像をアップロードできる部分を探してみると、まさかのドラッグ&ドロップ部分とファイル参照ボタンを分けて作っている部分を発見！！

そこを参考にしながら、ドラッグ&ドロップが動作する範囲外にファイル参照ボタンを設置しました。

hoge.vue

<div>
    <p>もしくはこちらからファイルを選択してください。</p>
    <input @change="onFileChanged" accept="image/jpeg" id="upload-field"
           multiple name="upload-field" type="file" ref="file_input">
</div>

動作確認をしてみると…

今度こそ正常に動作していることを確認！！！

結果的にファイル参照とドラッグ&ドロップを共存させる解決策は見つけられなかったですが、ボタンを別で作成することで問題を解決することができました🎉

さいごに

そんなこんなで、ユーザさんに直接迷惑がかかってしまう失敗を起こしてしまったわけなのですが、エンジニアチームの皆さんに暖かく見守っていただいて、無事この修正もリリースされたので一件落着。

ラブグラフは、たくさん学べて、失敗できて、楽しくて、温かみのある稀有な会社だと思うので、少しでもラブグラフでのインターンに興味があればぜひ下記から連絡してみてください！！！！！！

https://herp.careers/v1/lovegraph/TzHITy0TRbVQ