如何将文件上传与尚未创建的表单提交相关联？

Question

我正在构建一个传统的服务器呈现的HTML应用程序（在PHP之上使用Statamic），它允许用户创建想法。他们访问Create Idea表单，填写一些问题，然后单击“提交”。一旦他们这样做，表单就会向服务器发送POST请求，然后服务器会保存数据，为该想法生成ID（和slug）。

我现在想让用户上传文件作为他们想法的一部分。当然，传统的方法是将文件输入添加到表单中，然后立即提交所有内容（数据和文件）。服务器可以创建一个ID，然后将文件与ID相关联。

然而，这种方法有一些缺点，尤其是在表单提交过程中必须等待文件上传的所有延迟。更新的现实实现似乎在添加文件后立即上传（例如，通过拖放）。例如，我已将FilePond确定为领跑者，否则我可能会使用Dropzone.js。

但是，如果浏览器在用户提交表单之前发送文件，我该如何才能最好地将文件与表单数据相关联？我还没有使用ID。

这必须是一个已解决的问题。但我无法通过谷歌找到任何最佳实践，因此这个问题。我可能遇到的解决方案：

1. 生成GUID作为表单的一部分。提交任何文件上传。如果表单最终提交，则将其保存（作为隐藏字段）作为表单数据的一部分。
2. 要求用户在启用文件上传之前提交表单（保存草稿）。显然不是一个很好的用户体验。
3. 作为上述2）的变体，在用户开始上传文件之前的某个时刻通过Ajax自动提交表单。

我倾向于解决方案1，但想看看我可能没想到的东西。 2由于令人困惑的用户体验并不是很好，而且3似乎也不太理想，例如因为我最终可能会保存用户从未实际保存过自己（并放弃）的草案提示，部分原因是因为生成的slug可能是基于标题丢失或不完整，因为用户可能在上传文件之前没有完成标题字段。

Answer 1

这是我的建议：

• 立即上传文件（验证后......）
• 在数据库的“files”表中创建一个条目，第一个路径/文件名（使其唯一！）和第二个唯一，足够长的标记
• 将其发送回您的表单（从上传返回）和
• 使用隐藏输入中的表单提交。

然后创建一个cronjob，每小时左右删除一次所有未使用的文件。

Answer 2

事实上，FilePond的文档有description of a recommended setup：

  

使用FilePond异步上传文件称为处理。简而言之，FilePond将文件发送到服务器并期望服务器返回唯一的文件ID。然后，此唯一ID用于恢复上传或稍后恢复之前的上传。

     

随着时间的推移描述上传过程：

     

  
1. 客户端使用POST请求将文件my-file.jpg上传为multipart / form-data
  
2. 服务器将文件保存到唯一位置tmp / 12345 / my-file.jpg
  
3. 服务器在text / plain response
中返回唯一位置ID 12345   
4. 客户端将唯一ID 12345存储在隐藏的输入字段中
  
5. 客户端提交包含具有唯一ID
的隐藏输入字段的FilePond父表单   
6. 服务器使用唯一ID将tmp / 12345 / my-file.jpg移动到其最终位置并删除tmp / 12345文件夹