fix: corrected image upload handling in TinyMCE (#2497)

thorsten · Jun 11, 2023 · b4b3d75 · b4b3d75
1 parent 8bab2d2
commit b4b3d75
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 24 deletions.
diff --git a/phpmyfaq/admin/api/image.php b/phpmyfaq/admin/api/image.php
@@ -70,7 +70,7 @@
             }
 
             // Accept upload if there was no origin, or if it is an accepted origin
-            $fileName = $timestamp . $temp['name'];
+            $fileName = $timestamp . '_' . $temp['name'];
             move_uploaded_file($temp['tmp_name'], $uploadDir . $fileName);
 
             // Respond to the successful upload with JSON with the full URL of the uploaded image.

diff --git a/phpmyfaq/admin/assets/src/content/editor.js b/phpmyfaq/admin/assets/src/content/editor.js
@@ -189,29 +189,37 @@ export const renderEditor = () => {
       },
 
       // override default upload handler to simulate successful upload
-      images_upload_handler: (blobInfo, success, failure) => {
-        const csrf = document.getElementById('pmf-csrf-token').value;
-        const formData = new FormData();
-        formData.append('file', blobInfo.blob(), blobInfo.filename());
-
-        fetch(`index.php?action=ajax&ajax=image&ajaxaction=upload&csrf=${csrf}`, {
-          method: 'POST',
-          body: formData,
-        })
-          .then(async (response) => {
-            if (response.status === 200) {
-              return response.json();
-            }
-            failure('HTTP Error: ' + response.status);
+      images_upload_handler: (blobInfo) =>
+        new Promise((resolve, reject) => {
+          const csrf = document.getElementById('pmf-csrf-token').value;
+          const formData = new FormData();
+          formData.append('file', blobInfo.blob(), blobInfo.filename());
+
+          fetch(`index.php?action=ajax&ajax=image&ajaxaction=upload&csrf=${csrf}`, {
+            method: 'POST',
+            body: formData,
+            //credentials: 'omit'
           })
-          .then((response) => {
-            if (!response || typeof response.location !== 'string') {
-              failure('Invalid JSON: ' + response.responseText);
-              return;
-            }
-            success(response.location);
-          });
-      },
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error('HTTP Error: ' + response.status);
+              }
+              return response.json();
+            })
+            .then((json) => {
+              if (!json || typeof json.location != 'string') {
+                throw new Error('Invalid JSON: ' + JSON.stringify(json));
+              }
+              resolve(json.location);
+            })
+            .catch((error) => {
+              if (error instanceof TypeError) {
+                reject('Image upload failed due to a Fetch error: ' + error.message);
+              } else {
+                reject(error.message);
+              }
+            });
+        }),
 
       // Custom params
       csrf: document.getElementById('pmf-csrf-token').value,

diff --git a/yarn.lock b/yarn.lock
@@ -2924,7 +2924,7 @@ bootstrap-datepicker@^1.9.0:
   dependencies:
     jquery ">=3.4.0 <4.0.0"
 
-bootstrap@^5.3.0-alpha1:
+bootstrap@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.0.tgz#0718a7cc29040ee8dbf1bd652b896f3436a87c29"
   integrity sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==