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

2017-09-17 17:37:13 +02:00
parent c6dabedb4a
commit 826385f659
25 changed files with 369 additions and 191 deletions
--- a/app/assets/javascripts/application.js
+++ b/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
--- a/app/assets/javascripts/direct_uploads.js.coffee
+++ b/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
--- a/app/assets/javascripts/documentable.js.coffee
+++ b/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
        }
--- a/app/assets/stylesheets/documentable.scss
+++ b/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;
  }

--- a/app/assets/stylesheets/imageable.scss
+++ b/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;
  }

--- a/app/controllers/direct_uploads_controller.rb
+++ b/app/controllers/direct_uploads_controller.rb
@@ -1,34 +1,53 @@
 class DirectUploadsController < ApplicationController
+  include DirectUploadsHelper
+  include ActionView::Helpers::UrlHelper
+  before_action :authenticate_user!

-  def destroy_upload
-    @document = Document.new(cached_attachment: params[:path])
-    @document.set_attachment_from_cached_attachment
-    @document.cached_attachment = nil
-    @document.documentable = @documentable
+  load_and_authorize_resource except: :create
+  skip_authorization_check only: :create

-    if @document.attachment.destroy
-      flash.now[:notice] = t "documents.actions.destroy.notice"
+  helper_method :render_destroy_upload_link
+
+  # It should return cached attachment path or attachment errors
+  def create
+    @direct_upload = DirectUpload.new(direct_upload_params.merge(user: current_user, attachment: params[:attachment]))
+
+    if @direct_upload.valid?
+      @direct_upload.save_attachment
+      @direct_upload.relation.set_cached_attachment_from_attachment(URI(request.url))
+      render json: { cached_attachment: @direct_upload.relation.cached_attachment,
+                     filename: @direct_upload.relation.attachment.original_filename,
+                     destroy_link: render_destroy_upload_link(@direct_upload).html_safe,
+                     attachment_url: @direct_upload.relation.attachment.url,
+                     is_image: Image::ACCEPTED_CONTENT_TYPE.include?(@direct_upload.relation.attachment_content_type)
+                   }
    else
-      flash.now[:alert] = t "documents.actions.destroy.alert"
+      @direct_upload.destroy_attachment
+      render json: { errors: @direct_upload.errors[:attachment].join(", ") },
+             status: 422
    end
-    render :destroy
  end

-  def upload
-    @document = Document.new(document_params.merge(user: current_user))
-    @document.documentable = @documentable
-    @document.valid?
+  def destroy
+    @direct_upload = DirectUpload.new(direct_upload_params.merge(user: current_user) )

-    if @document.valid?
-      @document.attachment.save
-      @document.set_cached_attachment_from_attachment(URI(request.url))
+    @direct_upload.relation.set_attachment_from_cached_attachment
+
+    if @direct_upload.destroy_attachment
+      render json: :ok
    else
-      @document.attachment.destroy
+      render json: :error
    end
  end

  private

+  def direct_upload_params
+    params.require(:direct_upload)
+          .permit(:resource, :resource_type, :resource_id, :resource_relation,
+                  :attachment, :cached_attachment, attachment_attributes: [])
+  end
+
  def set_attachment_container_resource
    @container_resource = params[:resource_type]
  end
--- a/app/helpers/direct_uploads_helper.rb
+++ b/app/helpers/direct_uploads_helper.rb
@@ -0,0 +1,15 @@
+module DirectUploadsHelper
+
+  def render_destroy_upload_link(direct_upload)
+    link_to t('documents.form.delete_button'),
+            direct_upload_destroy_url("direct_upload[resource_type]": direct_upload.resource_type,
+                                      "direct_upload[resource_id]": direct_upload.resource_id,
+                                      "direct_upload[resource_relation]": direct_upload.resource_relation,
+                                      "direct_upload[cached_attachment]": direct_upload.relation.cached_attachment,
+                                      format: :json),
+            method: :delete,
+            remote: true,
+            class: "delete float-right"
+  end
+
+end
--- a/app/helpers/documents_helper.rb
+++ b/app/helpers/documents_helper.rb
@@ -1,5 +1,10 @@
 module DocumentsHelper

+  def document_note(document)
+    t "documents.new.#{document.documentable.class.name.parameterize.underscore}.note",
+      title: document.documentable.title
+  end
+
  def document_attachment_file_name(document)
    document.attachment_file_name
  end
--- a/app/models/abilities/administrator.rb
+++ b/app/models/abilities/administrator.rb
@@ -75,6 +75,7 @@ module Abilities

      can [:create, :destroy], Document
      can [:create, :destroy], Image
+      can [:create, :destroy], DirectUpload
    end
  end
 end
--- a/app/models/abilities/common.rb
+++ b/app/models/abilities/common.rb
@@ -43,6 +43,8 @@ module Abilities
      can [:create, :destroy, :new], Image, imageable: { author_id: user.id }
      can [:new_nested, :upload, :destroy_upload], Image

+      can [:create, :destroy], DirectUpload
+
      unless user.organization?
        can :vote, Debate
        can :vote, Comment
--- a/app/models/direct_upload.rb
+++ b/app/models/direct_upload.rb
@@ -1,27 +1,53 @@
 class DirectUpload
  include ActiveModel::Validations
+  include ActiveModel::Conversion
+  extend ActiveModel::Naming

-  attr_accessor :resource, :resource_type, :resource_id, :resource_relation,
-                :attachment, :cached_attachment
+  attr_accessor :resource, :resource_type, :resource_id,
+                :relation, :resource_relation,
+                :attachment, :cached_attachment, :user

  validates_presence_of :attachment, :resource_type, :resource_relation
  validate :parent_resource_attachment_validations,
           if: -> { attachment.present? && resource_type.present? && resource_relation.present? }

+  def save_attachment
+    @relation.attachment.save
+  end
+
+  def destroy_attachment
+    @relation.attachment.destroy
+  end
+
+  def persisted?
+    false
+  end
+
+  def initialize(attributes = {})
+    attributes.each do |name, value|
+      send("#{name}=", value)
+    end
+
+    if @resource_type.present?
+      @resource = @resource_type.constantize.find_or_initialize_by(id: @resource_id)
+    end
+
+    if @resource.class.reflections[@resource_relation].macro == :has_one
+      @relation = @resource.send("build_#{resource_relation}", attachment: @attachment, cached_attachment: @cached_attachment)
+    else
+      @relation = @resource.send(resource_relation).build(attachment: @attachment, cached_attachment: @cached_attachment)
+    end
+
+    @relation.user = user
+  end
+
+  private
+
  def parent_resource_attachment_validations
-    # Proposal or Budget::Investment
-    resource = resource_type.constantize.find_or_initialize_by(id: resource_id)
+    @relation.valid?

-    # Document or Image
-    relation = if resource.class.reflections[resource_relation].macro == :has_one
-                 resource.send("build_#{resource_relation}", attachment: attachment)
-               else
-                 resource.send(resource_relation).build(attachment: attachment)
-               end
-    relation.valid?
-
-    if relation.errors.has_key? :attachment
-      errors[:attachment] = relation.errors[:attachment]
+    if @relation.errors.has_key? :attachment
+      errors[:attachment] = @relation.errors[:attachment]
    end
  end

--- a/app/views/direct_uploads/_attachment.html.erb
+++ b/app/views/direct_uploads/_attachment.html.erb
--- a/app/views/documents/_form.html.erb
+++ b/app/views/documents/_form.html.erb
@@ -4,14 +4,57 @@
              documentable_id: @document.documentable_id,
              from: params[:from]
             ),
-             html: { multipart: true, class: "documentable"},
-             data: { direct_upload_url: upload_documents_url(documentable_type: @document.documentable_type, documentable_id: @document.documentable_id) } do |f| %>
+             html: { multipart: true, class: "documentable" } do |f| %>

  <%= render 'shared/errors', resource: @document %>

-  <div class="row">
+  <div class="row document direct-upload">

-    <%= render 'plain_fields', document: @document %>
+    <%= f.hidden_field :cached_attachment %>
+
+    <div class="small-12 column">
+      <%= f.text_field :title %>
+    </div>
+
+    <div class="small-12 column actions">
+      <div class="small-6 column action-add attachment-errors">
+        <%= f.label :attachment, t("documents.form.attachment_label"), class: 'button hollow' %>
+        <%= f.file_field :attachment,
+                         accept: accepted_content_types_extensions(@document.documentable.class),
+                         label: false,
+                         class: 'js-document-attachment',
+                         data: {
+                           url: direct_uploads_url("direct_upload[resource_type]": @document.documentable_type,
+                                                   "direct_upload[resource_id]": @document.documentable_id,
+                                                   "direct_upload[resource_relation]": "documents"),
+                           cached_attachment_input_field: "document_cached_attachment",
+                           title_input_field: "document_title"
+                         } %>
+
+      </div>
+      <div class="small-6 column action-remove">
+        <% if @document.cached_attachment.present? %>
+          <%= link_to t('documents.form.delete_button'),
+                      direct_upload_destroy_url("direct_upload[resource_type]": @document.documentable_type,
+                                                "direct_upload[resource_id]": @document.documentable_id,
+                                                "direct_upload[resource_relation]": "documents",
+                                                "direct_upload[cached_attachment]": @document.cached_attachment),
+                      method: :delete,
+                      remote: true,
+                      class: "delete float-right" %>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="small-12 column">
+      <p class="file-name">
+        <%= document_attachment_file_name(@document) %>
+      </p>
+    </div>
+
+    <div class="small-12 column">
+      <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
+    </div>

    <div class="actions small-12 medium-6 large-4 end column">
      <%= f.submit(t("documents.form.submit_button"), class: "button expanded") %>
--- a/app/views/documents/_plain_fields.html.erb
+++ b/app/views/documents/_plain_fields.html.erb
@@ -1,53 +0,0 @@
-<div id="plain_document_fields" class="document">
-
-  <div class="small-12 column">
-    <%= label_tag :document_title, t("activerecord.attributes.document.title") %>
-    <%= text_field_tag :document_title,
-                       document.errors.has_key?(:attachment) ? "" : document.title, 
-                       name: "document[title]",
-                       class: "document-title" %>
-    <% if document.errors.has_key?(:title) %>
-      <small class="error"><%= document.errors[:title].join(", ") %></small>
-    <% end %>
-  </div>
-
-  <div class="small-12 column">
-    <%= hidden_field_tag :cached_attachment, document.cached_attachment, name: "document[cached_attachment]" %>
-    <%= file_field_tag :attachment,
-                     accept: accepted_content_types_extensions(document.documentable.class),
-                     label: false,
-                     class: 'js-document-attachment',
-                     data: {
-                       url: upload_documents_url(documentable_type: document.documentable_type, documentable_id: document.documentable_id),
-                       cached_attachment_input_field: "document_cached_attachment",
-                       multiple: false,
-                       nested_document: false
-                     },
-                     id: "document_attachment",
-                     name: "document[attachment]" %>
-
-    <% if document.cached_attachment.blank? %>
-      <%= label_tag :document_attachment, t("documents.form.attachment_label"), class: 'button hollow' %>
-    <% else %>
-      <%= link_to t('documents.form.delete_button'),
-                  destroy_upload_documents_path(path: document.cached_attachment,
-                                                nested_document: false,
-                                                documentable_type: document.documentable_type,
-                                                documentable_id: document.documentable_id),
-                  method: :delete,
-                  remote: true,
-                  class: "delete float-right" %>
-    <% end %>
-
-    <% if document.errors.has_key?(:attachment) %>
-      <div class="small-12 column source-option-file">
-        <div class="attachment-errors">
-          <small class="error"><%= document_errors_on_attachment(document) %></small>
-        </div>
-      </div>
-    <% end %>
-    <p class="file-name"><%= document_attachment_file_name(document) %></p>
-    <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
-  </div>
-
-</div>
--- a/app/views/documents/new.html.erb
+++ b/app/views/documents/new.html.erb
@@ -3,6 +3,7 @@
  <div class="small-12 medium-9 column">
    <%= back_link_to params[:from] %>
    <h1><%= t("documents.new.title") %></h1>
+    <p><%= document_note(@document) %></p>
    <%= render "documents/form", form_url: documents_url %>
  </div>

--- a/app/views/images/_form.html.erb
+++ b/app/views/images/_form.html.erb
@@ -4,17 +4,63 @@
              imageable_id: @image.imageable_id,
              from: params[:from]
             ),
-             html: { multipart: true, class: "imageable"},
-             data: { direct_upload_url: upload_images_url(imageable_type: @image.imageable_type, imageable_id: @image.imageable_id) } do |f| %>
+             html: { multipart: true, class: "imageable" } do |f| %>

  <%= render 'shared/errors', resource: @image %>

-  <div class="row">
+  <div class="row image direct-upload">

-    <%= render 'plain_fields', image: @image %>
+    <%= f.hidden_field :cached_attachment %>
+
+    <div class="small-12 column">
+      <%= f.text_field :title, placeholder: t("images.new.form.title_placeholder") %>
+    </div>
+
+    <%= render_image(@image, :thumb, false) if @image.attachment.exists? %>
+
+    <div class="small-12 column attachment-actions">
+      <div class="small-6 column action-add attachment-errors">
+        <%= f.label :attachment, t("images.form.attachment_label"), class: 'button hollow' %>
+        <%= f.file_field :attachment,
+                         accept: imageable_accepted_content_types_extensions,
+                         label: false,
+                         class: 'direct_upload_attachment',
+                         data: {
+                           url: direct_uploads_url("direct_upload[resource_type]": @image.imageable_type,
+                                                   "direct_upload[resource_id]": @image.imageable_id,
+                                                   "direct_upload[resource_relation]": "image"),
+                           cached_attachment_input_field: "image_cached_attachment",
+                           title_input_field: "image_title",
+                           multiple: false
+                         } %>
+      </div>
+      <div class="small-6 column action-remove">
+        <% if @image.cached_attachment.present? %>
+          <%= link_to t('images.form.delete_button'),
+                      direct_upload_destroy_url("direct_upload[resource_type]": @image.imageable_type,
+                                                "direct_upload[resource_id]": @image.imageable_id,
+                                                "direct_upload[resource_relation]": "image",
+                                                "direct_upload[cached_attachment]": @image.cached_attachment),
+                      method: :delete,
+                      remote: true,
+                      class: "delete float-right" %>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="small-12 column">
+      <p class="file-name">
+        <%= image_attachment_file_name(@image) %>
+      </p>
+    </div>
+
+    <div class="small-12 column">
+      <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
+    </div>

    <div class="actions small-12 medium-6 large-4 end column">
      <%= f.submit(t("images.form.submit_button"), class: "button expanded") %>
    </div>
+
  </div>
 <% end %>
--- a/app/views/images/_image.html.erb
+++ b/app/views/images/_image.html.erb
@@ -1,19 +1,17 @@
-<div class="row">
-  <div class="small-12 column text-center">
-    <figure>
-      <%= image_tag image.attachment.url(version),
-                    class: image_class(image),
-                    alt: image.title %>
-      <% if show_caption %>
-        <figcaption class="text-right">
-          <em><%= image.title %></em>
-        </figcaption>
-      <% end %>
-    </figure>
-
+<div class="small-12 column text-center image-preview">
+  <figure>
+    <%= image_tag image.attachment.url(version),
+                  class: image_class(image),
+                  alt: image.title %>
    <% if show_caption %>
-      <hr>
+      <figcaption class="text-right">
+        <em><%= image.title %></em>
+      </figcaption>
    <% end %>
+  </figure>
+
+  <% if show_caption %>
+    <hr>
+  <% end %>

-  </div>
 </div>
--- a/app/views/images/_plain_fields.html.erb
+++ b/app/views/images/_plain_fields.html.erb
@@ -1,52 +0,0 @@
-<div id="plain_image_fields" class="image">
-
-  <div class="small-12 column">
-    <%= label_tag :image_title, t("activerecord.attributes.image.title") %>
-    <%= text_field_tag :image_title, image.title, placeholder: t("images.new.form.title_placeholder"), name: "image[title]", class: "image-title" %>
-    <% if image.errors.has_key?(:title) %>
-      <small class="error"><%= image.errors[:title].join(", ") %></small>
-    <% end %>
-  </div>
-
-  <div class="small-12 column">
-    <%= render_image(image, :thumb, false) if image.attachment.exists? %>
-    
-    <%= hidden_field_tag :cached_attachment, image.cached_attachment, name: "image[cached_attachment]" %>
-    <%= file_field_tag :attachment,
-                     accept: imageable_accepted_content_types_extensions,
-                     label: false,
-                     class: 'image_ajax_attachment',
-                     data: {
-                       url: upload_images_url(imageable_type: image.imageable_type, imageable_id: image.imageable_id),
-                       cached_attachment_input_field: "image_cached_attachment",
-                       multiple: false,
-                       nested_image: false
-                     },
-                     id: "image_attachment",
-                     name: "image[attachment]" %>
-
-    <% if image.cached_attachment.blank? %>
-      <%= label_tag :image_attachment, t("images.form.attachment_label"), class: 'button hollow' %>
-    <% else %>
-      <%= link_to t('images.form.delete_button'),
-                  destroy_upload_images_path(path: image.cached_attachment,
-                                                nested_image: false,
-                                                imageable_type: image.imageable_type,
-                                                imageable_id: image.imageable_id),
-                  method: :delete,
-                  remote: true,
-                  class: "delete float-right" %>
-    <% end %>
-
-    <% if image.errors.has_key?(:attachment) %>
-      <div class="small-12 column source-option-file">
-        <div class="attachment-errors">
-          <small class="error"><%= image_errors_on_attachment(image) %></small>
-        </div>
-      </div>
-    <% end %>
-    <p class="file-name"><%= image_attachment_file_name(image) %></p>
-    <div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
-  </div>
-
-</div>