モバイルからScrapboxに画像アップロード
画面長押しで、「upload image」というpopup menuをだせばよい気がするshokai.icon モバイルってファイル選択ダイアログ的な物は出せるんだっけ?
scrapboxのpage data import画面でチェックしてみたshokai.icon
Android
ファイルもカメラも選べる!
https://gyazo.com/67ce2a335793a1c6f4ad77c7d56ccbe6
こりゃサッと実装できそうだなshokai.icon
iOS
どうなるんだろ
Photo LibraryとiCloudが選択できた
https://gyazo.com/ecae9ef8353b41bceeb14c1bd8e6d301
押すとupload modalが出る
modalには<input type='file'>のformがある
中身をbase64エンコードしてGyazoのeasy_authに送る
あとは返り値であるGyazo画像URLをStores.Line.addChar(\`[${imageUrl}]\n\`)で埋め込む
完了!
アップロード中にmodalを閉じたら?
アップロード中はbackdropをクリックしてもmodalを閉じれないようにする
代わりにupload cancelボタンを表示する
ボタンの中にmodalを置く
modalを閉じる為にmodal-backdropをクリックすると、ボタンをクリックした事になって再度modalが開いてしまう
modalを開いている間はbuttonにonClickを設定しなければよい
<button onClick={this.state.showModal ? undefined : this.onClick}>Upload Image</button>
できてきたshokai.icon
ModalはPopupMenuのButtonに持たせれる
Storeを介する必要なし
やったshokai.icon
ローカルのchromeのandroid simulatorの様子
https://gyazo.com/6b9dd322fd91fd387bb834f159b2614d
縦長の画像のmax-height
画面サイズとの比率 - modalを閉じるための余白分に設定している
https://gyazo.com/53cca14ab7bcf73a9a04b3524d80c777
androidでの様子
https://gyazo.com/aed1a3de35c86a43566152b8d59dca72
android実機だとカメラも選べる
https://gyazo.com/6c295ba1c5834c47747b1c64268b3575
カメラで撮影してすぐに埋め込めるの想像以上に便利 daiiz.icon*2
アップロード失敗した時
https://gyazo.com/f592473c12004b7474b93d2b8b45058f
アップロード中にmodalを閉じるとアップロード失敗する
modal閉じる前にうまく確認入れるのができなかった
そのうち再チャレンジする
同様のエラー出るのでとりあえずはokだろう
gocci.icon
携帯から画像アップするの、大変になりました。(iOS)
ここに画像を入れたい!というときにメニューを選択するのはめんどうに感じてしまう
画像アップ用のメニューがパッと出ない😱
ボタン削除してわざとつらい状況を作ったけど手がまわらないまま2ヶ月経ちましたshokai.icon
モバイルからScrapboxに画像アップロード