Replaced fileuploader-custom with FineUploader

closes #7083

Changelog.md

@@ -2,6 +2,7 @@
 
 ## Refactor
 * Increase the spacing above and below post contents [#7267](https://github.com/diaspora/diaspora/pull/7267)
+* Replace fileuploader-custom with FineUploader [#7083](https://github.com/diaspora/diaspora/pull/7083)
 
 ## Bug fixes
 * Fix background color of year on notifications page with dark theme [#7263](https://github.com/diaspora/diaspora/pull/7263)

Gemfile

@@ -105,6 +105,7 @@ source "https://rails-assets.org" do
   gem "rails-assets-highlightjs",                         "9.7.0"
   gem "rails-assets-bootstrap-markdown",                  "2.10.0"
   gem "rails-assets-corejs-typeahead",                    "1.0.1"
+  gem "rails-assets-fineuploader-dist",                   "5.11.0"
 
   # jQuery plugins
 

Gemfile.lock

@@ -657,6 +657,7 @@ GEM
       rails-assets-jquery.ui (~> 1.11.4)
     rails-assets-emojione (2.0.1)
     rails-assets-favico.js (0.3.10)
+    rails-assets-fineuploader-dist (5.11.0)
     rails-assets-highlightjs (9.7.0)
     rails-assets-jasmine (2.4.1)
     rails-assets-jasmine-ajax (3.2.0)
@@ -1001,6 +1002,7 @@ DEPENDENCIES
   rails-assets-bootstrap-markdown (= 2.10.0)!
   rails-assets-corejs-typeahead (= 1.0.1)!
   rails-assets-diaspora_jsxc (= 0.1.5.develop.7)!
+  rails-assets-fineuploader-dist (= 5.11.0)!
   rails-assets-highlightjs (= 9.7.0)!
   rails-assets-jasmine-ajax (= 3.2.0)!
   rails-assets-jquery (= 2.2.4)!
@@ -1052,4 +1054,4 @@ DEPENDENCIES
   will_paginate (= 3.1.5)
 
 BUNDLED WITH
-   1.13.6
+   1.13.7

app/assets/javascripts/app/views/publisher/uploader_view.js

@@ -5,32 +5,43 @@
 // progress. Attaches previews of finished uploads to the publisher.
 
 app.views.PublisherUploader = Backbone.View.extend({
-
   allowedExtensions: ["jpg", "jpeg", "png", "gif", "tif", "tiff"],
   sizeLimit: 4194304,  // bytes
 
   initialize: function(opts) {
     this.publisher = opts.publisher;
-
-    this.uploader = new qq.FileUploaderBasic({
+    this.uploader = new qq.FineUploaderBasic({
       element: this.el,
-      button:  this.el,
-
-      //debug: true,
-
-      action: "/photos",
-      params: { photo: { pending: true }},
-      allowedExtensions: this.allowedExtensions,
-      sizeLimit: this.sizeLimit,
+      button: this.el,
+
+      request: {
+        endpoint: Routes.photos(),
+        params: {
+          /* eslint-disable camelcase */
+          authenticity_token: $("meta[name='csrf-token']").attr("content"),
+          /* eslint-enable camelcase */
+          photo: {
+            pending: true
+          }
+        }
+      },
+      validation: {
+        allowedExtensions: this.allowedExtensions,
+        sizeLimit: this.sizeLimit
+      },
       messages: {
-        typeError:  Diaspora.I18n.t("photo_uploader.invalid_ext"),
-        sizeError:  Diaspora.I18n.t("photo_uploader.size_error"),
+        typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
+        sizeError: Diaspora.I18n.t("photo_uploader.size_error"),
         emptyError: Diaspora.I18n.t("photo_uploader.empty")
       },
-      onProgress: _.bind(this.progressHandler, this),
-      onSubmit:   _.bind(this.submitHandler, this),
-      onComplete: _.bind(this.uploadCompleteHandler, this)
-
+      callbacks: {
+        onProgress: _.bind(this.progressHandler, this),
+        onSubmit: _.bind(this.submitHandler, this),
+        onComplete: _.bind(this.uploadCompleteHandler, this),
+        onError: function(id, name, errorReason) {
+          if (app.flashMessages) { app.flashMessages.error(errorReason); }
+        }
+      }
     });
 
     this.info = $("<div id=\"fileInfo\" />");

app/assets/javascripts/helpers/profile_photo_uploader.js

@@ -8,18 +8,22 @@ Diaspora.ProfilePhotoUploader.prototype = {
   constructor: Diaspora.ProfilePhotoUploader,
 
   initialize: function() {
-    new qq.FileUploaderBasic({
+    new qq.FineUploaderBasic({
       element: document.getElementById("file-upload"),
-      params: {"photo": {"pending": true, "aspect_ids": "all", "set_profile_photo": true}},
-      allowedExtensions: ["jpg", "jpeg", "png"],
-      action: "/photos",
-      button: document.getElementById("file-upload"),
-      sizeLimit: 4194304,
-
-      onProgress: function(id, fileName, loaded, total) {
-        var progress = Math.round(loaded / total * 100);
-        $("#fileInfo").text(fileName + " " + progress + "%");
+      validation: {
+        allowedExtensions: ["jpg", "jpeg", "png"],
+        sizeLimit: 4194304
       },
+      request: {
+        endpoint: Routes.photos(),
+        params: {
+          /* eslint-disable camelcase */
+          authenticity_token: $("meta[name='csrf-token']").attr("content"),
+          /* eslint-enable camelcase */
+          photo: {"pending": true, "aspect_ids": "all", "set_profile_photo": true}
+        }
+      },
+      button: document.getElementById("file-upload"),
 
       messages: {
         typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
@@ -27,33 +31,53 @@ Diaspora.ProfilePhotoUploader.prototype = {
         emptyError: Diaspora.I18n.t("photo_uploader.empty")
       },
 
-      onSubmit: function() {
-        $("#file-upload").addClass("loading");
-        $("#profile_photo_upload").find(".avatar").addClass("loading");
-        $("#file-upload-spinner").removeClass("hidden");
-        $("#fileInfo").show();
-      },
+      callbacks: {
+        onProgress: function(id, fileName, loaded, total) {
+          var progress = Math.round(loaded / total * 100);
+          $("#fileInfo").text(fileName + " " + progress + "%");
+        },
+        onSubmit: function() {
+          $("#file-upload").addClass("loading");
+          $("#profile_photo_upload").find(".avatar").addClass("loading");
+          $("#file-upload-spinner").removeClass("hidden");
+          $("#fileInfo").show();
+        },
+        onComplete: function(id, fileName, responseJSON) {
+          $("#file-upload-spinner").addClass("hidden");
+          $("#fileInfo").text(Diaspora.I18n.t("photo_uploader.completed", {"file": fileName}));
+          $("#file-upload").removeClass("loading");
 
-      onComplete: function(_id, fileName, responseJSON) {
-        $("#file-upload-spinner").addClass("hidden");
-        $("#fileInfo").text(Diaspora.I18n.t("photo_uploader.completed", {"file": fileName}));
-        $("#file-upload").removeClass("loading");
-
-        /* flash message prompt */
-        var message = Diaspora.I18n.t("photo_uploader.looking_good");
-        if (app.flashMessages) { app.flashMessages.success(message); }
-
-        var id = responseJSON.data.photo.id;
-        var url = responseJSON.data.photo.unprocessed_image.url;
-        var oldPhoto = $("#photo_id");
-        if (oldPhoto.length === 0) {
-          $("#update_profile_form").prepend("<input type='hidden' value='" + id + "' id='photo_id' name='photo_id'/>");
-        } else {
-          oldPhoto.val(id);
-        }
+          if (responseJSON.data !== undefined) {
+            /* flash message prompt */
+            var message = Diaspora.I18n.t("photo_uploader.looking_good");
+            if (app.flashMessages) {
+              app.flashMessages.success(message);
+            } else {
+              alert(message);
+            }
 
-        $("#profile_photo_upload").find(".avatar").removeClass("loading");
-        $("#profile_photo_upload").find(".avatar").attr("src", url);
+            var photoId = responseJSON.data.photo.id;
+            var url = responseJSON.data.photo.unprocessed_image.url;
+            var oldPhoto = $("#photo_id");
+            if (oldPhoto.length === 0) {
+              $("#update_profile_form")
+                .prepend("<input type='hidden' value='" + photoId + "' id='photo_id' name='photo_id'/>");
+            } else {
+              oldPhoto.val(photoId);
+            }
+
+            $("#profile_photo_upload").find(".avatar").attr("src", url);
+            $(".avatar[data-person_id=" + gon.user.id + "]").attr("src", url);
+          }
+          $("#profile_photo_upload").find(".avatar").removeClass("loading");
+        },
+        onError: function(id, name, errorReason) {
+          if (app.flashMessages) {
+            app.flashMessages.error(errorReason);
+          } else {
+            alert(errorReason);
+          }
+        }
       }
     });
   }

app/assets/javascripts/jasmine-load-all.js

@@ -2,7 +2,7 @@
 //= require handlebars.runtime
 //= require templates
 //= require main
-//= require fileuploader-custom
+//= require fineuploader-dist/dist/fine-uploader.core
 //= require mobile/mobile
 //= require jquery.autoSuggest.custom
 //= require contact-list

app/assets/javascripts/main.js

@@ -18,7 +18,7 @@
 //= require jquery-ui/sortable
 //= require keycodes
 //= require jquery.autoSuggest.custom
-//= require fileuploader-custom
+//= require fineuploader-dist/dist/fine-uploader.core
 //= require handlebars.runtime
 //= require posix-bracket-expressions
 //= require markdown-it

app/assets/javascripts/mobile/mobile.js

@@ -10,7 +10,7 @@
 //= require autosize
 //= require keycodes
 //= require jquery.autoSuggest.custom
-//= require fileuploader-custom
+//= require fineuploader-dist/dist/fine-uploader.core
 //= require rails-timeago
 //= require underscore
 //= require bootstrap

app/assets/javascripts/mobile/mobile_file_uploader.js

@@ -4,78 +4,93 @@
 function createUploader(){
    var aspectIds = gon.preloads.aspect_ids;
 
-   new qq.FileUploaderBasic({
-       element: document.getElementById('file-upload-publisher'),
-       params: {'photo' : {'pending' : 'true', 'aspect_ids' : aspectIds},},
-       allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'tiff'],
-       action: "/photos",
-       debug: false,
-       button: document.getElementById('file-upload-publisher'),
-       sizeLimit: 4194304,
+  new qq.FineUploaderBasic({
+    element: document.getElementById("file-upload-publisher"),
+    request: {
+      endpoint: Routes.photos(),
+      params: {
+        /* eslint-disable camelcase */
+        authenticity_token: $("meta[name='csrf-token']").attr("content"),
+        photo: {
+          aspect_ids: aspectIds,
+          /* eslint-enable camelcase */
+          pending: true
+        }
+      }
+    },
+    validation: {
+      allowedExtensions: ["jpg", "jpeg", "png", "gif", "tif", "tiff"],
+      sizeLimit: 4194304
+    },
+    button: document.getElementById("file-upload-publisher"),
 
-       onProgress: function(id, fileName, loaded, total){
-        var progress = Math.round(loaded / total * 100 );
-         $('#fileInfo-publisher').text(fileName + ' ' + progress + '%');
-       },
-
-       messages: {
-          typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
-          sizeError: Diaspora.I18n.t("photo_uploader.size_error"),
-          emptyError: Diaspora.I18n.t("photo_uploader.empty")
-       },
-
-       onSubmit: function(){
-        $('#file-upload-publisher').addClass("loading");
-        $('#publisher_textarea_wrapper').addClass("with_attachments");
-        $('#photodropzone').append(
+    callbacks: {
+      onProgress: function(id, fileName, loaded, total) {
+        var progress = Math.round(loaded / total * 100);
+        $("#fileInfo-publisher").text(fileName + " " + progress + "%");
+      },
+      onSubmit: function() {
+        $("#file-upload-publisher").addClass("loading");
+        $("#publisher_textarea_wrapper").addClass("with_attachments");
+        $("#photodropzone").append(
           "<li class='publisher_photo loading' style='position:relative;'>" +
-            "<img alt='Ajax-loader2' src='"+ImagePaths.get('ajax-loader2.gif')+"' />" +
+          "<img alt='Ajax-loader2' src='" + ImagePaths.get("ajax-loader2.gif") + "' />" +
           "</li>"
-          );
-       },
+        );
+      },
+      onComplete: function(_id, fileName, responseJSON) {
+        if (responseJSON.data === undefined) {
+          return;
+        }
 
-       onComplete: function(_id, fileName, responseJSON) {
-        $('#fileInfo-publisher').text(Diaspora.I18n.t("photo_uploader.completed", {'file': fileName}));
+        $("#fileInfo-publisher").text(Diaspora.I18n.t("photo_uploader.completed", {"file": fileName}));
         var id = responseJSON.data.photo.id,
             url = responseJSON.data.photo.unprocessed_image.url,
-            currentPlaceholder = $('li.loading').first();
+            currentPlaceholder = $("li.loading").first();
 
-        $('#publisher_textarea_wrapper').addClass("with_attachments");
-        $('#new_status_message').append("<input type='hidden' value='" + id + "' name='photos[]' />");
+        $("#publisher_textarea_wrapper").addClass("with_attachments");
+        $("#new_status_message").append("<input type='hidden' value='" + id + "' name='photos[]' />");
 
         // replace image placeholders
-        var img = currentPlaceholder.find('img');
-        img.attr('src', url);
-        img.attr('data-id', id);
-        currentPlaceholder.removeClass('loading');
+        var img = currentPlaceholder.find("img");
+        img.attr("src", url);
+        img.attr("data-id", id);
+        currentPlaceholder.removeClass("loading");
         currentPlaceholder.append("<div class='x'>X</div>" +
-            "<div class='circle'></div>");
-        ////
+          "<div class='circle'></div>");
 
-        var publisher = $('#publisher');
+        var publisher = $("#publisher");
 
-        publisher.find("input[type='submit']").removeAttr('disabled');
+        publisher.find("input[type='submit']").removeAttr("disabled");
 
-        $('.x').bind('click', function(){
-          var photo = $(this).closest('.publisher_photo');
+        $(".x").bind("click", function() {
+          var photo = $(this).closest(".publisher_photo");
           photo.addClass("dim");
-          $.ajax({url: "/photos/" + photo.children('img').attr('data-id'),
-                  dataType: 'json',
-                  type: 'DELETE',
-                  success: function() {
-                            photo.fadeOut(400, function(){
-                              photo.remove();
-                              if ( $('.publisher_photo').length === 0){
-                                $('#publisher_textarea_wrapper').removeClass("with_attachments");
-                              }
-                            });
-                          }
-                  });
+          $.ajax({
+            url: "/photos/" + photo.children("img").attr("data-id"),
+            dataType: "json",
+            type: "DELETE",
+            success: function() {
+              photo.fadeOut(400, function() {
+                photo.remove();
+                if ($(".publisher_photo").length === 0) {
+                  $("#publisher_textarea_wrapper").removeClass("with_attachments");
+                }
+              });
+            }
+          });
         });
-       },
-
-       onAllComplete: function(){}
-   });
+      },
+      onError: function(id, name, errorReason) {
+        alert(errorReason);
+      }
+    },
+    messages: {
+      typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
+      sizeError: Diaspora.I18n.t("photo_uploader.size_error"),
+      emptyError: Diaspora.I18n.t("photo_uploader.empty")
+    }
+  });
 }
 window.addEventListener("load", function() {
   createUploader();

features/desktop/edits_profile.feature

@@ -42,8 +42,10 @@ Feature: editing your profile
     And I should see "#starwars" within "ul#as-selections-tags"
     And the "#profile_public_details" bootstrap-switch should be on
 
-    When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "file" within "#file-upload"
-    And I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload"
+    When I attach the file "spec/fixtures/bad_urls.txt" to "qqfile" within "#file-upload"
+    Then I should see a flash message indicating failure
+
+    When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload"
     Then I should see "button.png completed"
     And I should see a "img" within "#profile_photo_upload"
 

features/mobile/edits_profile.feature

@@ -39,8 +39,8 @@ Feature: editing the profile in the mobile view
     Then I should see "#kamino" within "ul#as-selections-tags"
     And I should see "#starwars" within "ul#as-selections-tags"
 
-    When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "file" within "#file-upload"
-    And I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload"
+    When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "qqfile" within "#file-upload"
+    And I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload"
     Then I should see "button.png completed"
     And I should see a "img" within "#profile_photo_upload"
 

features/mobile/getting_started.feature

@@ -17,8 +17,8 @@ Feature: editing the getting started in the mobile view
     And I should not see "awesome_button"
 
   Scenario: new user adds a profile photo and tags
-    When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "file" within "#file-upload"
-    And I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload"
+    When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "qqfile" within "#file-upload"
+    And I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload"
     Then I should see a "img" within "#profile_photo_upload"
 
     When I fill in "follow_tags" with "#men"

features/mobile/multiphoto.feature

@@ -10,7 +10,7 @@ Feature: viewing photos on the mobile main page
 
   Scenario: view full size image
     Given I visit the mobile publisher page
-    When I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
+    When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
     Then I should see "button.png completed"
     And I should see an uploaded image within the photo drop zone
 
@@ -23,9 +23,9 @@ Feature: viewing photos on the mobile main page
 
   Scenario: view multiphoto post
     Given I visit the mobile publisher page
-    When I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
+    When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
     Then I should see "button.png completed"
-    When I attach the file "spec/fixtures/button.gif" to hidden "file" within "#file-upload-publisher"
+    When I attach the file "spec/fixtures/button.gif" to hidden "qqfile" within "#file-upload-publisher"
     Then I should see "button.gif completed"
 
     When I press "Share"

features/mobile/posts_from_main_page.feature

@@ -30,7 +30,7 @@ Feature: posting from the mobile main page
 
   Scenario: post a photo without text
     Given I visit the mobile publisher page
-    When I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
+    When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
     Then I should see "button.png completed"
     And I should see an uploaded image within the photo drop zone
     When I press "Share"
@@ -43,9 +43,9 @@ Feature: posting from the mobile main page
 
   Scenario: back out of posting a photo-only post
     Given I visit the mobile publisher page
-    When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "file" within "#file-upload-publisher"
+    When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "qqfile" within "#file-upload-publisher"
     Then I should not see an uploaded image within the photo drop zone
-    When I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
+    When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
     And I should see "button.png completed"
     And I click to delete the first uploaded photo
     Then I should not see an uploaded image within the photo drop zone
@@ -53,8 +53,8 @@ Feature: posting from the mobile main page
   Scenario: back out of uploading a picture when another has been attached
     Given I visit the mobile publisher page
     And I append "I am eating yogurt" to the mobile publisher
-    And I attach the file "spec/fixtures/button.gif" to hidden "file" within "#file-upload-publisher"
-    And I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
+    And I attach the file "spec/fixtures/button.gif" to hidden "qqfile" within "#file-upload-publisher"
+    And I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
     And I click to delete the first uploaded photo
     Then I should see an uploaded image within the photo drop zone
     And the text area wrapper mobile should be with attachments

features/support/publishing_cuke_helpers.rb

@@ -19,9 +19,9 @@ module PublishingCukeHelpers
   end
 
   def upload_file_with_publisher(path)
-    page.execute_script(%q{$("input[name='file']").css("opacity", '1');})
+    page.execute_script(%q{$("input[name='qqfile']").css("opacity", '1');})
     with_scope("#publisher_textarea_wrapper") do
-      attach_file("file", Rails.root.join(path).to_s)
+      attach_file("qqfile", Rails.root.join(path).to_s)
       # wait for the image to be ready
       page.assert_selector(".publisher_photo.loading", count: 0)
     end

spec/javascripts/app/views/publisher_view_spec.js

@@ -512,11 +512,11 @@ describe("app.views.Publisher", function() {
       );
     });
 
-    it('initializes the file uploader plugin', function() {
-      spyOn(qq, 'FileUploaderBasic');
+    it("initializes the FineUploader plugin", function() {
+      spyOn(qq, "FineUploaderBasic");
       new app.views.Publisher();
 
-      expect(qq.FileUploaderBasic).toHaveBeenCalled();
+      expect(qq.FineUploaderBasic).toHaveBeenCalled();
     });
 
     context('event handlers', function() {