Ruby on Rails bezpośrednie AWS S3 Upload z JqueryFileUpload

głosy
1

Chcę zbudować prosty Upload File system do mojej strony internetowej (tylko będę dostępu i przesyłania) do przesłania mojego portfela stronę. Moja strona internetowa jest na Ruby on Rails, którego gospodarzem na Heroku.

Więc ja po Heroku Tutorial przesyłanie zdjęć do S3. Używa aws-sdkgem Po wykonaniu przez samouczek, gdy próbuję załadować prosty plik .png, otrzymałem następujący błąd.

Bad Request 400: Bucket POST must contain a field named 'key'.  If it is specified, please check the order of the fields.

PortfolioController

 def new
    @s3_direct_post = S3_BUCKET.presigned_post(key: ${filename}, success_action_status: 201, acl: :public_read)
    @portfolio = Portfolio.new()
  end

Sprawdzanie javascript formDatawartości w widoku:

...
fileInput.fileupload({
                formData:       '<%[email protected]_direct_post.fields.to_json.html_safe %>',
                fileInput:      fileInput,
                url:            '<%[email protected]_direct_post.url%>',
                type:           'POST',
                autoUpload:     true,
                paramName:      'file',
                dataType:       'XML',
                replaceFileInput: false,

...

daje:

{
AWSAccessKeyId=>my-access-key,
key=>${filename},
policy=> long-string,
signature=>randomg-signature-string, 
success_action_status=>201,
acl=>public-read
}

Próbowałem dodanie do zsynchronizować terminy jak pokazano na /config/initializers/aws.rb:

AWS.config(access_key_id:     ENV['AWS_ACCESS_KEY_ID'],
           secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'])

AWS::S3.const_set('DEFAULT_HOST', s3-ap-southeast-1.amazonaws.com)

S3_BUCKET = AWS::S3.new.buckets[ENV['S3_BUCKET']]

Po patrząc przez Google i Stackoverflow, wydaje się, że może być Jquery odbudowy danych formularza, stąd brudząc się kolejność wartości POST.

Problem polega na tym, że jestem stosunkowo nowy w Ruby on Rails i JavaScript, więc nie jestem pewien, jak go o to ustalenie.

Wszelkie porady są mile widziane. Dzięki!

Utwórz 29/01/2015 o 09:26
użytkownik
W innych językach...                            


3 odpowiedzi

głosy
0

Postanowiłem śledzić spinacza Heroku Tutorial zamiast, i był z powodzeniem w stanie przesłać do S3.

Nadzieję, że to pomoże ktoś z tym samym problemem.

Odpowiedział 01/02/2015 o 07:12
źródło użytkownik

głosy
1

Niedawno miałem do czynienia z tym samym numerze i jest to rozwiązanie:

Trzeba tylko zmienić

formData:  '<%[email protected]_direct_post.fields.to_json.html_safe %>'

Do tego :

formData:  <%[email protected]_direct_post.fields.to_json.html_safe %>

Ponieważ @s3_direct_post.fields.to_json.html_safedaje coś takiego:

{"key":"value", "key":"value", "key":"value"}

i owijając że między ' 'uczyni to tak:

'{"key":"value", "key":"value", "key":"value"}'

Który nie jest prawidłowym JSON

Innym rozwiązaniem (ale nie efektywne, ponieważ pierwszy jest bardziej elegancki myślę)

Patrząc na jquery upload plików dokumentacji jest napisane:

Domyślnie plugin nazywa metoda serializeArray jQuery w formularzu wysyłania zebrać dodatkowe dane formularzy dla wszystkich pól wejściowych (w tym ukrytych pól)

Więc można dodać te pola do formularza ( przed wejściowym pliku ) tak:

<% @s3_direct_post.fields.map do |name, value| %>
    <input type="hidden" name="<%= name %>" value="<%= value %>" />
<% end %>

<%= f.file_field :avatar_url%>
...
...

Ale należy pamiętać, ponieważ jako dokumentacja wam będzie zebrać wszystkich pól w tym ukrytych pól (w ty Szyny app istnieją pewne dodatkowe ukryte pola jak utf8 i authenticity_token), który daje błąd, ponieważ Amazon S3 nie zaakceptuje tego!

To jest trochę Hack zrobiłem do rozwiązania, że:

Złożyć oddzielny formularz niż początkowej postaci i przypisać identyfikator do niego , w moim przypadku jest id pól-for-s3

<form id="fields-for-s3">
    <% @s3_direct_post.fields.map do |name, value| %>
        <input type="hidden" name="<%= name %>" value="<%= value %>" />
    <% end %>
</form>
<%= form_for @user, ..... %>
    ....
<% end %>

Następnie jQuery użyciu serializeArray () sposobu w postaci (z określonym ID), w celu utworzenia obiektu formData ręcznie tak:

formData: $('form#fields-for-s3').serializeArray()

Mam nadzieję, że to pomoże.

Odpowiedział 25/07/2015 o 19:56
źródło użytkownik

głosy
0

Wpadłem na ten sam problem: Można również zadzwonić JSON.parse (formdata); Z javascript.

Odpowiedział 07/08/2016 o 13:52
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more