From 59569a4908a7001f2aa7fc3f00e26eee522e4dba Mon Sep 17 00:00:00 2001
From: snow flurry <snow@datagirl.xyz>
Date: Wed, 5 Mar 2025 12:12:03 -0800
Subject: [PATCH] Add dragdrop_attach: Drag and Drop Attachments
---
plugin/Makefile | 3 +-
plugin/dragdrop_attach/Makefile | 3 +
.../src/Subs-DragDropAttach.php | 14 +
plugin/dragdrop_attach/src/dragdrop-attach.js | 112 ++++++++
plugin/dragdrop_attach/src/package-info.xml | 23 ++
plugin/dragdrop_attach/src/readme.txt | 4 +
.../dragdrop_attach/src/sceditor.dragdrop.js | 261 ++++++++++++++++++
7 files changed, 419 insertions(+), 1 deletion(-)
create mode 100644 plugin/dragdrop_attach/Makefile
create mode 100644 plugin/dragdrop_attach/src/Subs-DragDropAttach.php
create mode 100644 plugin/dragdrop_attach/src/dragdrop-attach.js
create mode 100644 plugin/dragdrop_attach/src/package-info.xml
create mode 100644 plugin/dragdrop_attach/src/readme.txt
create mode 100644 plugin/dragdrop_attach/src/sceditor.dragdrop.js
diff --git a/plugin/Makefile b/plugin/Makefile
index e058c01..02c17a8 100644
--- a/plugin/Makefile
+++ b/plugin/Makefile
@@ -4,7 +4,8 @@ MODS := \
f9_theme \
media_bbc \
yt_nocookie \
- topic_mute
+ topic_mute \
+ dragdrop_attach
PKGDIR := $(PWD)/../packages
diff --git a/plugin/dragdrop_attach/Makefile b/plugin/dragdrop_attach/Makefile
new file mode 100644
index 0000000..1e525c4
--- /dev/null
+++ b/plugin/dragdrop_attach/Makefile
@@ -0,0 +1,3 @@
+PROJECT := dragdrop_attach
+
+include ../plugin.mk
diff --git a/plugin/dragdrop_attach/src/Subs-DragDropAttach.php b/plugin/dragdrop_attach/src/Subs-DragDropAttach.php
new file mode 100644
index 0000000..92a0db0
--- /dev/null
+++ b/plugin/dragdrop_attach/src/Subs-DragDropAttach.php
@@ -0,0 +1,14 @@
+<?php
+
+function dda_sceditor_options(&$sce_options) {
+ loadJavaScriptFile('sceditor.dragdrop.js', array('minimize' => true), 'smf_sceditor_dragdrop');
+ loadJavaScriptFile('dragdrop-attach.js', array('minimize' => true), 'dda_dragdrop_attach');
+ if (!empty($sce_options['plugins'])) {
+ $sce_options['plugins'] .= ',';
+ } else {
+ $sce_options['plugins'] = '';
+ }
+ $sce_options['plugins'] .= 'dragdrop_attach,dragdrop';
+}
+
+?>
diff --git a/plugin/dragdrop_attach/src/dragdrop-attach.js b/plugin/dragdrop_attach/src/dragdrop-attach.js
new file mode 100644
index 0000000..7a59f85
--- /dev/null
+++ b/plugin/dragdrop_attach/src/dragdrop-attach.js
@@ -0,0 +1,112 @@
+$(function () {
+ // List of common (expected?) image types and their file extensions. Used
+ // to generate a filename, if needed.
+ const mimeMap = {
+ 'image/avif': '.avif',
+ 'image/bmp': '.bmp',
+ 'image/gif': '.gif',
+ 'image/jpeg': '.jpg',
+ 'image/png': '.png',
+ 'image/svg+xml': '.svg',
+ 'image/tiff': '.tiff',
+ 'image/webp': '.webp',
+ };
+
+ function getDropzone() {
+ const dropElem = document.getElementById('attachment_upload');
+ if (dropElem != null && dropElem.dropzone) {
+ if (dropElem.dropzonePatched != true) {
+ // On success, resolve the inline promise
+ dropElem.dropzone.on('success', function (file, responseText, ev) {
+ if (!('inlinePromise' in file)) {
+ // not ours, don't care
+ return;
+ }
+
+ const { resolve, reject } = file.inlinePromise;
+
+ if (!responseText || responseText.generalErrors) {
+ // smf_fileUpload will handle the error. let's just get
+ // out of here
+ reject();
+ return;
+ }
+
+ const response = responseText.files[0];
+ if (response.errors != null && response.errors.length > 0) {
+ reject();
+ return;
+ }
+
+ resolve(response);
+ });
+ // On error, reject the inline promise
+ dropElem.dropzone.on('error', function (file, errorMessage, xhr) {
+ // just reject, we don't need to do anything
+ if ('inlinePromise' in file) {
+ file.inlinePromise.reject();
+ }
+ });
+ // ensure this is only run once
+ dropElem.dropzonePatched = true;
+ }
+ return dropElem.dropzone;
+ }
+ return null;
+ }
+
+
+ sceditor.plugins.dragdrop_attach = function () {
+ var editor;
+
+ function inlineAttach(file, createPlaceholder) {
+ const dropzone = getDropzone();
+ if (dropzone == null) {
+ throw new Error('missing dropzone');
+ }
+
+ // Pasted inline images don't necessarily have file names :<
+ if (file.name == null) {
+ const ext = mimeMap[file.type];
+ if (ext == null) {
+ throw new Error('Unexpected mime type ' + file.type);
+ }
+ file.name = 'image' + ext;
+ }
+
+ const placeholder = (editor.inSourceMode() || createPlaceholder == null)
+ ? null
+ : createPlaceholder();
+
+ new Promise(function(resolve, reject) {
+ file.inlinePromise = {
+ resolve: resolve,
+ reject: reject,
+ };
+ dropzone.addFile(file);
+ }).then(function(response) {
+ const bbcode = '[attach id=' + response.attachID + ']' + response.name + '[/attach]';
+ if (placeholder) {
+ placeholder.insert(editor.fromBBCode(bbcode));
+ } else {
+ editor.insertText(bbcode);
+ }
+ }).catch(function() {
+ if (placeholder) {
+ placeholder.cancel();
+ }
+ });
+ }
+
+ this.signalReady = function () {
+ editor = this;
+ // This requires our customized sceditor.dragdrop.js, otherwise
+ // we'd be in a potential race condition depending on whether
+ // dragdrop or our plugin is loaded first
+ this.opts.dragdrop = this.opts.dragdrop || {};
+ if (this.opts.dragdrop.handleFile == null) {
+ this.opts.dragdrop.handleFile = inlineAttach;
+ }
+ }
+ }
+});
diff --git a/plugin/dragdrop_attach/src/package-info.xml b/plugin/dragdrop_attach/src/package-info.xml
new file mode 100644
index 0000000..9e12199
--- /dev/null
+++ b/plugin/dragdrop_attach/src/package-info.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<!DOCTYPE package-info SYSTEM "http://www.simplemachines.org/xml/package-info">
+<package-info xmlns="http://www.simplemachines.org/xml/package-info" xmlns:smf="http://www.simplemachines.org/">
+ <id>@flurry:dragdrop_attach</id>
+ <name>Drag-and-Drop Inline Attachments</name>
+ <version>1.0</version>
+ <type>modification</type>
+
+ <install for="2.1.* - 2.1.99">
+ <readme parsebbc="true">readme.txt</readme>
+ <require-file name="Subs-DragDropAttach.php" destination="$sourcedir" />
+ <require-file name="sceditor.dragdrop.js" destination="Themes/default/scripts" />
+ <require-file name="dragdrop-attach.js" destination="Themes/default/scripts" />
+ <hook hook="integrate_sceditor_options" function="dda_sceditor_options" file="$sourcedir/Subs-DragDropAttach.php" />
+ </install>
+
+ <uninstall for="2.1.* - 2.1.99">
+ <remove-file name="$sourcedir/Subs-DragDropAttach.php" />
+ <remove-file name="Themes/default/scripts/sceditor.dragdrop.js" />
+ <remove-file name="Themes/default/scripts/dragdrop-attach.js" />
+ <hook hook="integrate_sceditor_options" function="dda_sceditor_options" file="$sourcedir/Subs-DragDropAttach.php" reverse="true" />
+ </uninstall>
+</package-info>
diff --git a/plugin/dragdrop_attach/src/readme.txt b/plugin/dragdrop_attach/src/readme.txt
new file mode 100644
index 0000000..dfa2446
--- /dev/null
+++ b/plugin/dragdrop_attach/src/readme.txt
@@ -0,0 +1,4 @@
+[size=x-large][b]Drag-and-Drop Inline Attachments[/b][/size]
+
+This allows users to drag-and-drop attachments into the post compose window,
+and use them as inline attachments.
diff --git a/plugin/dragdrop_attach/src/sceditor.dragdrop.js b/plugin/dragdrop_attach/src/sceditor.dragdrop.js
new file mode 100644
index 0000000..65baae3
--- /dev/null
+++ b/plugin/dragdrop_attach/src/sceditor.dragdrop.js
@@ -0,0 +1,261 @@
+/**
+ * SCEditor Drag and Drop Plugin
+ * http://www.sceditor.com/
+ *
+ * Copyright (C) 2017, Sam Clarke (samclarke.com)
+ *
+ * SCEditor is licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * @author Sam Clarke
+ */
+(function (sceditor) {
+ 'use strict';
+
+ /**
+ * Place holder GIF shown while image is loading.
+ * @type {string}
+ * @private
+ */
+ var loadingGif = 'data:image/gif;base64,R0lGODlhlgBkAPABAH19ffb29iH5BAAK' +
+ 'AAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQA' +
+ 'AACwAAAAAlgBkAAAC1YyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s' +
+ '73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0u' +
+ 'v2OvwD2fP6iD/gH6Pc2GIhg2JeQSNjGuLf4GMlYKIloefAIUEl52ZmJyaY5mUhqyFnq' +
+ 'mQr6KRoaMKp66hbLumpQ69oK+5qrOyg4a6qYV2x8jJysvMzc7PwMHS09TV1tfY2drb3' +
+ 'N3e39DR4uPk5ebn6Onq6+zt7u/g4fL99UAAAh+QQACgAAACwAAAAAlgBkAIEAAAB9fX' +
+ '329vYAAAAC3JSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MC' +
+ 'ofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2OvwD2' +
+ 'fP4iABgY+CcoCNeHuJdQyLjIaOiWiOj4CEhZ+SbZd/nI2RipqYhQOThKGpAZCuBZyAr' +
+ 'ZprpqSupaCqtaazmLCRqai7rb2av5W5wqSShcm8fc7PwMHS09TV1tfY2drb3N3e39DR' +
+ '4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5/vVAAAIfkEAAoAAAAsAAAAAJYAZACBAAAAf' +
+ 'X199vb2AAAAAuCUj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rO9/4P' +
+ 'DAqHxKLxiEwql8ym8wmNSqfUqvWKzWq33K73Cw6Lx+Sy+YxOq9fstvsNj8vn9Lr9jr8' +
+ 'E9nz+AgAYGLjQVwhXiJgguAiYgGjo9tinyCjoKLn3hpmJUGmJsBmguUnpCXCJOZraaX' +
+ 'oKShoJe9DqehCqKlnqiZobuzrbyvuIO8xqKpxIPKlwrPCbBx0tPU1dbX2Nna29zd3t/' +
+ 'Q0eLj5OXm5+jp6uvs7e7v4OHy8/T19vf4+fr7/P379UAAAh+QQACgAAACwAAAAAlgBk' +
+ 'AIEAAAB9fX329vYAAAAC4JSPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3' +
+ 'n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+' +
+ 'f0uv2OvwT2fP6iD7gAMEhICAeImIAYiFDoOPi22KcouZfw6BhZGUBZeYlp6LbJiTD6C' +
+ 'Qqg6Vm6eQqqKtkZ24iaKtrKunpQa9tmmju7Wwu7KFtMi3oYDMzompkHHS09TV1tfY2d' +
+ 'rb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f31QAADs=';
+
+ /**
+ * Basic check for browser support
+ * @type {boolean}
+ * @private
+ */
+ var isSupported = typeof window.FileReader !== 'undefined';
+ var base64DataUri = /data:[^;]+;base64,/i;
+
+ function base64DataUriToBlob(url) {
+ // 5 is length of "data:" prefix
+ var mime = url.substr(5, url.indexOf(';') - 5);
+ var data = atob(url.substr(url.indexOf(',') + 1));
+ /* global Uint8Array */
+ var binary = new Uint8Array(data.length);
+
+ for (var i = 0; i < data.length; i++) {
+ binary[i] = data[i].charCodeAt(0);
+ }
+
+ try {
+ return new Blob([binary], { type: mime });
+ } catch (e) {
+ return null;
+ }
+ }
+
+ sceditor.plugins.dragdrop = function () {
+ if (!isSupported) {
+ return;
+ }
+ // HACK: if #attachment_upload doesn't exist, we can't support attachments
+ if (document.getElementById('attachment_upload') == null) {
+ return;
+ }
+
+ var base = this;
+ var opts;
+ var editor;
+ var container;
+ var cover;
+ var placeholderId = 0;
+
+ // dynamic wrapper for the actual handleFile function
+ function handleFile(file, createPlaceholder) {
+ var opts = editor.opts.dragdrop || {};
+ if (opts.handleFile != null) {
+ opts.handleFile(file, createPlaceholder);
+ } else {
+ console.error("handleFile function missing!");
+ }
+ }
+
+ function hideCover() {
+ cover.style.display = 'none';
+ container.className = container.className.replace(/(^| )dnd( |$)/g, '');
+ }
+
+ function showCover() {
+ if (cover.style.display === 'none') {
+ cover.style.display = 'block';
+ container.className += ' dnd';
+ }
+ }
+
+ function isAllowed(file) {
+ // FF sets type to application/x-moz-file until it has been dropped
+ if (file.type !== 'application/x-moz-file' && opts.allowedTypes &&
+ opts.allowedTypes.indexOf(file.type) < 0) {
+ return false;
+ }
+
+ return opts.isAllowed ? opts.isAllowed(file) : true;
+ };
+
+ function createHolder(toReplace) {
+ var placeholder = document.createElement('img');
+ placeholder.src = loadingGif;
+ placeholder.className = 'sceditor-ignore';
+ placeholder.id = 'sce-dragdrop-' + placeholderId++;
+
+ function replace(html) {
+ var node = editor
+ .getBody()
+ .ownerDocument
+ .getElementById(placeholder.id);
+
+ if (node) {
+ if (typeof html === 'string') {
+ node.insertAdjacentHTML('afterend', html);
+ }
+
+ node.parentNode.removeChild(node);
+ }
+ }
+
+ return function () {
+ if (toReplace) {
+ toReplace.parentNode.replaceChild(placeholder, toReplace);
+ } else {
+ editor.wysiwygEditorInsertHtml(placeholder.outerHTML);
+ }
+
+ return {
+ insert: function (html) {
+ replace(html);
+ },
+ cancel: replace
+ };
+ };
+ }
+
+ function handleDragOver(e) {
+ var dt = e.dataTransfer;
+ var files = dt.files.length || !dt.items ? dt.files : dt.items;
+
+ for (var i = 0; i < files.length; i++) {
+ // Dragging a string should be left to default
+ if (files[i].kind === 'string') {
+ return;
+ }
+ }
+
+ showCover();
+ e.preventDefault();
+ }
+
+ function handleDrop(e) {
+ var dt = e.dataTransfer;
+ var files = dt.files.length || !dt.items ? dt.files : dt.items;
+
+ hideCover();
+
+ for (var i = 0; i < files.length; i++) {
+ // Dragging a string should be left to default
+ if (files[i].kind === 'string') {
+ return;
+ }
+
+ if (isAllowed(files[i])) {
+ handleFile(files[i], createHolder());
+ }
+ }
+
+ e.preventDefault();
+ }
+
+ base.signalReady = function () {
+ editor = this;
+ opts = editor.opts.dragdrop || {};
+
+ container = editor.getContentAreaContainer().parentNode;
+
+ cover = container.appendChild(sceditor.dom.parseHTML(
+ '<div class="sceditor-dnd-cover" style="display: none">' +
+ '<p>' + editor._('Drop files here') + '</p>' +
+ '</div>'
+ ).firstChild);
+
+ container.addEventListener('dragover', handleDragOver);
+ container.addEventListener('dragleave', hideCover);
+ container.addEventListener('dragend', hideCover);
+ container.addEventListener('drop', handleDrop);
+
+ editor.getBody().addEventListener('dragover', handleDragOver);
+ editor.getBody().addEventListener('drop', hideCover);
+ };
+
+ // signalPasteEvent is a DOM event passthrough, required for
+ // non-WYSIWYG pastes
+ base.signalPasteEvent = function (paste) {
+ var dt = paste.clipboardData;
+ var files = dt.files.length || !dt.items ? dt.files : dt.items;
+
+ if (!editor.inSourceMode()) {
+ // let signalPasteHtml deal with it
+ return;
+ }
+
+ if (!('handlePaste' in opts) || opts.handlePaste) {
+ // at this point, do the same thing as 'drop' events
+ for (var i = 0; i < files.length; i++) {
+ if (files[i].kind === 'string') {
+ return;
+ }
+
+ if (isAllowed(files[i])) {
+ // Can't create a placeholder in source mode!
+ handleFile(files[i], null);
+ }
+ }
+ }
+
+ paste.preventDefault();
+ };
+
+ base.signalPasteHtml = function (paste) {
+ if (!('handlePaste' in opts) || opts.handlePaste) {
+ var div = document.createElement('div');
+ div.innerHTML = paste.val;
+
+ var images = div.querySelectorAll('img');
+ for (var i = 0; i < images.length; i++) {
+ var image = images[i];
+
+ if (base64DataUri.test(image.src)) {
+ var file = base64DataUriToBlob(image.src);
+ if (file && isAllowed(file)) {
+ handleFile(file, createHolder(image));
+ } else {
+ image.parentNode.removeChild(image);
+ }
+ }
+ }
+
+ paste.val = div.innerHTML;
+ }
+ };
+ };
+})(sceditor);