3

Scenario

Imagine we are writing a web application with a simple registration page containing something like the following:

  • Name
  • Email
  • Password
  • Profile Picture

OK, great, next the user hits "Create Profile". Ideally we would like the following to happen..

  1. Our image to be resized on the client (using their cpu)

  2. To post that image right over to S3, into a unique resting place. (without going through our hosting server costing us dyno's and precious time on our over worked single threaded rails app).

  3. To know when our image has been successfully uploaded to S3.

  4. Once the image is safe and sound, submit a second form through to our cloud server with the name, email, password and path to our troublesome image.

Question

Does this approach sound about right?

Also, does anybody know of any examples of how to do this in Rails? Ideally I am trying to find a way to abstract the differences from the user so they only have to hit one save button since that's all they care about.

I have found bits and pieces but nothing that ties it all together.

So far, I have been considering using SwfUpload as outlined in some of these articles...

http://vimeo.com/11363680

https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-directly-to-S3

I am a hobbyist at best when it comes to Rails, just wondering if there is a well thought out pattern for this? Everything I have seen so far (as great and helpful as that work is) only seems to get half way there.

I don't know it just feels like I am fighting hard to do something that people must deal with every day during modern development, I feel like I am missing something...

4

2 回答 2

0

在搜索另一个问题时遇到了这个问题：您可以使用 S3 执行的操作是使用浏览器上传并发布到隐藏的 iframe。默认情况下，使用浏览器上传时，您可以指定重定向位置。然后，您可以让重定向位置调用提交注册表单的 javascript。我用我想要上传的图像文件成功地做到了这一点：然后我调用我的 heroku dyno，它在后台任务中将文件从 S3 中拉出，生成缩略图，然后将缩略图发布回 S3。

然而，在浏览器中调整大小将非常困难。有关一种可能的解决方案，请参阅在 HTML5 画布中调整图像大小。

于 2012-08-23T11:53:24.117 回答
0

如果我错了，请纠正我，但听起来你想在客户端做所有事情（这意味着 JavaScript）。

我相信有一种方法可以使用 Canvas 调整图像大小，但是 1）它看起来不会很好（除非它是简单的裁剪），2）这假设用户有一个现代浏览器，以及 3）如果你使用 Canvas 你完成处理后，您需要将其转换回图像，这意味着您需要将数据发送到某个地方以存储在文件中，这意味着您的服务器受到了打击。

使用直接 POST 到 S3 API 的表单向 S3 发布权限很好，但您不知道图像何时上传，因为控制权离开页面并且永远不会回来。这意味着您必须使用 Ajax... 除非您遇到跨域策略。您可以使用 iframe + postMessage 技巧来做到这一点，尽管这会对您的服务器造成打击。所以我认为解决这个问题的唯一方法是使用 Flash，即 Gmail 的附件上传器（无论如何，这似乎是你要走的路）。如果你沿着这条路走，那么你可能需要稍微改变一下工作流程——也就是说，不是让图像在提交时上传，然后等到它提交后再继续，而是让用户手动上传图像并阻止提交按钮，直到图像上传。（它'

所以我不确定除了更换托管服务提供商或添加更多服务器之外，是否有完整的解决方案可以解决您的问题，但至少有一些想法。

于 2012-04-24T06:32:05.400 回答