Changing Text on File Upload Button (Hack)

Fake-image-upload-button

        <!-- Fake Upload Button assumes we have JQUery -->
        <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
        <!--  Font awesome is optional -->
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <!-- copy these over to profile.scss -->
        <style>
          /* This is a workaround to style the image upload button
           * We googled it extensively and the best "solution" we found
           * was: http://www.quirksmode.org/dom/inputfile.html
           * not ideal but it works
           */
          .image-upload-real {
            display:none;
          }
          .image-upload-fake {
            height: 30px;
            padding-top: 9px;
          }
        </style>

        <!-- Addapted from: http://www.quirksmode.org/dom/inputfile.html -->
        <!-- Fake upload button allows us more css control -->
        <button class="secondary-button fa fa-picture-o image-upload-fake" >Upload profile picture</button>
        <!-- The real image upload button -->
        <input type="file" class="image-upload-real" />

      <!-- paste this script into the main JS file -->
      <script>
        $(".image-upload-fake").click( function (){
          handleFakeImageUpload($(this));
        });

        function handleFakeImageUpload(e) {
          // relies on the "real" input being the next DOM element:
          console.log(e)
          e.next().trigger("click");
          console.log($(this).prev());
          e.next().change(function() {
            var filename = $(this).val()
            console.log("Filename: "+filename);
            if(filename.indexOf("No file") !== -1 || filename.length === 0) {
              e.html("Select a picture");
            } else {
              e.html(filename);
            }
          });
        }
      </script>