fix path for js and css loading

src/Content/Conversation.php

@@ -445,6 +445,7 @@ class Conversation
 		$this->page->registerFooterScript(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput.js'));
 		$this->page->registerStylesheet(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput.css'));
 		$this->page->registerStylesheet(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput-typeahead.css'));
+		$this->page->registerStylesheet(Theme::getPathForFile('vendor/enyo/dropzone/dist/min/dropzone.min.css'));
 
 		$live_update_div = '';
 

src/Core/ACL.php

@@ -59,8 +59,10 @@ class ACL
 
 		$page->registerFooterScript(Theme::getPathForFile('asset/typeahead.js/dist/typeahead.bundle.js'));
 		$page->registerFooterScript(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput.js'));
+		$page->registerFooterScript(Theme::getPathForFile('../vendor/enyo/dropzone/dist/min/dropzone.min.js'));
 		$page->registerStylesheet(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput.css'));
 		$page->registerStylesheet(Theme::getPathForFile('js/friendica-tagsinput/friendica-tagsinput-typeahead.css'));
+		$page->registerStylesheet(Theme::getPathForFile('../vendor/enyo/dropzone/dist/min/dropzone.min.css'));
 
 		$contacts = self::getValidMessageRecipientsForUser(DI::userSession()->getLocalUserId());
 

src/Module/Item/Compose.php

@@ -164,7 +164,7 @@ class Compose extends BaseModule
 		$this->page->registerFooterScript(Theme::getPathForFile('js/ajaxupload.js'));
 		$this->page->registerFooterScript(Theme::getPathForFile('js/linkPreview.js'));
 		$this->page->registerFooterScript(Theme::getPathForFile('js/compose.js'));
-
+                $this->page->registerFooterScript(Theme::getPathForFile('../vendor/enyo/dropzone/dist/min/dropzone.min.js'));
 		$contact = Contact::getById($a->getContactId());
 
 		if ($this->pConfig->get(DI::userSession()->getLocalUserId(), 'system', 'set_creation_date')) {

view/templates/item/compose.tpl

@@ -1,10 +1,17 @@
-<div class="generic-page-wrapper">
+<div class="generic-page-wrapper"css>
 	<h2>{{$l10n.compose_title}}</h2>
     {{if $l10n.always_open_compose}}
 	<p>{{$l10n.always_open_compose nofilter}}</p>
 	{{/if}}
 	<div id="profile-jot-wrapper">
-		<form class="comment-edit-form" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="compose/{{$type}}" method="post">
+                <!--form action="/media/photo/upload?response=url&album="
+                class="dropzone" id="my-great-dropzone"></form-->
+                <!--form id="dropzone" action="/media/photo/upload?response=json&album=" class="dropzone" method="post" enctype="multipart/form-data">
+                    <div class="fallback">
+                        <input name="file" type="file" multiple />
+                    </div>
+                </form-->
+		<form class="comment-edit-form" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="compose/{{$type}}" method="post"  class="dropzone">
 		    {{*<!--<input type="hidden" name="return" value="{{$return_path}}" />-->*}}
 			<input type="hidden" name="post_id_random" value="{{$rand_num}}" />
 			<input type="hidden" name="post_type" value="{{$posttype}}" />
@@ -71,6 +78,7 @@
 				<span role="presentation" id="character-counter" class="grey text-info"></span>
 				<button type="button" class="btn btn-defaul" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" tabindex="5"><i class="fa fa-eye"></i> {{$l10n.preview}}</button>
 				<button type="submit" class="btn btn-primary" id="comment-edit-submit-{{$id}}" name="submit" tabindex="4"><i class="fa fa-envelope"></i> {{$l10n.submit}}</button>
+                                <div id="dz-previewsCompose" class="dropzone-previews"></div>
 			</p>
 
 			<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
@@ -94,3 +102,41 @@
 		</form>
 	</div>
 </div>
+<script>
+    var dropzoneCompose = new Dropzone(document.body,  { // camelized version of the `id`
+    paramName: "userfile", // The name that will be used to transfer the file
+    maxFilesize: 2, // MB
+    previewsContainer: '#dz-previewsCompose',
+    preventDuplicates: true,
+    clickable: true,
+    thumbnailWidth: 100,
+    thumbnailHeight: 100,
+    url: "/media/photo/upload?response=url&album=",
+    accept: function(file, done) {
+      done();
+    },
+    init: function() {
+        this.on("success", function(file, serverResponse) {
+                var target = $(':focus').closest('.comment-edit-form').find('.comment-edit-text');
+                var resp = $(serverResponse).find('div#content').text()
+                if (target.setRangeText) {
+                    //if setRangeText function is supported by current browser
+                    target.setRangeText(" " + $.trim(resp) + " ")
+                } else {
+                    target.focus()
+                    document.execCommand('insertText', false /*no UI*/, $.trim(resp));
+                }
+        });
+    },
+  });
+  document.onpaste = function(event){
+    const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+    items.forEach((item) => {
+      if (item.kind === 'file') {
+        // adds the file to your dropzone instance
+        console.log(item);
+        dropzoneCompose.addFile(item.getAsFile())
+      }
+    })
+  }
+</script>

view/theme/frio/templates/comment_item.tpl

@@ -1,8 +1,8 @@
 
 {{if $threaded}}
-<div class="comment-wwedit-wrapper threaded" id="comment-edit-wrapper-{{$id}}">
+<div class="comment-wwedit-wrapper threaded dropzone" id="comment-edit-wrapper-{{$id}}">
 {{else}}
-<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}">
+<div class="comment-wwedit-wrapper dropzone" id="comment-edit-wrapper-{{$id}}">
 {{/if}}
 	<form class="comment-edit-form" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="item" method="post">
 		<input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
@@ -61,6 +61,50 @@
 
 		<div class="comment-edit-end clear"></div>
 	</form>
+        <div id="dz-preview-{{$id}}" class="dropzone-preview"></div>
 	<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
 </div>
 
+<script>
+  Dropzone.autoDiscover = false;
+  var dropzone{{$id}} = new Dropzone( '#comment-edit-wrapper-{{$id}}', {
+  //var dropzone{{$id}} = new Dropzone( document.body, {
+    paramName: "userfile", // The name that will be used to transfer the file
+    maxFilesize: 6, // MB
+    previewsContainer: '#dz-preview-{{$id}}',
+    preventDuplicates: true,
+    clickable: true,
+    thumbnailWidth: 100,
+    thumbnailHeight: 100,
+    url: "/media/photo/upload?response=url&album=",
+    accept: function(file, done) {
+      done();
+    },
+    init: function() {
+      this.on("success", function(file, serverResponse) {
+        var target = $('#comment-edit-text-{{$id}}')
+        var resp = $(serverResponse).find('div#content').text()
+        if (target.setRangeText) {
+          //if setRangeText function is supported by current browser
+          target.setRangeText(" " + $.trim(resp) + " ")
+        } else {
+          target.focus()
+          document.execCommand('insertText', false /*no UI*/, " " + $.trim(resp) + " ");
+        }
+      });
+    },
+  });
+
+  $('#comment-edit-wrapper-{{$id}}').on('paste', function(event){
+    const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+    items.forEach((item) => {
+      if (item.kind === 'file') {
+        // adds the file to your dropzone instance
+        console.log(item);
+        dropzone{{$id}}.addFile(item.getAsFile())
+      }
+    })
+  })
+
+
+</script>

view/theme/frio/templates/head.tpl

@@ -55,6 +55,8 @@
 	media="screen" />
 <link rel="stylesheet" href="view/theme/frio/css/font-awesome.custom.css?v={{$smarty.const.FRIENDICA_VERSION}}"
 	type="text/css" media="screen" />
+<link rel="stylesheet" href="vendor/enyo/dropzone/dist/min/dropzone.min.css?v={{$smarty.const.FRIENDICA_VERSION}}"
+	type="text/css" media="screen" />
 
 {{foreach $stylesheets as $stylesheetUrl => $media}}
 	<link rel="stylesheet" href="{{$stylesheetUrl}}" type="text/css" media="{{$media}}" />
@@ -137,6 +139,7 @@
 		<script type="text/javascript" src="view/theme/frio/js/hovercard.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
 	{{/if}}
 	<script type="text/javascript" src="view/theme/frio/js/textedit.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
+        <script type="text/javascript" src="vendor/enyo/dropzone/dist/min/dropzone.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
 
 	{{* Include the strings which are needed for some js functions (e.g. translation)
 They are loaded into the html <head> so that js functions can use them *}}

view/theme/frio/templates/jot.tpl

@@ -70,7 +70,7 @@
 			</div>
 		</div>
 
-		<div id="jot-modal-body" class="modal-body">
+		<div id="jot-modal-body" class="modal-body dropzone">
 			<form id="profile-jot-form" action="{{$action}}" method="post">
 				<div id="profile-jot-wrapper" aria-labelledby="jot-text-lnk" role="tabpanel" aria-hidden="false">
 					<div>
@@ -152,6 +152,7 @@
 				<div id="jot-fbrowser-wrapper" class="minimize" aria-labelledby="jot-browser-link" role="tabpanel" aria-hidden="true"></div>
 
 			</form>
+                        <div id="dz-preview-jot" class="dropzone-preview"></div>
 
 			{{if $content}}<script type="text/javascript">initEditor();</script>{{/if}}
 		</div>
@@ -178,3 +179,48 @@ can load different content into the jot moadl (e.g. the item edit jot)
 		this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
 	});
 </script>
+<script>
+  Dropzone.autoDiscover = false;
+  var dropzoneJot = new Dropzone( '#jot-modal-body', {
+  //var dropzone{{$id}} = new Dropzone( document.body, {
+    paramName: "userfile", // The name that will be used to transfer the file
+    maxFilesize: 6, // MB
+    previewsContainer: '#dz-preview-jot',
+    url: "/media/photo/upload?response=url&album=",
+    accept: function(file, done) {
+      if (file.name == "justinbieber.jpg") {
+        done("Naha, you don't.");
+      } else {
+        done();
+      }
+    },
+    init: function() {
+      this.on("success", function(file, serverResponse) {
+        var target = $('#profile-jot-text')
+        var resp = $(serverResponse).find('div#content').text()
+        if (target.setRangeText) {
+          //if setRangeText function is supported by current browser
+          target.setRangeText(" " + $.trim(resp) + " ")
+        } else {
+          target.focus()
+          document.execCommand('insertText', false /*no UI*/, " " + $.trim(resp) + " ");
+        }
+      });
+    },
+  });
+
+//  document.onpaste = function(event){
+  $('#jot-modal-body').on('paste', function(event){
+    const items = (event.clipboardData || event.originalEvent.clipboardData).items;
+    items.forEach((item) => {
+      if (item.kind === 'file') {
+        // adds the file to your dropzone instance
+        console.log(item);
+        dropzoneJot.addFile(item.getAsFile())
+      }
+    })
+  })
+
+
+</script>
+