Extract ajax upload and destroy_upload actions from images and documents controllers and place them at new controllers to manage direct uploads

app/assets/javascripts/application.js

@@ -64,6 +64,7 @@
 //= require flaggable
 //= require documentable
 //= require imageable
+//= require direct_uploads
 //= require tree_navigator
 //= require custom
 //= require tag_autocomplete

app/assets/javascripts/direct_uploads.js.coffee

@@ -0,0 +1,98 @@
+App.DirectUploads =
+
+  progressBarTemplate: '<div class="progress-bar"><div class="loading-bar uploading"></div></div>'
+
+  buildData: (e, data) ->
+    wrapper = $(e.target).closest('.direct-upload')
+    data.wrapper = wrapper
+    data.preview = $(wrapper).find('.image-preview')
+    data.progressBar = $(wrapper).find('.progress-bar-placeholder').html(App.DirectUploads.progressBarTemplate)
+    data.errorContainer = $(wrapper).find('.attachment-errors')
+    data.fileNameContainer = $(wrapper).find('p.file-name')
+    data.destroyAttachmentLinkContainer = $(wrapper).find('.action-remove')
+    data.addAttachmentLabel = $(wrapper).find('.action-add label')
+    data.cachedAttachmentField = $(wrapper).find("#" + $(e.target).data('cached-attachment-input-field'))
+    data.titleField = $(wrapper).find("#" + $(e.target).data('title-input-field'))
+    $(wrapper).find('.progress-bar-placeholder').css('display', 'block')
+    return data
+
+  remove_cached_attachment: (e, data) ->
+    e.preventDefault()
+    e.stopPropagation()
+    $.ajax
+      type: "POST"
+      url: e.target.href
+      dataType: "json"
+      data: {"_method":"delete"}
+      complete: ->
+         console.log data
+        $(data.cachedAttachmentField).val("")
+        $(data.addAttachmentLabel).show()
+        $(data.destroyAttachmentLinkContainer).find('a.delete').remove()
+        $(data.fileNameContainer).text('')
+        $(data.fileNameContainer).hide()
+        $(data.errorContainer).find('small.error').remove()
+        $(data.progressBar).find('.loading-bar').removeClass('complete errors uploading').css('width', "0px").css('display', "none")
+        $(data.wrapper).find(".image-preview").remove()
+        $(data.preview).html('')
+
+  initialize: ->
+
+    $('.action-remove a.delete').on 'click', (e) ->
+      data = App.DirectUploads.buildData(e, [])
+      App.DirectUploads.remove_cached_attachment(e, data)
+      $(data.wrapper).find('small.error').remove()
+      $(data.wrapper).find('label.error').removeClass('error')
+
+    $('input.direct_upload_attachment[type=file]').fileupload
+
+      paramName: "attachment"
+
+      formData: null
+
+      add: (e, data) ->
+        data = App.DirectUploads.buildData(e, data)
+        data.submit()
+
+      change: (e, data) ->
+        $.each data.files, (index, file) ->
+          $(e.target).closest('.direct-upload').find('p.file-name').text(file.name)
+          $(e.target).closest('.direct-upload').find('p.file-name').show()
+
+      fail: (e, data) ->
+        $(data.cachedAttachmentField).val("")
+        $(data.progressBar).find('.loading-bar').addClass('errors')
+        $(data.errorContainer).find('small.error').remove()
+        $(data.errorContainer).append('<small class="error">' + data.jqXHR.responseJSON.errors + '</small>')
+        $(data.fileNameContainer).text('')
+        $(data.fileNameContainer).hide()
+        $(data.destroyAttachmentLinkContainer).find("a.delete").remove()
+        $(data.addAttachmentLabel).show()
+        $(data.wrapper).find(".image-preview").remove()
+
+      done: (e, data) ->
+        $(data.cachedAttachmentField).val(data.result.cached_attachment)
+        if $(data.titleField).val() == ""
+          $(data.titleField).val(data.result.filename)
+        $(data.progressBar).find('.loading-bar').addClass('complete')
+        $(data.fileNameContainer).text(data.result.filename)
+        $(data.fileNameContainer).show()
+        $(data.errorContainer).find('small.error').remove()
+        $(data.destroyAttachmentLinkContainer).html(data.result.destroy_link)
+        data.destroyAttachmentLinkContainer = $(data.wrapper).find('.action-remove')
+        $(data.addAttachmentLabel).hide()
+        if data.result.is_image
+          image = '<div class="small-12 column text-center image-preview"><figure><img src="' + data.result.attachment_url + '" class="cached-image"/></figure></div>'
+          if $('.image-preview').length > 0
+            $('.image-preview').replaceWith(image)
+          else
+            $(image).insertBefore($(data.wrapper).find(".attachment-actions"))
+
+        $(data.destroyAttachmentLinkContainer).on 'click', (e) ->
+          App.DirectUploads.remove_cached_attachment(e, data)
+
+
+      progress: (e, data) ->
+        progress = parseInt(data.loaded / data.total * 100, 10)
+        $(data.progressBar).find('.loading-bar').css 'width', progress + '%'
+        return

app/assets/javascripts/documentable.js.coffee

@@ -8,7 +8,7 @@ App.Documentable =
 
     $('input.js-document-attachment[type=file]').fileupload
 
-      paramName: "document[attachment]"
+      paramName: "direct_upload[attachment]"
 
       formData: null
 
@@ -20,7 +20,7 @@ App.Documentable =
         data.progressBar = $(wrapper).find('.progress-bar-placeholder').html('<div class="progress-bar"><div class="loading-bar uploading"></div></div>')
         $(wrapper).find('.progress-bar-placeholder').css('display','block')
         data.formData = {
-          "document[title]": $(wrapper).find('input.document-title').val() || data.files[0].name
+          "direct_upload[title]": $(wrapper).find('inputdirect_upload-title').val() || data.files[0].name
           "index": index,
           "nested_document": is_nested_document
         }

app/assets/stylesheets/documentable.scss

@@ -28,7 +28,8 @@
     background-color: $light-gray;
   }
 
-  .js-document-attachment {
+  .js-document-attachment,
+  input.direct_upload_attachment[type=file] {
     display: none;
   }
 

app/assets/stylesheets/imageable.scss

@@ -29,7 +29,8 @@
     background-color: $light-gray;
   }
 
-  input.image_ajax_attachment[type=file]{
+  input.image_ajax_attachment[type=file],
+  input.direct_upload_attachment[type=file] {
     display: none;
   }