Image validations

app/assets/javascripts/components/uploader.js.coffee

@@ -7,6 +7,11 @@ App.components.uploader = (container) ->
     hideInput: ->
       @container.closest('.field').hide()
 
+    fieldName: ->
+      # <input name="user[avatar]" />  => "avatar"
+      match = @container.attr('name').match(/\[(.*?)\]/)
+      if match.length > 1 then match[1] else null
+
     addUploaderHtml: ->
       uploaderContainer = $("""
         <div class="uploader">
@@ -17,6 +22,7 @@ App.components.uploader = (container) ->
       @container.closest('.field').after uploaderContainer
       @message = uploaderContainer.find('.upload-success')
       @button = uploaderContainer.find('.upload-button')
+      @uploaderContainer = uploaderContainer
 
     bindEvents: ->
       @button.on 'click', (evt) => @container.trigger 'click'
@@ -27,17 +33,32 @@ App.components.uploader = (container) ->
       , 200)
 
     onAdd: (_this, data) ->
+      _this.uploaderContainer.find('.error').remove()
       _this.button.text I18n.uploader.uploading
       _this.button.append "<i class=\"fa fa-spinner fa-spin\"></i>"
       data.submit()
 
+    onFail: (_this, data) ->
+      # get the corresponding error message for the container
+      errors = data.jqXHR.responseJSON.errors
+      err_msg = ( errors[_this.fieldName()] || ['Error'] )[0]
+
+      _this.button.find('i').remove()
+      _this.button.text I18n.uploader.select_image
+      _this.button.after "<span class='error'>#{err_msg}</span>"
+      _this.startPlugin() # restart plugin (kludge for retrying uploads)
+
     startPlugin: ->
       @container.fileupload
+        url:      @url
+        type:     'PATCH'
         dataType: 'json'
         add:      (evt, data) => @onAdd(this, data)
         done:     (evt, data) => @onDone(this)
+        fail:     (evt, data) => @onFail(this, data)
 
     init: ->
+      @url = @container.closest('form').attr('action')
       @hideInput()
       @addUploaderHtml()
       @bindEvents()

app/uploaders/avatar_uploader.rb

@@ -40,7 +40,7 @@ def store_dir
   # Add a white list of extensions which are allowed to be uploaded.
   # For images you might use something like this:
   def extension_white_list
-    %w(jpg jpeg gif png)
+    %w(jpg jpeg png)
   end
 
   # Override the filename of the uploaded files:

config/locales/en/models.yml

@@ -27,3 +27,12 @@ en:
           attributes:
             email:
               invalid: 'invalid e-mail address'
+
+  errors:
+    messages:
+      # Carrierwave messages
+      carrierwave_processing_error: "Cannot resize image."
+      carrierwave_integrity_error: "Not an image."
+      carrierwave_download_error: "Couldn't download image."
+      extension_white_list_error: "You are not allowed to upload %{extension} files, allowed types: %{allowed_types}"
+      extension_black_list_error: "You are not allowed to upload %{extension} files, prohibited types: %{prohibited_types}"

config/locales/pt-BR/models.yml

@@ -29,3 +29,12 @@ pt-BR:
               invalid: 'endereço de e-mail inválido'
             password_confirmation:
               confirmation: 'senhas não coincidem'
+
+  errors:
+    messages:
+      # Carrierwave messages
+      carrierwave_processing_error: "Não foi possível redimensionar a imagem."
+      carrierwave_integrity_error: "Não é uma imagem."
+      carrierwave_download_error: "Não foi possível baixar a imagem."
+      extension_white_list_error: "Você não pode subir arquivos %{extension}. Tipos permitidos: %{allowed_types}"
+      extension_black_list_error: "Você não pode subir arquivos %{extension}. Tipos proibidos: %{prohibited_types}"

spec/javascripts/components/uploader_spec.js.coffee

@@ -21,6 +21,9 @@ describe 'uploader', ->
       @component.hideInput()
       expect($('.field').css 'display').to.be.eq 'none'
 
+    it 'gets the field name', ->
+      expect(@component.fieldName()).to.be.eq 'avatar'
+
     it 'adds the necessary markup', ->
       expect(@component.message).to.be.undefined
       expect(@component.button).to.be.undefined
@@ -52,3 +55,15 @@ describe 'uploader', ->
       spy @component, 'startPlugin', =>
         @component.init()
         expect(@component.startPlugin).to.be.called
+
+    it 'adds error message when fail', ->
+      @component.init()
+      _data = {jqXHR: {responseJSON:{ errors: {avatar: ['Upload error']}}}}
+
+      spy @component, 'startPlugin', =>
+        @component.onFail(@component, _data)
+        errEl = @component.uploaderContainer.find('.error')
+
+        expect(errEl.length).to.be.eq 1
+        expect(errEl.text()).to.be.eq 'Upload error'
+        expect(@component.startPlugin).to.be.called

spec/uploaders/avatar_uploader_spec.rb

@@ -20,7 +20,7 @@
     @uploader.remove!
   end
 
-  it { expect(subject.extension_white_list).to eq ['jpg', 'jpeg', 'gif', 'png'] }
+  it { expect(subject.extension_white_list).to eq ['jpg', 'jpeg', 'png'] }
   it { expect(subject.default_url).to eq '/assets/imgs/avatar-placeholder.png' }
 
   context 'the thumb version' do