Merge pull request #8237 from tclaus/7878-direct-image-pasting

7878 direct image pasting

fixes #7878
closes #7883

Changelog.md

@@ -35,6 +35,7 @@ Although the chat was never enabled per default and was marked as experimental,
 * Add backend for archive import [#7660](https://github.com/diaspora/diaspora/pull/7660) [#8254](https://github.com/diaspora/diaspora/pull/8254) [#8264](https://github.com/diaspora/diaspora/pull/8264) [#8010](https://github.com/diaspora/diaspora/pull/8010) [#8260](https://github.com/diaspora/diaspora/pull/8260)
 * For pods running PostgreSQL, make sure that no upper-case/mixed-case tags exist, and create a `lower(name)` index on tags to speed up ActsAsTaggableOn [#8206](https://github.com/diaspora/diaspora/pull/8206)
 * Allow podmins/moderators to see all local public posts to improve moderation [#8232](https://github.com/diaspora/diaspora/pull/8232)
+* Add support for directly paste images to upload them [#8237](https://github.com/diaspora/diaspora/pull/8237)
 
 # 0.7.16.0
 

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

@@ -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);

app/assets/javascripts/app/views/publisher_view.js

@@ -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);
@@ -446,6 +447,7 @@ app.views.Publisher = Backbone.View.extend({
 
   checkSubmitAvailability: function() {
     if (this._submittable()) {
+      this.open();
       this.setButtonsEnabled(true);
     } else {
       this.setButtonsEnabled(false);

app/assets/javascripts/helpers/post_photo_uploader.es6

@@ -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)
+          }
+        });
+      }
+    }
   }
 
   /**

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

@@ -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

app/assets/javascripts/main.js

@@ -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

app/assets/javascripts/mobile/mobile.js

@@ -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

app/assets/javascripts/mobile/mobile_file_uploader.js

@@ -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);