7878 directly pasting images into edit box and broader drag and drop areas

This commit is contained in:
Hank Grabowski 2018-10-07 20:10:52 -04:00 committed by Thorsten Claus
parent 69c6305e62
commit 0638619f81
7 changed files with 25 additions and 6 deletions

View file

@ -10,7 +10,7 @@ app.views.PublisherUploader = Backbone.View.extend({
this.publisher.photozoneEl.on("click", ".x", _.bind(this._removePhoto, this));
// Initialize the PostPhotoUploader and subscribe its events
this.uploader = new Diaspora.PostPhotoUploader(this.el);
this.uploader = new Diaspora.PostPhotoUploader(this.el, opts.dropZoneElementIds);
this.uploader.onUploadStarted = _.bind(this.uploadStartedHandler, this);
this.uploader.onProgress = _.bind(this.progressHandler, this);
this.uploader.onUploadCompleted = _.bind(this.uploadCompleteHandler, this);

View file

@ -113,6 +113,7 @@ app.views.Publisher = Backbone.View.extend({
this.viewUploader = new app.views.PublisherUploader({
el: this.$("#file-upload"),
dropZoneElementIds: ["publisher-textarea-wrapper"],
publisher: this
});
this.viewUploader.on("change", this.checkSubmitAvailability, this);

View file

@ -5,8 +5,9 @@ Diaspora.PostPhotoUploader = class {
* Initializes a new instance of PostPhotoUploader
* This class handles uploading photos and provides client side scaling
*/
constructor(el, aspectIds) {
constructor(el, dropZoneElementIds, aspectIds) {
this.element = el;
this.dropZoneElementIds = dropZoneElementIds;
this.sizeLimit = 4194304;
this.aspectIds = aspectIds;
@ -53,6 +54,10 @@ Diaspora.PostPhotoUploader = class {
/* eslint-enable camelcase */
}
},
paste: {
targetElement: document.getElementById("status_message_text"),
promptForName: true
},
validation: {
acceptFiles: "image/png, image/jpeg, image/gif",
allowedExtensions: ["jpg", "jpeg", "png", "gif"],
@ -72,6 +77,18 @@ Diaspora.PostPhotoUploader = class {
onError: (id, name, errorReason) => this.showMessage("error", errorReason)
}
});
if (this.dropZoneElementIds instanceof Array) {
var dropZoneElements = this.dropZoneElementIds.map(id => document.getElementById(id)).filter(el => el);
if (dropZoneElements.length > 0) {
this.dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: dropZoneElements,
callbacks: {
processingDroppedFilesComplete: (files) => this.fineUploader.addFiles(files)
}
});
}
}
}
/**

View file

@ -1,7 +1,7 @@
//= require jquery3
//= require handlebars.runtime
//= require main
//= require fine-uploader/fine-uploader.core
//= require fine-uploader/fine-uploader
//= require mobile/mobile
//= require jquery.autoSuggest.custom
//= require contact-list

View file

@ -16,7 +16,7 @@
//= require jquery-ui/sortable
//= require keycodes
//= require jquery.autoSuggest.custom
//= require fine-uploader/fine-uploader.core
//= require fine-uploader/fine-uploader
//= require handlebars.runtime
//= require_tree ../templates
//= require posix-bracket-expressions

View file

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

View file

@ -6,7 +6,8 @@ function createUploader(){
var fileInfo = $("#fileInfo-publisher");
// Initialize the PostPhotoUploader and subscribe its events
this.uploader = new Diaspora.PostPhotoUploader(document.getElementById("file-upload-publisher"), aspectIds);
this.uploader = new Diaspora.PostPhotoUploader(document.getElementById("file-upload-publisher"),
["publisher-textarea-wrapper", "status_message_text", "file-upload-publisher"]);
this.uploader.onUploadStarted = _.bind(uploadStartedHandler, this);
this.uploader.onProgress = _.bind(progressHandler, this);