_form.html.erb

<script id="template-upload" type="text/x-tmpl">
<div id="file-{%=o.unique_id%}" class="upload">
  {%=o.name%}
  <div class="progress"><div class="bar" style="width: 0%"></div></div>
</div>
</script>

      

<%= form_for(@dish, :html => { :multipart => true, :class => "directUpload" }) do |f| %>

<input type="hidden" name="dish[direct_image_url]" id="dish_direct_image_url">

<span id='hideAfter'>
<div id="place-image"></div>
<%= s3_uploader_form class: "s3-uploader", 
                     id: "myS3Uploader" do %>
    <%= file_field_tag :file, multiple: false %>
<% end %>

  <%= f.hidden_field :direct_image_url %>

  <script>
jQuery(function() {
  $(".s3-uploader").S3Uploader();
  
  $('#myS3Uploader').bind("s3_upload_complete", function(e, content) {
    alert('hello');
    alert(content.url);
  });
});
</script>


  <div class="form-group">
      <div id="instaject-outer" style="padding: 10px; display: none;"> <!-- style="display: none;"> -->
        <div id="instaject"></div>
      </div>


<!-- callback_param: "user[avatar_url]", 
                     callback_url: user -->


      <% if session[:access_token].nil? %>
        <a href="/oauth/connect">
            <button class="button btn btn-primary" id="instagram-connect">
                <i class="fa fa-instagram"></i>
                Connect to Instagram
            </button>
        </a>
      <% end %>


    <div class="file-field input-field">
      <input class="file-path form-control" type="text"/>
      <div class="btn">
        <span style="padding-right: 10px">File</span>
        <input id="dish_image" name="dish[image]" type="file" />
      </div>
    </div>



  </div>

  <div class="form-group">



          <span id="spannerbutton">
        <%= tag "input", { "type" => "button", class: "btn btn-success", "value" => "Instagram Upload", "onclick" => "instaModalSingle();" } %> 
      </span>
  </div>
</span>

  <%= f.hidden_field :image_url, :id => "imageURL" %>

  <div class="form-group"> 
    <%= f.label :name %>
    <%= f.text_field :name, class: "form-control" %>
  </div> 
  
  <div class="form-group"> 
    <%= f.label :description %>
    <%= f.text_field :description, class: "form-control" %>
  </div>

  <div class="form-group"> 
    <%= f.label :price %>
    <%= f.number_field :price, class: "form-control" %>
  </div> 

  <div class="actions"> 
    <%= f.submit :class => "btn btn-success" %>
  </div> 

<% end %>

<script>
    $(function() {
        $('.directUpload').find("input:file").each(function(i, elem) {
            var fileInput    = $(elem);
            var form         = $(fileInput.parents('form:first'));
            var submitButton = form.find('input[type="submit"]');
            var progressBar  = $("<div class='bar'></div>");
            var barContainer = $("<div class='progress'></div>").append(progressBar);
            fileInput.after(barContainer);
            fileInput.fileupload({
                fileInput:       fileInput,
                url:             '<%= @s3_direct_post.url %>',
                type:            'POST',
                autoUpload:       true,
                formData:         <%= @s3_direct_post.fields.to_json.html_safe %>,
                paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
                dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
                replaceFileInput: false
            });
        });
    });
</script>