DG DC form autosubmits on file field change

features/step_definitions/trumpeter_steps.rb

@@ -43,7 +43,6 @@ end
 When /^I upload a fixture picture with filename "([^"]*)"$/ do |file_name|
   within ".new_photo" do
     attach_file "photo[user_file]", Rails.root.join("spec", "fixtures", file_name)
-    click_button :submit
   end
 
   @image_source = find(".photos img")["src"]

public/javascripts/app/forms/picture_form.js

@@ -2,7 +2,8 @@ app.forms.Picture = app.forms.Base.extend({
   templateName : "picture-form",
 
   events : {
-    'ajax:complete .new_photo' : "photoUploaded"
+    'ajax:complete .new_photo' : "photoUploaded",
+    "change input[name='photo[user_file]']" : "submitForm"
   },
 
   initialize : function() {
@@ -10,6 +11,17 @@ app.forms.Picture = app.forms.Base.extend({
     this.photos.bind("add", this.render, this)
   },
 
+  postRenderTemplate : function(){
+    this.$("input[name=authenticity_token]").val($("meta[name=csrf-token]").attr("content"))
+    this.$("input[name=photo_ids]").val(this.photos.pluck("id"))
+    this.renderPhotos();
+  },
+
+  submitForm : function (){
+    console.log("meow")
+    this.$("form").submit();
+  },
+
   photoUploaded : function(evt, xhr) {
     resp = JSON.parse(xhr.responseText)
     if(resp.success) {
@@ -19,12 +31,6 @@ app.forms.Picture = app.forms.Base.extend({
     }
   },
 
-  postRenderTemplate : function(){
-    this.$("input[name=authenticity_token]").val($("meta[name=csrf-token]").attr("content"))
-    this.$("input[name=photo_ids]").val(this.photos.pluck("id"))
-    this.renderPhotos();
-  },
-
   renderPhotos : function(){
     var photoContainer = this.$(".photos")
     this.photos.each(function(photo){

public/javascripts/app/templates/picture-form.handlebars

@@ -3,7 +3,6 @@
     <div style="margin:0;padding:0;display:inline">
         <input name="utf8" type="hidden" value="✓"/>
     </div>
-    <div class="photos"></div>
     <input name="photo[user_file]" type="file"/>
-    <input name="commit" type="submit" class="btn" value="Create Photo"/>
+    <div class="photos"></div>
 </form>

public/stylesheets/sass/new-templates.scss

@@ -778,3 +778,9 @@ text-rendering: optimizelegibility;
     display : inline-block;
   }
 }
+
+.new_photo .photo{
+  display: inline;
+  max-width: 200px;
+  max-height: 200px;
+}

spec/javascripts/app/forms/picture_form_spec.js

@@ -6,11 +6,25 @@ describe("app.forms.Picture", function(){
     }).prependTo("head")
 
     this.form = new app.forms.Picture().render()
-  })
+  });
 
   it("sets the authenticity token from the meta tag", function(){
     expect(this.form.$("input[name='authenticity_token']").val()).toBe("supersecrettokenlol")
-  })
+  });
+
+  describe("selecting a photo", function(){
+    it("submits the form", function(){
+      var submitSpy = jasmine.createSpy();
+
+      this.form.$("form").submit(function(event){
+        event.preventDefault();
+        submitSpy();
+      });
+
+      this.form.$("input[name='photo[user_file]']").change()
+      expect(submitSpy).toHaveBeenCalled();
+    })
+  });
 
   describe("when a photo is suceessfully submitted", function(){
     beforeEach(function(){