問題タブ [statamic]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
1480 参照

javascript - ファイルのアップロードを、まだ作成されていないフォーム送信に関連付けるにはどうすればよいですか?

私は、ユーザーがアイデアを作成できる従来のサーバー レンダリング HTML アプリケーション (PHP の上にStatamicを使用) を構築しています。アイデアの作成フォームにアクセスし、いくつかの質問に記入して、[送信] をクリックします。それらが完了すると、フォームPOSTはサーバーにリクエストを送信し、サーバーはデータを保存して、アイデアの ID (およびスラッグ) を生成します。

ユーザーがアイデアの一部としてファイルをアップロードできるようにしたいと思います。もちろん、これを行う昔ながらの方法は、ファイル入力をフォームに追加し、すべて (データとファイル) を一度に送信することです。サーバーは ID を作成し、ファイルを ID に関連付けることができます。

ただし、このアプローチにはいくつかの欠点があります。特に、フォーム送信プロセスの一部としてファイルがアップロードされるのを待たなければならないという遅延があります。より最近の実装では、ファイルが追加されるとすぐにファイルをアップロードするように見えます (たとえば、ドラッグ アンド ドロップを介して)。たとえば、私はFilePondを最有力候補として特定しました。それ以外の場合は、おそらく Dropzone.js を使用します

ただし、ユーザーがフォームを送信する前にブラウザーがファイルを送信した場合、どのようにすればファイルをフォーム データと最もよく関連付けることができるでしょうか? 私はまだ使用するIDを持っていません。

これは解決済みの問題でなければなりません。しかし、Google経由でベストプラクティスが見つからなかったため、この質問. 私に思い浮かぶ可能な解決策:

  1. フォームの一部として GUID を生成します。これをファイルのアップロードと一緒に提出してください。フォームが最終的に送信された場合に、フォーム データの一部として (隠しフィールドとして) 保存します。
  2. ファイルのアップロードを有効にする前に、フォームを送信する (下書きを保存する) ことをユーザーに要求します。明らかに優れたユーザー エクスペリエンスではありません。
  3. 上記の 2) のバリエーションとして、ユーザーがファイルのアップロードを開始する前のある時点で、Ajax を介してフォームを自動的に送信します。

私は解決策1に傾いていますが、私が考えていないかもしれないものを見たいと思っていました. 2 は UX がわかりにくいため良くありません。また 3 も理想的とは言えません。ユーザーがファイルをアップロードする前にタイトル フィールドに入力していない可能性があるため、欠落または不完全なタイトルに基づいています。