既存のアップロードされたファイルでフォームを編集する方法
テキストデータを要求する単純なフォームとファイル入力があります。データを入力してファイルを選択すると、そのデータがアップロードされ、レコードの一部になります。
特にファイルに関して、ユーザーがこのフォームを編集したい場合の正しいUI/UXは何でしょうか。
私のアイデアは、「ファイルの削除」リンクと非表示のファイルフォーム要素で既存のファイル名を表示することでした。ユーザーが[ファイルの削除]をクリックすると、リクエストはajaxを介して行われ、成功するとファイルフォーム要素が表示されます。
このアプローチを検討しているのは、「保存」ボタンをクリックせずに永続的な変更を行うことです。したがって、ユーザーはファイルを削除してから[キャンセル]をクリックできますが、変更が発生します。
これには既知のパターンがありますか？
ユーザーに適切なプロンプトを表示したり、それを元に戻すオプションを提供したりせずに、重要なこと（ファイルの削除など）を行わないでください（ これに関する関連質問 ）。
あなたのケースでは、「ファイルを削除する」を「ファイルを置き換える」に変更することをお勧めします。その後、次のプロセスが発生する可能性があります。
- ユーザーがフォームを編集します
- ユーザーが置換ファイルをクリックする（バックエンドで何も起こらない）
- ユーザーが新しいファイルを選択
- ユーザーが保存/適用をクリックする
- 新しいファイルがアップロードされ、検証されます
- 古いファイルが削除されました
- フォームが送信されます
全体的な要点は、次の2つの理由により、ユーザーが[削除]をクリックしたときに実際にファイルを削除しないことです。
- ユーザーが有効な置換ファイルを見つけられない可能性があります
- ユーザーが編集をキャンセルしたり、誤ってタブを閉じたりする
最初のアップロードが他の場所で参照されていない限り、それは理にかなっています。また、これが最終的なものであることをユーザーが認識していることを確認してください。おそらくプロンプトは、「これを完全に削除しても大丈夫ですか？」
WooCommerceはそれを行います：カテゴリーを編集するとき、カテゴリーのサムネイルをアップロードし、それを置き換えてカテゴリーを編集します。
[編集]ページで、ユーザーに
- 以前にアップロードしたファイルを削除する
- 以前にアップロードしたファイルをアップロードする別のファイルで置き換えます
更新はフォームが送信された場合にのみ有効であるため、アップロードされたファイルを置き換えることはフォームの他の入力フィールドを変更するようなものです。