Unverified Commit 7cc4b46d authored by Frédéric Bolvin's avatar Frédéric Bolvin Committed by Steffen van Bergerem

Replaced fileuploader-custom with FineUploader

closes #7083
parent 8e5d2f5c
......@@ -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)
......
......@@ -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
......
......@@ -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
......@@ -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\" />");
......
......@@ -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);
}
}
}
});
}
......
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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();
......
......@@ -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"
......
......@@ -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"
......
......@@ -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"
......
......@@ -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"
......
......@@ -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
......@@ -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
......
This diff is collapsed.
......@@ -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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment