Databases
StackOverflow2013
Postsdbo
POHTML 5 Amazon S3 Direct Uploader
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML 5 Amazon S3 Direct Uploader
    primarykey
    data
    text
    <p>I am looking for an HTML 5 AJAX library / framework for users to upload files directly to Amazon S3. The goal is to avoid uploading attachments to the web server (as the web server blocks when it transfer them to Amazon). My understanding is that this should be possible using <code>XDomainRequest</code>, but I can't figure out how. </p> <p>I am running ruby-on-rails and wanted to assign the uploaded file a temporary name (using a UUID) that will be posted back to the web server so the file can later be renamed and integrated with paperclip. </p> <p>Any ideas? Is this something jQuery can handle? Flash isn't an option for this project. Thanks!</p> <p><strong>Edit:</strong></p> <p>I managed to get a basic post working but am still have issues. I'm not exactly sure what headers are required, or how to encode the Amazon required parameters in the request (can I put them in the request header?). Here is my progress thus far:</p> <pre><code>const XMLHTTPFactories = [ function () { return new XDomainRequest(); }, function () { return new XMLHttpRequest(); }, function () { return new ActiveXObject("Msxml2.XMLHTTP"); }, function () { return new ActiveXObject("Msxml3.XMLHTTP"); }, function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, ]; var xhr = null; for (var i = 0; i &lt; XMLHttpFactories.length; i++) { try { xhr = XMLHttpFactories[i](); break; } catch (exception) { continue; } } $(this).change(function () { for (var i = 0; i &lt; this.files.length; i++) { var file = this.files[i]; xhr.open(settings.method, settings.url, true); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("Access-Control-Allow-Origin", "*") xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); xhr.send(file); } </code></pre> <p><strong>Edit:</strong></p> <p>After further updates, I've managed to get the following error:</p> <blockquote> <p>XMLHttpRequest cannot load <a href="http://bucket.s3.amazonaws.com/" rel="nofollow">http://bucket.s3.amazonaws.com/</a>. Origin <a href="http://local.app" rel="nofollow">http://local.app</a> is not allowed by Access-Control-Allow-Origin.</p> </blockquote> <p>I've uploaded a <code>crossdomain.xml</code> file that allows access from the wildcard (*) domain. Not sure how to continue...</p> <p><strong>Edit:</strong></p> <p>After having done more investigation, I'm starting to think that the JavaScript POST might not be possible to S3. Will I be required to post to an EC2 instance before doing a transfer? I might be able to secure a micro instance, but I'd prefer to go direct to S3 if possible! Thanks!</p> <p><strong>Edit:</strong></p> <p>I posted the question on the Amazon Forums and haven't received any feedback. For cross references the other post can be found here: <a href="https://forums.aws.amazon.com/message.jspa?messageID=206650#206650" rel="nofollow">https://forums.aws.amazon.com/message.jspa?messageID=206650#206650</a>.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKevin Sylvestre
    1. USKevin Sylvestre
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHTML 5 Amazon S3 Direct Uploader
      1. USKevin Sylvestre
      1. VTBountyStart
    2. VO
      singulars
      1. POHTML 5 Amazon S3 Direct Uploader
      1. USKevin Sylvestre
      1. VTFavorite
    3. VO
      singulars
      1. POHTML 5 Amazon S3 Direct Uploader
      1. USjayarjo
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload