Q&A
アップロードしたファイルをローカルに保存しておきたい、ということでしょうか？
アドバイス頂きたいこと
最大15MBのファイルアップロード機能を考えているのですが、ローカルストレージのデータ保存可能容量がブラウザにより４MB 以内になる可能性があるため、その他の方法を模索しております。
入力画面から確認画面に行く時にサーバーのセッションに保存する方法も可能ではないかと思ったのですが、何か良い方法はありますでしょうか？アドバイスよろしくお願い致します。
前提
ヤフー知恵袋と同じように非同期通信で画面を切り替えずに入力画面→確認画面→サーバーに送信→コメント、アップロードファイルを表示という形で作成したいと考えております。
JavaScriptで確認画面を出す場合、ローカルストレージなどに保存しないと入力内容が消えるため、アップロードファイルをどう対処すべきか悩んでおります。
参考サイト
回答ありがとうございます。
確認画面を出す場合一時ファイル等に保存しても、ユーザーがファイルを消してしまった場合に消えてしまう可能性があるため、一旦サーバー側にファイルとして保存する必要があるようです。
そこで対策の１つとしてローカルに保存する方法を考えております。
どういうケースを想定してるのか、ちょっとよくわからないですね。
回答ありがとうございます。
入力画面→確認画面→サーバーに送信という流れで作成しているのですが、Javascriptで確認画面を表示させる必要があるため、一旦サーバー側にファイルとして保存する方法か、入力画面からの送信時にセッションを使う方法の2択しかないと考えております。
表示と非表示をJavascriptを使い切り替えるデザインで作成しており、その際にアップロードファイルは一時ファイル等に保存する必要があるとアドバイスを頂いたのですが、ユーザーがファイルを消してしまった場合に消えてしまう可能性があると別の方にアドバイスを追加で頂き、アップロードしたファイルをローカルに保存するという方法で結論を出しました。
※掲示板の詳細について
入力画面の送信ボタンで確認画面を表示させて、入力画面は非表示に↔確認画面の戻るボタンで確認画面を非表示させて、入力画面を表示させる
なんとなくわかりました
同一ページ内で入力フォームと入力内容の表示をJavaScriptで切り替えるということでしたら、入力内容は消えないですよ。
tabuuさんアドバイスありがとうございます、入力画面と確認画面をJavascriptで表示切り替えする場合、ローカルストレージなどに保存しないと入力内容は消えるというご指摘を頂いたのですが、認識としてはどちらが正しいのでしょうか？
> 入力画面と確認画面をJavascriptで表示切り替えする場合、ローカルストレージなどに保存しないと入力内容は消えるというご指摘を頂いたのですが、認識としてはどちらが正しいのでしょうか？
横からすみません。
お試しになってはどうですか？ サーバ側のコードは必要ないorモックで十分なのですから、クライアント側だけテストコードを書いて消えるかどうか確認すれば分かるのでは。
なんとなくですが、私たちteratailの回答者やそのアドバイスをくれた人たちと、十分な意思疎通ができていないように感じます。この状態で言われたことを試さないまま受け入れて実装の前提にするのは危ういような気がします。
アドバイスありがとうございます、申し訳ありません…試してみて分からなかったら質問いたします。
回答2件
0
ベストアンサー
非同期でサーバにファイルを送信してバリデーションし、サーバ側の一時ファイルなどを使いたくないので、確認ダイアログを出してからもう一度クライアント側の同じファイルを送信したいということですね。
その間にユーザがクライアントにあるファイルを消したら再送信できないことをご心配されているとのことですが、それはそれでエラーメッセージをだせばいいと個人的には思いました。
さてご質問の件ですが、ページ移動しないのでしょうから、クライアント側でblobのまま持っておくのではダメですか？
投稿2023/11/07 12:44
編集2023/11/08 03:01総合スコア36603
アドバイスありがとうございます、確認ダイアログを出したいのではなく、確認画面を用意して誤入力や誹謗中傷を防ぐ目的になります。
一時ファイルを使用した場合でもユーザがファイルを消した場合は使えない為、一旦サーバー側にファイルとして保存する必要があるようです。
blobのまま持っておくという発想はありませんでした、作成してみます。
なんか伝わってない感がありますね……
> 一時ファイルを使用した場合でもユーザがファイルを消した場合は使えない為、一旦サーバー側にファイルとして保存する必要がある
ここでいう『一時ファイル』とはなんでしょう？ 『一旦サーバー側にファイルとして保存』したファイルは、『一時ファイル』とは違うものなんでしょうか？
当方の回答が伝わっているのか不安になっております。わからないところやあいまいな点があれば、コメントでお知らせください。
回答ありがとうございます、『一旦サーバー側にファイルとして保存』したものはセッションで入力内容を保持した場合のファイルになります。
『一時ファイル』は blob か IndexedDB でクライアント側で保持するファイルになります。
現在 Lhankor_Mhy さんからアドバイス頂いたように blob を使い作成しているので、分からないことが出てきた場合アドバイスお願い致します。
『blob か IndexedDB を使用した場合でもユーザがファイルを消した場合は使えない』というのは間違った認識だと思います。ご参考までに。
アドバイスありがとうございます、了解いたしました。
Javascript で Blob を使ってコードを考えていきたいのですが、初めて使うためどの項目を実装したほうがよいか分からず迷っております…
関連記事に書いてある機能だけで問題ないでしょうか？
※Blobの項目について
https://lab.syncer.jp/Web/JavaScript/Snippet/25/
そのページの関連記事の項にある5つの記事は、あまり関係のない事柄のように思いますが……
そのページで言いますと、var fileList = this.files ; だけで十分かと思います。これは File オブジェクト（Blob のサブクラス）のリストです。
アドバイスありがとうございます、Blobストレージ を使う場合有料のサービス限定になるのでしょうか？
無料の IndexedDB とどちらを使うべきか悩んでおります。
※参考サイト
https://www.cloudflare.com/ja-jp/learning/cloud/what-is-blob-storage/
それは全然違うやつですね。
直前の私のコメント読んでいただいてますか？
回答ありがとうございます、申し訳ありません…
var fileList = this.files ; だけで十分という意味がよくわからず別のワードで検索しておりました。
File オブジェクト（Blob のサブクラス）で検索してみたところ、下記のような参考サイトを見つけたのですが、Blob で値を保持したい場合どうすれば良いのでしょうか…？
※参考サイト
https://hakuhin.jp/js/file.html
Blob について検索してみたのですが、方法が見当たらずどうしてよいか分からなくなっております…
簡易的なサンプルコード又は参考サイトなど教えて頂けないでしょうか？
※現在のコード
https://wandbox.org/permlink/2terZMTshVWBqEkm
拝見しました。
これ、ユーザーがファイルを削除したときに消えますか？ ちゃんと試してないですが、消えないような気がしますが…… どのようにして試されましたか？
回答ありがとうございます、説明不足で申し訳ありません…
セッションに保持する場合はファイルは消えないようです。
Blob を使う方法が気になった為、別途どのようなコードになるのか考えておりました。
その後、いろいろ試してみましたが、file オブジェクトのままだとユーザーがファイルを削除した際に壊れてしまうようでしたので、arrayBuffer として取り出しておくのがいいように思いました。
ご提示のコードですと、以下のような感じかと思います。
fileList = await Promise.all(formData.getAll('attach[]').map(file => file.arrayBuffer()));
なお、セッションに保持する場合、というのはよくわかりませんでした。
アドバイスありがとうございます、サーバー側の処理（最初の送信からデータベースやファイルに保存するまで）はセッションで行い、
クライアント側はサーバーからは何も受信せずにクライアント内でメモリ（変数）を使いまわす形で可能ではないかと教えて頂いたのですが、
Lhankor_Mhy さんがおっしゃられている方法はメモリ（変数）に一時的に記憶するということでしょうか？
すみませんが、おっしゃることがよくわからないです。
> サーバー側の処理（最初の送信からデータベースやファイルに保存するまで）はセッションで行い、
ということであれば、クライアント側で保存する目的は何なのでしょうか。
質問の補足依頼欄で『ユーザーがファイルを消してしまった場合に消えてしまう可能性があるため』とお答えいただいたのですが、この目的ですとサーバ側に登録が終わっているのですから、不要ですよね。
---
> Lhankor_Mhy さんがおっしゃられている方法はメモリ（変数）に一時的に記憶するということでしょうか？
そのとおりです。ページを移動したり閉じたりするまではデータが保持されるはずです。
0
バリデートを非同期でおくってエラーがなければ本番送信すればファイルは消えないですよね？
投稿2023/11/07 01:35
総合スコア115886
回答ありがとうございます。非同期通信でアップロードファイルを送信する場合下記の２つがあると考えているのですが、②の方法を選択すべきということでしょうか？
拡張子とMYME_typeをチェックして問題がなければ送信する形で非同期通信を使わずに還移する場合に作成しておりました。
別途お聞きしたいのですが ・IndexedDB を一時ファイルとして代用することは可能だと思われますでしょうか？
数十から数百MB を保存できるようで気になっております。
①入力画面からの送信時にセッションを使う。
②入力画面からの送信後に一時ファイルに保存する。
あなたの回答
tips
プレビュー
