Feature/way more styles

.gitignore

@@ -9,3 +9,4 @@ spec/dummy/tmp/*
 spec/dummy/log/*
 spec/dummy/public/uploads/*
 spec/dummy/db/test.sqlite
+spec/dummy/db/development.sqlite

Gemfile

@@ -1,2 +1,4 @@
 source "https://rubygems.org"
 gemspec
+
+gem 'dvl-core', github: 'dobtco/dvl-core'

app/assets/javascripts/pretty_file_input.coffee

@@ -14,13 +14,21 @@
 
       @$form = @$el.closest('form')
       @$input = @$el.find('input')
-      @$filename = @$el.find('.pfi_existing_filename')
-      @$status = @$el.find('.pfi_status')
+      @$filename = @$el.find('.js_pfi_filename')
+      @$status = @$el.find('.js_pfi_status')
+      @$button = @$el.find('.js_pfi_browse')
+      @buttonText = @$button.text()
+      @statusText = @$status.text()
 
-      # If we're not persisted, immediately add the correct input name
-      if [email protected]
+      if @options.persisted
+        @_calculateRemoveParams()
+        @_copyOptionsFromForm()
+      else
         @$input.attr('name', @options.name)
 
+      @_bindEvents()
+
+    _calculateRemoveParams: ->
       removeKey = if @options.name.match(/\[/)
         i = @options.name.lastIndexOf('[')
         "#{@options.name.substring(0, i)}[remove_#{@options.name.substring(i + 1, @options.name.length)}"
@@ -30,26 +38,33 @@
       @removeParams = {}
       @removeParams[removeKey] = true
 
+    _copyOptionsFromForm: ->
       @options.action ||= @$form.attr('action')
       @options.method ||= @$form.find('[name=_method]').val() || @$form.attr('method')
 
-      @_bindEvents()
-
     remove: ->
+      @$status.text @statusText
+
       if @options.persisted
         @_ajaxRemove()
       else
         @$input.val('')
 
-      @$el.removeClass('is_uploaded')
+      @_toggleState()
+
+    _toggleState: ->
+      $('.js_pfi_toggle').toggle()
 
     _baseParams: ->
-      $.extend { pretty_file_input: true }, @options.additionalParams
+      $.extend {
+        pretty_file_input: true
+        _method: @options.method
+      }, @options.additionalParams
 
     _ajaxRemove: ->
       $.ajax
         url: @options.action
-        type: @options.method
+        type: 'POST'
         dataType: 'json'
         data: $.extend @_baseParams(), @removeParams
 
@@ -60,49 +75,66 @@
         dataType: 'json'
         data: @_baseParams()
         uploadProgress: (_, __, ___, percentComplete) =>
-          @$status.text(
+          @$button.text(
             if percentComplete == 100
-              'Finishing'
+              'Finishing...'
             else
               "Uploading (#{percentComplete}%)"
           )
         complete: =>
-          @$input.show()
           $tmpForm.remove()
         success: $.proxy(@_uploadSuccess, @)
         error: $.proxy(@_uploadError, @)
 
     _createTemporaryForm: ->
-      form = $("""
+      $form = $("""
         <form action='#{@options.action}' method='post' style='display: inline;'>
           <input type='hidden' name='_method' value='#{@options.method}' />
         </form>
       """)
 
       $oldInput = @$input
-      @$input = $oldInput.clone().hide().val('').insertBefore($oldInput)
+      @$input = $oldInput.clone().val('').insertBefore($oldInput)
       @_bindInputChange()
-      $oldInput.appendTo(form)
+      $oldInput.appendTo($form)
 
       # We only add the name immediately before uploading because we
       # don't want to send the input value during submission of an
       # outer form.
       $oldInput.attr('name', @options.name)
 
-      form.insertBefore(@$input)
+      $form.insertBefore(@$input)
 
-      form
+      $form
 
     _uploadSuccess: (data) ->
       if data?.additionalParams?
         @options.additionalParams = data.additionalParams
 
-      @$status.text('')
-      @$el.addClass('is_uploaded')
+      @_resetButton()
+      @_toggleState()
+
+    _resetButton: ->
+      @$button.removeClass('disabled')
+      @$button.text @buttonText
+
+    _uploadError: (xhr) ->
+      @_resetButton()
+      @_flashError(
+        if (err = xhr.responseJSON?.error)
+          "Error: #{err}"
+        else
+          'Whoops! An error occurred.'
+      )
+
+    _flashError: (msg) ->
+      @$status.text msg
+      @$status.addClass 'is_error'
 
-    _uploadError: ->
-      @$status.text 'Error'
-      setTimeout ( => @$status.text('') ), 2000
+      setTimeout =>
+        @$status.removeClass 'is_error'
+        @$status.text @statusText
+      , 2500
 
     _eventToFilename: (e) ->
       if e.target.files?
@@ -114,13 +146,14 @@
       @$filename.text @_eventToFilename(e)
 
       if @options.persisted
-        @$status.text 'Uploading...'
+        @$button.addClass('disabled')
+        @$button.text 'Uploading...'
         @_ajaxUpload()
       else
         @_uploadSuccess()
 
     _bindEvents: ->
-      @$el.on 'click', '[data-pfi-remove]', $.proxy(@remove, @)
+      @$el.on 'click', '.js_pfi_remove', $.proxy(@remove, @)
       @_bindInputChange()
 
     # FF6 doesn't bubble the 'change' event, so we need to bind

app/assets/stylesheets/pretty_file_input.scss

@@ -1,19 +1,60 @@
-// A more functional file input
-.pfi {
+.pfi_file_wrapper {
+  width: 100%;
+  max-width: 400px;
+  position: relative;
+  display: inline-block;
+  height: $inputHeight;
+
+  // Position the items absolutely
+  input, .pfi_input {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  // Hide the input via opacity
   input {
-    display: inline;
+    opacity: 0;
+    height: $inputHeight;
   }
-}
 
-.pfi_uploaded{
-  display: none;
-}
-
-.is_uploaded {
-  .pfi_uploaded {
+  .pfi_input {
+    user-select: none;
     display: block;
+
+    span, a {
+      display: inline-block;
+      vertical-align: top;
+      height: $inputHeight;
+    }
+
+    :first-child {
+      font-size: 1rem;
+      width: 65%;
+      padding: 0.3rem 0.5rem;
+      border: 1px solid $lightGray;
+      border-right: 0;
+      color: $darkGray;
+      border-top-left-radius: $radius;
+      border-bottom-left-radius: $radius;
+      @include ellipses;
+
+      &.is_error {
+        border-color: $errorColor;
+      }
+    }
+
+    :last-child {
+      width: 35%;
+      border: 0; // Fix alignment
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      line-height: normal;
+    }
   }
-  .pfi_not_uploaded {
-    display: none;
-  }
+}
+
+// Override label weight
+label.pfi_file_wrapper {
+  font-weight: $weightNormal;
 }

lib/pretty_file_input/component.rb

@@ -10,7 +10,7 @@ class PrettyFileInput::Component < Erector::Widget
 
   def content
     div(
-      class: "pfi cf #{@filename ? 'is_uploaded' : ''}",
+      class: 'pfi cf',
       'data-pfi' => {
         name: @name,
         persisted: @persisted,
@@ -19,14 +19,18 @@ def content
         additionalParams: @additional_params
       }.to_json
     ) {
-      div.pfi_uploaded {
-        span.pfi_existing_filename @filename
-        text ' '
-        a.button.mini.info 'Remove', 'data-pfi-remove' => true
+      div.js_pfi_toggle.pfi_file_wrapper(style: @filename ? nil : 'display:none;') {
+        span.pfi_input {
+          span.js_pfi_filename @filename
+          a.button.info.js_pfi_remove 'Remove'
+        }
       }
-      div.pfi_not_uploaded {
+      label.js_pfi_toggle.pfi_file_wrapper(style: @filename ? 'display:none;' : nil) {
         input type: 'file'
-        span.pfi_status
+        span.pfi_input {
+          span.js_pfi_filename.js_pfi_status 'Choose a file...'
+          span.button.info.js_pfi_browse 'Browse'
+        }
       }
     }
   end

pretty_file_input.gemspec

@@ -20,11 +20,14 @@ Gem::Specification.new do |s|
   s.add_dependency 'erector-rails4'
   s.add_dependency 'sass'
 
+  s.add_development_dependency 'autoprefixer-rails', '5.1.7.1'
   s.add_development_dependency 'capybara', '2.4.4'
   s.add_development_dependency 'carrierwave'
+  s.add_development_dependency 'dvl-core'
   s.add_development_dependency 'rails', '4.1.9'
   s.add_development_dependency 'rspec-rails', '3.1.0'
   s.add_development_dependency 'selenium-webdriver', '2.45.0'
   s.add_development_dependency 'simple_form', '3.1.0'
   s.add_development_dependency 'sqlite3', '1.3.9'
+  s.add_development_dependency 'thin', '1.6.3'
 end

script/bootstrap

@@ -0,0 +1,6 @@
+#! /bin/bash
+
+bundle install
+cd spec/dummy
+bundle exec rake db:create db:migrate
+cd ../../

script/server

@@ -0,0 +1,3 @@
+#! /bin/bash
+
+bundle exec thin start --chdir spec/dummy --port 9393

spec/dummy/app/assets/stylesheets/application.css.scss

@@ -0,0 +1,12 @@
+@import 'dvl/app';
+@import 'pretty_file_input';
+
+body {
+  background: #ccc;
+}
+
+.container {
+  margin: 50px;
+  padding: 50px;
+  background: white;
+}

spec/dummy/app/controllers/users_controller.rb

@@ -1,6 +1,9 @@
 class UsersController < ActionController::Base
   layout 'application'
 
+  before_action :error_hack, only: [:update]
+  before_action :loading_hack, only: [:update]
+
   def new
     @user = User.new
   end
@@ -18,6 +21,10 @@ def update
     @user = User.find(params[:id])
     @user.update(user_params)
 
+    if params[:pretty_file_input]
+      request.format = :json
+    end
+
     respond_to do |format|
       format.json { render json: { ok: true } }
       format.html { redirect_to edit_user_path }
@@ -27,6 +34,31 @@ def update
   private
 
   def user_params
-    params.require(:user).permit!
+    if params[:user]
+      params.require(:user).permit!
+    else
+      {}
+    end
+  end
+
+  def error_hack
+    if user_params[:avatar]
+      if user_params[:avatar].original_filename.match('unknownerror')
+        head :bad_request
+      elsif user_params[:avatar].original_filename.match('error')
+        render(
+          json: { error: 'This is a server-generated error message.' },
+          status: :bad_request
+        )
+      end
+    end
+  end
+
+  def loading_hack
+    if user_params[:avatar]
+      if user_params[:avatar].original_filename.match('loading')
+        sleep 3
+      end
+    end
   end
 end

spec/dummy/app/views/layouts/application.html.erb

@@ -8,8 +8,8 @@
   <%= csrf_meta_tags %>
 </head>
 <body>
-
+<div class='container'>
 <%= yield %>
-
+</div>
 </body>
 </html>