HTML 5 Amazon S3 Direct Uploader

Question

Я ищу библиотеку / инфраструктуру AJAX HTML 5, чтобы пользователи могли загружать файлы непосредственно в Amazon S3. Цель состоит в том, чтобы не загружать вложения на веб-сервер (поскольку веб-сервер блокирует их при передаче в Amazon). Насколько я понимаю, это должно быть возможно с использованием XDomainRequest, но я не могу понять, как.

Я запускаю ruby-on-rails и хотел назначить загруженному файлу временное имя (используя UUID), которое будет отправлено обратно на веб-сервер, чтобы впоследствии файл можно было переименовать и интегрировать с paperclip.

Есть идеи? JQuery может с этим справиться? Flash не вариант для этого проекта. Спасибо!

Edit:

Мне удалось заставить базовую почту работать, но у меня все еще есть проблемы. Я не совсем уверен, какие заголовки требуются или как закодировать необходимые параметры Amazon в запросе (могу ли я поместить их в заголовок запроса?). Вот мой прогресс на данный момент:

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 < XMLHttpFactories.length; i++) {
    try { xhr = XMLHttpFactories[i](); break; } catch (exception) { continue; }
}

$(this).change(function () {

  for (var i = 0; i < 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);
  }

Edit:

После дальнейших обновлений мне удалось получить следующую ошибку:

XMLHttpRequest не может загрузить http://bucket.s3.amazonaws.com/. Происхождение http://local.app есть не разрешено Access-Control-Allow-Origin.

Я загрузил файл crossdomain.xml, который разрешает доступ из домена с подстановочными знаками (*). Не уверен, как продолжить ...

Edit:

После более подробного изучения я начинаю думать, что JavaScript POST может оказаться невозможным для S3. Нужно ли будет публиковать в экземпляре EC2 перед выполнением перевода? Я мог бы защитить микроэкземпляр, но я бы предпочел перейти прямо к S3, если это возможно! Спасибо!

Edit:

Я разместил вопрос на форумах Amazon и не получил ни одного отзыва. Для перекрестных ссылок другой пост можно найти здесь: https://forums.aws.amazon.com/message.jspa?messageID=206650#206650.

Answer 1

Сегодня Amazon объявляет о полной поддержке перекрестного общего доступа к ресурсам (CORS) в Amazon S3. Теперь вы можете легко создавать веб-приложения, использующие JavaScript и HTML5, для взаимодействия с ресурсами в Amazon S3, что позволяет реализовывать перетаскивание HTML5 в Amazon S3, показывать процесс загрузки или обновлять контент.

Answer 2

Вам нужно сделать другую сторону вопроса Access-Control-Allow-Origin header . В вашем случае другой стороной является сервер Amazon S3. Если в этом заголовке не будет указан ваш домен, вы не сможете отправлять к ним какие-либо межсайтовые запросы.

Amazon S3 теперь поддерживает перекрестный общий доступ к ресурсам , и вы можете настроить любой из ваших блоков S3 для междоменного доступа, добавив одно или несколько правил CORS в ваш контейнер. Каждое правило может указывать домен, который должен иметь доступ к вашему сегменту, и набор HTTP-глаголов, которые вы хотите разрешить.

Answer 3

Amazon наконец-то добавил поддержку Cross Source Resource Sharing (CORS), которая позволяет это:

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Answer 4

S3 может размещать HTML-страницы с jquery без проблем. Контейнер становится URL-адресом сервера. Если вы используете такой инструмент, как S3 Bucket Explorer, вы можете одним щелчком получить URL-адрес для любой HTML-страницы в корзине.

Затем вы можете просто использовать команду PUT в XMLHttpRequest для загрузки файлов.

Именно так работает плагин JQuery-HTML5-Upload для Amazon S3 (см. Их выпуск № 12).

Фактически вы можете поэкспериментировать с синтаксисом API REST Amazon S3, просто подключив его к переменным, а затем используя его вместе с методом openH) XMLHttpRequest.

Мир в Мультивселенной.

Answer 5

Это будет означать, что вы должны предоставить свои учетные данные S3 в JavaScript. Вы этого не хотите.

Лучшее решение - использовать скрепку. Да, вы должны сначала загрузить на свой сервер, но, по крайней мере, это безопасно.

Не обращайте внимания, проверьте комментарии.

Answer 6

Есть хороший гем rails s3_drect_upload , который делает из коробки именно то, что вы хотите. Это загрузчик html5 / javascript с поддержкой переименования файлов.

Answer 7

Сам не пробовал, но, похоже, это работает в плагине jquery-html5-upload

http://code.google.com/p/jquery-html5-upload/issues/detail?id=12