Latest version not replacing url on resolve of image uploader

Open
#413 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
angular, typescript
Domain
frontend

Research direction

Start with the image uploader callback shown in the issue and compare the earlier success/failure handler with the newer Promise-based handler. Verify how the resolved URL is consumed by the TinyMCE Angular integration, using the logged response URL and the hard-coded resolved URL as test cases. Done means the uploaded image URL is placed in the editor after the Promise resolves.

Written by the indexing model from the issue text.

Description

the below function was working fine

function (blobInfo, success, failure) {
const xhr = new XMLHttpRequest();
xhr.open('POST', ${environment.SITE_BASE_URL}filemanager/filemanager/upload.php);
xhr.onload = function () {
if (xhr.status !== 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
const json = JSON.parse(xhr.responseText);
if (!json?.files[0]?.url) {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json?.files[0]?.url);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR error');
};

    const formData = new FormData();
    formData.append('files[]', blobInfo.blob(), blobInfo.filename());
    formData.append('fldr', '');
    xhr.withCredentials = true;
    xhr.send(formData);
  }

In latest version I replace the above with below

(blobInfo, progress) => new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', ${environment.SITE_BASE_URL}filemanager/filemanager/upload.php);

      xhr.onload = () => {
        if (xhr.status !== 200) {
          reject('HTTP Error: ' + xhr.status);
          return;
        }

        const json = JSON.parse(xhr.responseText);
        console.log(json);
        if (!json?.files[0]?.url) {
          reject('Invalid JSON: ' + xhr.responseText);
          return;
        }

        console.log(json?.files[0]?.url);
        resolve('https://apiss.kualiteestaging.com/files/mceclip1.png');
      };

      xhr.onerror = (error) => {
        console.log(error);
        reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
      };

      const formData = new FormData();
      formData.append('fldr', '');
      formData.append('files[]', blobInfo.blob(), blobInfo.filename());

      xhr.send(formData);
    })

but on resolving the url is not getting placed but it was happening with first version. Is I am doing something wrong or missing or its abug

Dominant language
TypeScript
Stars
346
Forks
94
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from tinymce/tinymce-angular

All issues in tinymce/tinymce-angular

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.