Not happy with handleDragOver: https://jsfiddle.net/760gLx1s/
xse (1):
components/composer: handle drag and drop file upload
components/composer.js | 51 ++++++++++++++++++++++++++++++++++++------
1 file changed, 44 insertions(+), 7 deletions(-)
--
2.43.4
From: xse <xse@krkrkr.org>
---
components/composer.js | 51 ++++++++++++++++++++++++++++++++++++------
1 file changed, 44 insertions(+), 7 deletions(-)
diff --git a/components/composer.js b/components/composer.js
index eaa5659..7541903 100644
--- a/components/composer.js
+++ b/components/composer.js
@@ -24,7 +24,9 @@ export default class Composer extends Component {
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
+ this.handleFilesUpload = this.handleFilesUpload.bind(this);
this.handleInputPaste = this.handleInputPaste.bind(this);
+ this.handleDrop = this.handleDrop.bind(this);
this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this);
this.handleWindowPaste = this.handleWindowPaste.bind(this);
}
@@ -128,9 +130,9 @@ export default class Composer extends Component {
this.setState({ text: autocomplete.text });
}
- async handleInputPaste(event) {
+ async handleFilesUpload(fileList) {
let client = this.props.client;
- if (!event.clipboardData.files.length || !client || this.props.readOnly) {
+ if (!client || this.props.readOnly) {
return;
}
@@ -139,11 +141,8 @@ export default class Composer extends Component {
return;
}
- event.preventDefault();
- event.stopImmediatePropagation();
-
// TODO: support more than one file
- let file = event.clipboardData.files.item(0);
+ let file = fileList.item(0);
let auth;
if (client.params.saslPlain) {
@@ -182,7 +181,43 @@ export default class Composer extends Component {
throw new Error("filehost response missing Location header field");
}
- let uploadURL = new URL(loc, endpoint);
+ return new URL(loc, endpoint);
+ }
+
+ async handleInputPaste(event) {
+ if (!event.clipboardData.files.length) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopImmediatePropagation();
+
+ let uploadURL = await this.handleFilesUpload(event.clipboardData.files);
+
+ this.setState((state) => {
+ if (state.text) {
+ return { text: state.text + " " + uploadURL.toString() };
+ } else {
+ return { text: uploadURL.toString() };
+ }
+ });
+ }
+
+ handleDragOver(event) {
+ if (!([...event.dataTransfer.items].some(x=>x.type==='text/plain') && [...event.dataTransfer.items].some(x=>x.type==='text/html'))) {
+ event.preventDefault();
+ }
+ }
+
+ async handleDrop(event) {
+ if (!event.dataTransfer.files.length) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopImmediatePropagation();
+
+ let uploadURL = await this.handleFilesUpload(event.dataTransfer.files);
this.setState((state) => {
if (state.text) {
@@ -311,6 +346,8 @@ export default class Composer extends Component {
enterkeyhint="send"
onKeyDown=${this.handleInputKeyDown}
onPaste=${this.handleInputPaste}
+ onDragOver=${this.handleDragOver}
+ onDrop=${this.handleDrop}
maxlength=${this.props.maxLen}
/>
</form>
--
2.43.4