I had a very confusing situation today with a multipart form that was for uploading a picture to a new web service I’m working on.

In Safari the form upload worked. Even in Internet Explorer 6 the form upload worked (after I fixed the dodgy MIME-type that IE passes through for JPG images - image/pjpeg for those interested).

The form I was trying to submit had the multipart attribute set correctly, and also had some javascript to disable the file selection, form submission button, and show a spinner to indicate that something is happening, and they don’t try and submit the file twice if they’re sending in a large image.

My submit tag orginally looked like this (Ruby on Rails)

1

<%= submit_tag 'Upload Photo', :class => "formbutton", :id => "submit-button", :onClick => "$('upload-form').submit();Form.disable('upload-form');Effect.toggle('footnote', 'appear', {duration: 0});Effect.toggle('spinner', 'appear', {duration: 0});" %>

I was very confused as it did work in those other browsers, but not in Firefox.

The key to fixing this was to add return false; to the end of the javascript statement…

1

<%= submit_tag 'Upload Photo', :class => "formbutton", :id => "submit-button", :onClick => "$('upload-form').submit();Form.disable('upload-form');Effect.toggle('footnote', 'appear', {duration: 0});Effect.toggle('spinner', 'appear', {duration: 0});return false;" %>

What I find particularly confusing about this is that everything I read on the “return false;” statement leads me to believe that this form should not be submitted - however - return true does not work (500 Internal Server Error returned). But what the hey - it works.