Cannot upload photo using Transloadit in Rails 4

Question

I followed the tutorial on the Transloadit Rails GitHub page but can't get the form to submit without getting an alert: Could not find input[name=params] in your form. After I click "ok", Transloadit quickly throws INVALID_FORM_DATA: bad form data, cannot parse and the data never hits my server.

My app is using Rails 4.1.4 and jquery-rails 2.1.4.

Here's my form:

= form_for @profile, url: community_add_photo_path(@profile), html: {id: 'photo_form'} do |f|
  = render 'shared/error_messages', object: f.object
  = transloadit :profile_photo
  = hidden_field_tag 'transloadit_template', 'profile_photo'

  %table.list
    %tr
      %td.faded.label Photo Filename
      %td= f.file_field :photo, required: true
    %tr
      %td
      %td= f.submit 'Upload'

= transloadit_jquerify :photo_form, wait: true

And my transloadit.yml file:

development:
  jquery_sdk_version: 'latest'
  auth:
    key:      'key'
    secret:   'secret'
    duration: 1800 # 30 minute validity period for signed upload forms

  templates:
    profile_photo:
      steps:
        resize:
          height: 256
          resize_strategy: 'fillcrop'
          robot: '/image/resize'
          width: 256
        store:
          bucket: 'bucket-name'
          key: 'key'
          path: 'temp/${assembly.id}/${file.name}'
          robot: '/s3/store'
          secret: 'secret'

Any suggestions? Thanks!

Answer 1

The problem is you're not actually posting the correct form data to the API so that it can resolve correctly.

https://transloadit.com/docs/api/response-codes/

gives you: NO_PARAMS_FIELD No params field was given.

Makes perfect sense because you're not passing the params field as well to the API, which you use when you use transloadit's jquery methods

params: {
 "startdate":"2014-12-02", 
 "endate":"2014-12-03",
 "auth":{ 
   "expires": "2014/12/27 16:53:14+00:00", 
   "key": "yourKeyValue"
  }
}
&signature=yourUniqueSignature

So, something is wrong in how the parameters are created to send to the API for transloadit to work.

Answer 2

I assume you have params decoder in the controller. This is what I have and it works but now going to use jquery because I don't have control over whats going on.

        = bootstrap_form_for apr, :remote=> true,   html: { :id => "showapr#{apr.id}" , "data-type" => :json,    class: 'form-horizontal' } do |f|
            = hidden_field_tag :eventid, apr.event.id
            = transloadit :video_encode
            .fileupload.fileupload-new.pull-left{"data-provides" => "fileupload", style: "padding-right: 5px;"}  
                .fileupload-preview.thumbnail{:style => "width: 140px; height: 140px;"}
                    - if apr.upload.present?
                        - if apr.upload["thumbs"].present?
                            %img{ :src => apr.upload["thumbs"][0], :style => "width: 140px;height: 140px;"}
                    -else
                        %img{"data-src" => "holder.js/140x140/text:Lorem ipsum/social", :src => "", :style => "width: 140px;height: 140px;"}/
                - if apr.event.app.check_user_failed == false &&  (apr.event.start_time.day == Time.zone.now.day)
                    %div
                        %span.btn.btn-default.btn-file
                            %span.fileupload-new Select image
                            =f.file_field "upload#{apr.id}" , accept: 'video/flv,video/avi,video/mov,video/mp4,video/mpg,video/wmv,video/3gp,video/asf,video/rm,video/swf',  :data => {:max_file_size => 30.megabytes}
                    = transloadit_jquerify "showapr#{apr.id}", :wait => true, :modal=>true,  :triggerUploadOnFileSelection=> true