diff --git a/routes/_actions/media.js b/routes/_actions/media.js
new file mode 100644
index 00000000..35e50cb9
--- /dev/null
+++ b/routes/_actions/media.js
@@ -0,0 +1,23 @@
+import { store } from '../_store/store'
+import { uploadMedia } from '../_api/media'
+import { toast } from '../_utils/toast'
+
+export async function doMediaUpload(file) {
+ let instanceName = store.get('currentInstance')
+ let accessToken = store.get('accessToken')
+ store.set({uploadingMedia: true})
+ try {
+ let response = await uploadMedia(instanceName, accessToken, file)
+ let mediaToUpload = store.get('mediaToUpload') || []
+ mediaToUpload.push({
+ data: response,
+ file: file
+ })
+ store.set({ mediaToUpload })
+ } catch (e) {
+ console.error(e)
+ toast.say('Failed to upload media: ' + (e.message || ''))
+ } finally {
+ store.set({uploadingMedia: false})
+ }
+}
\ No newline at end of file
diff --git a/routes/_api/media.js b/routes/_api/media.js
new file mode 100644
index 00000000..5fe76587
--- /dev/null
+++ b/routes/_api/media.js
@@ -0,0 +1,9 @@
+import { auth, basename } from './utils'
+import { postWithTimeout } from '../_utils/ajax'
+
+export async function uploadMedia (instanceName, accessToken, file) {
+ let formData = new FormData()
+ formData.append('file', file)
+ let url = `${basename(instanceName)}/api/v1/media`
+ return postWithTimeout(url, formData, auth(accessToken))
+}
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html
index cd931a87..938d76ac 100644
--- a/routes/_components/compose/ComposeBox.html
+++ b/routes/_components/compose/ComposeBox.html
@@ -4,6 +4,7 @@
+
+
\ No newline at end of file
diff --git a/routes/_components/compose/ComposeToolbar.html b/routes/_components/compose/ComposeToolbar.html
index bcd7c71a..88d56a25 100644
--- a/routes/_components/compose/ComposeToolbar.html
+++ b/routes/_components/compose/ComposeToolbar.html
@@ -29,6 +29,7 @@
import { store } from '../../_store/store'
import { updateCustomEmojiForInstance } from '../../_actions/emoji'
import { importDialogs } from '../../_utils/asyncModules'
+ import { doMediaUpload } from '../../_actions/media'
export default {
components: {
@@ -46,6 +47,7 @@
},
onFileChange(e) {
let file = e.target.files[0]
+ doMediaUpload(file)
}
}
diff --git a/routes/_utils/ajax.js b/routes/_utils/ajax.js
index 533430f2..14bc6d23 100644
--- a/routes/_utils/ajax.js
+++ b/routes/_utils/ajax.js
@@ -24,11 +24,14 @@ async function _post (url, body, headers, timeout) {
method: 'POST'
}
if (body) {
- opts.headers = Object.assign(headers, {
+ let isFormData = body instanceof FormData
+ opts.headers = Object.assign(headers, isFormData ? {
+ 'Accept': 'application/json'
+ } : {
'Accept': 'application/json',
'Content-Type': 'application/json'
})
- opts.body = JSON.stringify(body)
+ opts.body = isFormData ? body : JSON.stringify(body)
} else {
opts.headers = Object.assign(headers, {
'Accept': 'application/json'
diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss
index 6c3a0892..9c1edd0f 100644
--- a/scss/themes/_base.scss
+++ b/scss/themes/_base.scss
@@ -69,4 +69,5 @@
--status-direct-background: darken($body-bg-color, 5%);
--main-theme-color: $main-theme-color;
--warning-color: #e01f19;
+ --alt-input-bg: rgba($main-bg-color, 0.7);
}
diff --git a/templates/2xx.html b/templates/2xx.html
index 8954f53a..f288e27e 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -10,9 +10,9 @@