Dynamic attachment uploads

CHANGELOG.md

@@ -12,6 +12,19 @@ In the next version (v0.28.0) it will be fully removed from the database.
 
 ### Added
 
+#### Dynamic attachment uploads
+PR [\#8681] https://github.com/decidim/decidim/pull/8681 Changes the way file uploads work in Decidim. Files are now dynamically uploaded inside the modal so we can give the user immediate feedback on validation. There are now two different types of file fields: titled and untitled. Titled file fields related to ```Decidim::Attachment``` internally.
+
+**To update your module** you probably have to update forms and commands related to upload field (also views should be updated in case of titled attachments). After successful a upload and submitting a form, request params should contain signed_id of [ActiveStorage::Blob](https://api.rubyonrails.org/classes/ActiveStorage/Blob.html) which you need to find the blob at the backend.
+
+To update view with titled file field see example: [edit_form_fields.html.erb](https://github.com/decidim/decidim/pull/8681/files#diff-17a22480fdfa3d439edcb26eb0a1a52bed5521d61ba36e0cc6ca83e838f03e9b)
+
+To update untitled form example: [import_form.rb](https://github.com/decidim/decidim/pull/8681/files#diff-5ce71b5873906c6f8919f4bc1f8c330bd97e8757760705a66c789f375eb743c1)
+
+To update untitled command example: [update_account.rb](https://github.com/decidim/decidim/pull/8681/files#diff-ed1274f76cd0ac1d5b223648dcdae670c2127c7dffa0d38540c1536a86f36abb)
+
+[Learn more about direct uploads](https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-uploads)
+
 #### Moderated content can now be removed from search index
 PR [\#8811](https://github.com/decidim/decidim/pull/8811) is addressing an issue when the moderated resources are not removed from the general search index.
 

decidim-admin/app/commands/decidim/admin/create_attachment.rb

@@ -47,7 +47,7 @@ def build_attachment
           weight: form.weight,
           attachment_collection: form.attachment_collection,
           file: form.file, # Define attached_to before this
-          content_type: form.file.content_type
+          content_type: blob(form.file).content_type
         )
       end
 
@@ -61,6 +61,10 @@ def notify_followers
           followers: @attachment.attached_to.followers
         )
       end
+
+      def blob(signed_id)
+        ActiveStorage::Blob.find_signed(signed_id)
+      end
     end
   end
 end

decidim-admin/app/commands/decidim/admin/process_participatory_space_private_user_import_csv.rb

@@ -5,6 +5,8 @@
 module Decidim
   module Admin
     class ProcessParticipatorySpacePrivateUserImportCsv < Decidim::Command
+      include Decidim::HasBlobFile
+
       # Public: Initializes the command.
       #
       # form - the form object containing the uploaded file
@@ -32,7 +34,7 @@ def call
       private
 
       def process_csv
-        CSV.foreach(@form.file.path, encoding: "BOM|UTF-8") do |email, user_name|
+        CSV.foreach(blob_path, encoding: "BOM|UTF-8") do |email, user_name|
           ImportParticipatorySpacePrivateUserCsvJob.perform_later(email, user_name, @private_users_to, @current_user) if email.present? && user_name.present?
         end
       end

decidim-admin/app/commands/decidim/admin/process_user_group_verification_csv.rb

@@ -7,6 +7,8 @@ module Admin
     # A command with all the business logic when processing the CSV to verify
     # user groups.
     class ProcessUserGroupVerificationCsv < Decidim::Command
+      include Decidim::HasBlobFile
+
       # Public: Initializes the command.
       #
       # form - the form object containing the uploaded file
@@ -33,7 +35,7 @@ def process_csv
         verifier = @form.current_user
         organization = @form.current_organization
 
-        CSV.foreach(@form.file.path) do |row|
+        CSV.foreach(blob_path) do |row|
           email = row[0]
           VerifyUserGroupFromCsvJob.perform_later(email, verifier, organization) if email.present?
         end

decidim-admin/app/forms/decidim/admin/import_form.rb

@@ -50,26 +50,30 @@ def verify_import
       end
 
       def file_path
-        file&.path
+        ActiveStorage::Blob.service.path_for(blob.key) if blob.respond_to? :key
       end
 
       def mime_type
-        file&.content_type
+        blob&.content_type
       end
 
       def creator_class
         manifest.creator
       end
 
-      def importer_for(filepath, mime_type)
+      def importer_for(path, mime_type)
         Import::ImporterFactory.build(
-          filepath,
+          path,
           mime_type,
           context: importer_context,
           creator: creator_class
         )
       end
 
+      def blob
+        @blob ||= ActiveStorage::Blob.find_signed(file) if file.presence.is_a?(String)
+      end
+
       protected
 
       def accepted_mime_type?

decidim-admin/app/forms/decidim/admin/participatory_space_private_user_csv_import_form.rb

@@ -8,6 +8,7 @@ module Admin
     #
     class ParticipatorySpacePrivateUserCsvImportForm < Form
       include Decidim::HasUploadValidations
+      include Decidim::HasBlobFile
 
       attribute :file
       attribute :user_name, String
@@ -19,7 +20,7 @@ class ParticipatorySpacePrivateUserCsvImportForm < Form
       def validate_csv
         return if file.blank?
 
-        CSV.foreach(file.path) do |_email, user_name|
+        CSV.foreach(blob_path) do |_email, user_name|
           errors.add(:user_name, :invalid) unless user_name.match?(UserBaseEntity::REGEXP_NAME)
         end
       end

decidim-admin/app/packs/entrypoints/decidim_admin.js

@@ -33,6 +33,7 @@ import "src/decidim/ajax_modals"
 import "src/decidim/admin/officializations"
 import "src/decidim/session_timeouter"
 import "src/decidim/slug_form"
+import "src/decidim/direct_uploads/upload_field"
 import "src/decidim/admin/admin_autocomplete"
 
 // CSS

decidim-admin/app/packs/stylesheets/decidim/admin/modules/_modules.scss

@@ -32,6 +32,7 @@
 @import "stylesheets/decidim/admin/modules/loading-spinner";
 @import "stylesheets/decidim/admin/modules/import_result";
 @import "stylesheets/decidim/admin/modules/reveal";
+@import "stylesheets/decidim/admin/modules/upload_modal";
 
 // mentions__container
 @import "stylesheets/decidim/modules/tags";

decidim-admin/app/packs/stylesheets/decidim/admin/modules/_upload_modal.scss

@@ -0,0 +1,42 @@
+@import "stylesheets/decidim/modules/upload_modal";
+
+.upload-modal{
+  button{
+    cursor: pointer;
+  }
+
+  .upload-items{
+    .upload-item-first-row{
+      display: flex;
+
+      .file-name-span{
+        flex: 4 1 0;
+      }
+
+      .title-container{
+        flex: 3.5 1 0;
+      }
+    }
+
+    .upload-item-second-row{
+      display: flex;
+
+      .progress-bar-wrapper{
+        flex: 4 1 0;
+        margin-right: 1rem;
+
+        .progress-bar-border{
+          border: 1px solid map-get($foundation-palette, primary);
+
+          .progress-bar{
+            background-color: map-get($foundation-palette, primary);
+          }
+        }
+      }
+
+      .remove-upload-item{
+        flex: 1 1 0;
+      }
+    }
+  }
+}

decidim-admin/app/views/decidim/admin/shared/_gallery.html.erb

@@ -15,7 +15,12 @@
     <% end %>
 
     <div class="row column">
-      <%= form.file_field :add_photos, multiple: true, label: t(".add_images") %>
+      <%= form.attachment :photos,
+        multiple: true,
+        label: t(".add_images"),
+        button_label: t(".add_images"),
+        button_edit_label: t(".edit_images"),
+        help_i18n_scope: "decidim.forms.file_help.image" %>
     </div>
   </fieldset>
 </div>

decidim-admin/config/locales/en.yml

@@ -902,6 +902,7 @@ en:
         gallery:
           add_images: Add images
           delete_image: Delete Image
+          edit_images: Edit images
           gallery_legend: Add an image gallery (Optional)
       static_page_topics:
         create:

decidim-admin/lib/decidim/admin/test/manage_attachments_examples.rb

@@ -48,8 +48,11 @@
           es: "Este documento contiene información importante",
           ca: "Aquest document conté informació important"
         )
+      end
+
+      dynamically_attach_file(:attachment_file, Decidim::Dev.asset("Exampledocument.pdf"))
 
-        attach_file :attachment_file, Decidim::Dev.asset("Exampledocument.pdf")
+      within ".new_attachment" do
         find("*[type=submit]").click
       end
 
@@ -81,7 +84,11 @@
         )
 
         select translated(attachment_collection.name, locale: :en), from: "attachment_attachment_collection_id"
-        attach_file :attachment_file, Decidim::Dev.asset("Exampledocument.pdf")
+      end
+
+      dynamically_attach_file(:attachment_file, Decidim::Dev.asset("Exampledocument.pdf"))
+
+      within ".new_attachment" do
         find("*[type=submit]").click
       end
 

decidim-admin/spec/commands/decidim/admin/create_attachment_spec.rb

@@ -24,12 +24,7 @@ module Decidim::Admin
         weight: 0
       )
     end
-    let(:file) do
-      Rack::Test::UploadedFile.new(
-        Decidim::Dev.test_file("city.jpeg", "image/jpeg"),
-        "image/jpeg"
-      )
-    end
+    let(:file) { upload_test_file(Decidim::Dev.test_file("city.jpeg", "image/jpeg")) }
     let(:attached_to) { create(:participatory_process) }
 
     describe "when valid" do

decidim-admin/spec/commands/decidim/admin/create_import_spec.rb

@@ -10,7 +10,7 @@ module Decidim::Admin
     let(:organization) { create(:organization) }
     let(:participatory_space) { create(:participatory_process, organization: organization) }
     let!(:component) { create(:dummy_component, organization: organization) }
-    let(:file) { Decidim::Dev.test_file("verify_user_groups.csv", "text/csv") }
+    let(:file) { upload_test_file(Decidim::Dev.test_file("verify_user_groups.csv", "text/csv")) }
 
     let(:form) do
       Decidim::Admin::ImportForm.from_params(

decidim-admin/spec/commands/decidim/admin/process_participatory_space_private_user_import_csv_spec.rb

@@ -9,7 +9,7 @@ module Decidim::Admin
     let(:current_user) { create(:user, :admin, organization: organization) }
     let(:organization) { create(:organization) }
     let(:private_users_to) { create :participatory_process, organization: organization }
-    let(:file) { File.new Decidim::Dev.asset("import_participatory_space_private_users.csv") }
+    let(:file) { upload_test_file(Decidim::Dev.test_file("import_participatory_space_private_users.csv", "text/csv")) }
     let(:validity) { true }
 
     let(:form) do
@@ -37,7 +37,7 @@ module Decidim::Admin
     end
 
     context "when the CSV file has BOM" do
-      let(:file) { File.new Decidim::Dev.asset("import_participatory_space_private_users_with_bom.csv") }
+      let(:file) { upload_test_file(Decidim::Dev.test_file("import_participatory_space_private_users_with_bom.csv", "text/csv")) }
       let(:email) { "my_user@example.org" }
 
       it "broadcasts ok" do

decidim-admin/spec/commands/decidim/admin/process_user_group_verification_csv_spec.rb

@@ -8,7 +8,7 @@ module Decidim::Admin
 
     let(:user) { create(:user, :admin, organization: organization) }
     let(:organization) { create(:organization) }
-    let(:file) { File.new Decidim::Dev.asset("verify_user_groups.csv") }
+    let(:file) { upload_test_file(Decidim::Dev.test_file("verify_user_groups.csv", "text/csv")) }
     let(:validity) { true }
 
     let(:form) do

decidim-admin/spec/forms/decidim/admin/import_form_spec.rb

@@ -10,7 +10,7 @@ module Admin
       let(:organization) { create(:organization) }
       let!(:component) { create(:dummy_component, organization: organization) }
       let(:user) { create(:user, :confirmed, :admin, organization: organization) }
-      let(:file) { Decidim::Dev.test_file("import_proposals.csv", "text/csv") }
+      let(:file) { upload_test_file(Decidim::Dev.test_file("import_proposals.csv", "text/csv")) }
       let(:name) { "dummies" }
 
       let(:params) { { file: file, name: name } }
@@ -28,17 +28,17 @@ module Admin
       end
 
       context "when content type is not accepted" do
-        let(:file) { Decidim::Dev.test_file("city.jpeg", "image/jpeg") }
+        let(:file) { upload_test_file(Decidim::Dev.test_file("city.jpeg", "image/jpeg")) }
 
         it { is_expected.not_to be_valid }
       end
 
       context "when the file is not a valid file" do
-        let(:file) { Decidim::Dev.test_file("Exampledocument.pdf", Decidim::Admin::Import::Readers::XLSX::MIME_TYPE) }
+        let(:file) { upload_test_file(Decidim::Dev.test_file("Exampledocument.pdf", Decidim::Admin::Import::Readers::XLSX::MIME_TYPE)) }
 
         it "reports invalid and adds the correct error for the file field" do
           expect(subject).not_to be_valid
-          expect(subject.errors[:file]).to include("Invalid file provided, please check that the file is correctly formatted")
+          expect(subject.errors[:file]).to include("Invalid mime type")
         end
       end
     end

decidim-admin/spec/forms/organization_appearance_form_spec.rb

@@ -101,7 +101,7 @@ module Admin
         let(:highlighted_content_banner_action_title) { Decidim::Faker::Localized.sentence(word_count: 2) }
         let(:highlighted_content_banner_action_subtitle) { Decidim::Faker::Localized.sentence(word_count: 2) }
         let(:highlighted_content_banner_action_url) { ::Faker::Internet.url }
-        let(:highlighted_content_banner_image) { Decidim::Dev.test_file("city.jpeg", "image/jpeg") }
+        let(:highlighted_content_banner_image) { upload_test_file(Decidim::Dev.test_file("city.jpeg", "image/jpeg")) }
 
         it { is_expected.to be_valid }
 
@@ -130,12 +130,12 @@ module Admin
         end
 
         context "and highlighted_content_banner_image is blank" do
-          let(:highlighted_content_banner_image) { "" }
+          let(:highlighted_content_banner_image) { nil }
 
           it { is_expected.not_to be_valid }
 
           context "and the organization already has an image set" do
-            let(:organization) { create :organization, highlighted_content_banner_image: Decidim::Dev.test_file("city.jpeg", "image/jpeg") }
+            let(:organization) { create :organization, highlighted_content_banner_image: upload_test_file(Decidim::Dev.test_file("city.jpeg", "image/jpeg")) }
             let(:highlighted_content_banner_image) { nil }
 
             it { is_expected.to be_valid }

decidim-admin/spec/forms/participatory_space_private_user_csv_import_form_spec.rb

@@ -22,7 +22,7 @@ module Admin
           "file" => file
         }
       end
-      let(:file) { File.new Decidim::Dev.asset("import_participatory_space_private_users.csv") }
+      let(:file) { upload_test_file(Decidim::Dev.asset("import_participatory_space_private_users.csv")) }
 
       context "when everything is OK" do
         it { is_expected.to be_valid }
@@ -35,7 +35,7 @@ module Admin
       end
 
       context "when user name contains invalid chars" do
-        let(:file) { File.new Decidim::Dev.asset("import_participatory_space_private_users_nok.csv") }
+        let(:file) { upload_test_file(Decidim::Dev.asset("import_participatory_space_private_users_nok.csv")) }
 
         it { is_expected.to be_invalid }
       end

decidim-admin/spec/system/admin_manages_newsletters_spec.rb

@@ -75,12 +75,11 @@
           es: "Hola, %{name}! Contenido relevante.",
           ca: "Hola, %{name}! Contingut rellevant."
         )
+      end
 
-        attach_file(
-          "Main image",
-          Decidim::Dev.asset("city2.jpeg")
-        )
+      dynamically_attach_file(:newsletter_images_main_image, Decidim::Dev.asset("city2.jpeg"))
 
+      within ".new_newsletter" do
         find("*[type=submit]").click
       end
 

decidim-admin/spec/system/admin_manages_organization_appearance_spec.rb

@@ -47,10 +47,10 @@
 
       fill_in "Official organization URL", with: "http://www.example.com"
 
-      attach_file "Logo", Decidim::Dev.asset("city2.jpeg")
-      attach_file "Icon", Decidim::Dev.asset("icon.png")
-      attach_file "Official logo header", Decidim::Dev.asset("city2.jpeg")
-      attach_file "Official logo footer", Decidim::Dev.asset("city3.jpeg")
+      dynamically_attach_file(:organization_logo, Decidim::Dev.asset("city2.jpeg"))
+      dynamically_attach_file(:organization_favicon, Decidim::Dev.asset("city3.jpeg"), remove_before: true)
+      dynamically_attach_file(:organization_official_img_header, Decidim::Dev.asset("city2.jpeg"), remove_before: true)
+      dynamically_attach_file(:organization_official_img_footer, Decidim::Dev.asset("city3.jpeg"), remove_before: true)
 
       fill_in :organization_theme_color, with: "#a0a0a0"
 

decidim-admin/spec/system/admin_manages_organization_homepage_spec.rb

@@ -46,10 +46,7 @@
     it "updates the images of the content block" do
       visit decidim_admin.edit_organization_homepage_content_block_path(:hero)
 
-      attach_file(
-        :content_block_images_background_image,
-        Decidim::Dev.asset("city2.jpeg")
-      )
+      dynamically_attach_file(:content_block_images_background_image, Decidim::Dev.asset("city2.jpeg"))
 
       click_button "Update"
       visit decidim.root_path