web-dev-qa-db-ja.com

既存のアップロードされたファイルでフォームを編集する方法

テキストデータを要求する単純なフォームとファイル入力があります。データを入力してファイルを選択すると、そのデータがアップロードされ、レコードの一部になります。

特にファイルに関して、ユーザーがこのフォームを編集したい場合の正しいUI/UXは何でしょうか。

私のアイデアは、「ファイルの削除」リンクと非表示のファイルフォーム要素で既存のファイル名を表示することでした。ユーザーが[ファイルの削除]をクリックすると、リクエストはajaxを介して行われ、成功するとファイルフォーム要素が表示されます。

このアプローチを検討しているのは、「保存」ボタンをクリックせずに永続的な変更を行うことです。したがって、ユーザーはファイルを削除してから[キャンセル]をクリックできますが、変更が発生します。

これには既知のパターンがありますか?

3
zundi

ユーザーに適切なプロンプトを表示したり、それを元に戻すオプションを提供したりせずに、重要なこと(ファイルの削除など)を行わないでください( これに関する関連質問 )。

あなたのケースでは、「ファイルを削除する」を「ファイルを置き換える」に変更することをお勧めします。その後、次のプロセスが発生する可能性があります。

  1. ユーザーがフォームを編集します
  2. ユーザーが置換ファイルをクリックする(バックエンドで何も起こらない)
  3. ユーザーが新しいファイルを選択
  4. ユーザーが保存/適用をクリックする
  5. 新しいファイルがアップロードされ、検証されます
  6. 古いファイルが削除されました
  7. フォームが送信されます

全体的な要点は、次の2つの理由により、ユーザーが[削除]をクリックしたときに実際にファイルを削除しないことです。

  • ユーザーが有効な置換ファイルを見つけられない可能性があります
  • ユーザーが編集をキャンセルしたり、誤ってタブを閉じたりする
0
Alan

最初のアップロードが他の場所で参照されていない限り、それは理にかなっています。また、これが最終的なものであることをユーザーが認識していることを確認してください。おそらくプロンプトは、「これを完全に削除しても大丈夫ですか?」

0
Casey Govero

WooCommerceはそれを行います:カテゴリーを編集するとき、カテゴリーのサムネイルをアップロードし、それを置き換えてカテゴリーを編集します。

WooCommerce Category Screenshot

[編集]ページで、ユーザーに

  • 以前にアップロードしたファイルを削除する
  • 以前にアップロードしたファイルをアップロードする別のファイルで置き換えます

更新はフォームが送信された場合にのみ有効であるため、アップロードされたファイルを置き換えることはフォームの他の入力フィールドを変更するようなものです。

0
Stefano