如何將文件上傳與尚未創建的表單提交相關聯？

Question

我正在構建一個傳統的服務器渲染HTML應用程序（在PHP上使用Statamic ），該應用程序使用戶可以創建想法。 他們訪問“創建想法”表單，填寫一些問題，然后單擊“提交”。 一旦他們這樣做，表單就會向服務器發送一個POST請求，然后服務器將保存數據，並為該想法生成一個ID（和信息）。

現在，我想讓用戶上傳文件作為他們想法的一部分。 當然，老式的方法只是將文件輸入添加到表單，然后立即提交所有內容（數據和文件）。 服務器可以創建一個ID，然后將文件與該ID相關聯。

但是，此方法有一些缺點，尤其是在作為表單提交過程的一部分而必須等待文件上載的所有延遲中。 更現代的實現似乎是在文件添加完成后立即上傳（例如，通過拖放）。 例如，我已經確定FilePond是領先者，否則我可能會使用Dropzone.js 。

但是，如果瀏覽器在用戶提交表單之前發送了文件，我該如何最好地將文件與表單數據相關聯？ 我還沒有ID可使用。

這必須是一個已解決的問題。 但是我無法通過Google找到任何最佳做法，因此就出現了這個問題。 我可能遇到的解決方案：

1. 生成GUID作為表單的一部分。 提交此文件並上傳任何文件。 如果最終提交表單，則將其另存為表單數據的一部分（作為隱藏字段）。
2. 在啟用文件上傳之前，要求用戶提交表單（保存草稿）。 顯然不是很好的用戶體驗。
3. 作為上述2）的變體，在用戶開始上傳文件之前的某個時候，會通過Ajax自動提交表單。

我傾向於解決方案1，但想看看我可能在想什么。 由於UX令人困惑，所以2並不是很好，而3也似乎不太理想，例如，因為我可能最終會保存用戶從未真正保存自己（和放棄）的草稿想法，部分原因是生成的彈頭可能是基於標題丟失或不完整的原因，因為用戶在上傳文件之前可能尚未完成標題字段。

Answer 1

這是我的建議：

• 立即上傳文件（驗證后..）
• 使用第一個路徑/文件名（使其唯一！）和第二個唯一的，足夠長的令牌在數據庫的“文件”表中進行輸入
• 將其發送回您的表單（作為上傳的回報），並
• 在隱藏輸入中與表單一起提交。

然后創建一個cronjob，每小時刪除一次所有未使用的文件。

Answer 2

實際上，FilePond的文檔對建議的設置進行了說明 ：

使用FilePond異步上傳文件稱為處理。 簡而言之，FilePond將文件發送到服務器，並期望服務器返回唯一的文件ID。 然后，此唯一ID用於恢復上傳或稍后恢復以前的上傳。

隨着時間的推移，上傳過程將有所描述：

1. 客戶端使用POST請求將文件my-file.jpg上傳為多部分/表單數據
2. 服務器將文件保存到唯一位置tmp / 12345 / my-file.jpg
3. 服務器在文本/純文本響應中返回唯一的位置ID 12345
4. 客戶端在隱藏的輸入字段中存儲唯一ID 12345
5. 客戶提交FilePond父表單，該表單包含具有唯一ID的隱藏輸入字段
6. 服務器使用唯一的ID將tmp / 12345 / my-file.jpg移至其最終位置並刪除tmp / 12345文件夾