右键图片文件Upload无响应，后台可见TypeError

[Louisredstone]

I have tried the following

• Tried using the latest version
• Read the documentation and searched the issues

System Information

Windows 11, Obsidian 1.8.10, This plugin 4.1.0.

Steps to Reproduce

如图：

选中一个图片文件，单击右键菜单中的Upload。

Expected Behavior

自动抓取反向链接，找到所有引用到该图片的位置，自动上传图片，并修改所有链接位置。由于正确上传文件，PicGo/PicList应给出上传成功之提示，且图床应能看到新图片。

Actual Behavior

无响应，使用Ctrl+Shift+I启动Obsidian开发者右边栏，可见报错信息：

"Uncaught TypeError: Cannot read properties of null (reading 'getValue')"

PicGo/PicList和图床亦无变化。

[Louisredstone]

本人也简单开发过obsidian插件，该问题常见于插件代码本身的语法BUG，可能的原因是obsidian的API有变迁，而插件的对应代码没有及时更新。

本人将尝试自行修复并提交pull requests.

[Louisredstone]

关键函数:

src/main.ts > imageAutoUploadPlugin.registerFileMenu

  registerFileMenu() {
    this.registerEvent(
      this.app.workspace.on(
        "file-menu",
        (menu: Menu, file: TFile, source: string, leaf) => {
          if (source === "canvas-menu") return false;
          if (!isAssetTypeAnImage(file.path)) return false;

          menu.addItem((item: MenuItem) => {
            item
              .setTitle(t("upload"))
              .setIcon("upload")
              .onClick(() => {
                if (!(file instanceof TFile)) {
                  return false;
                }
                this.fileMenuUpload(file);
              });
          });
        }
      )
    );
  }

src/main.ts > imageAutoUploadPlugin.fileMenuUpload

  fileMenuUpload(file: TFile) {
    let imageList: Image[] = [];
    const fileArray = this.helper.getAllFiles();

    for (const match of fileArray) {
      const imageName = match.name;
      const encodedUri = match.path;

      const fileName = basename(decodeURI(encodedUri));

      if (file && file.name === fileName) {
        if (isAssetTypeAnImage(file.path)) {
          imageList.push({
            path: file.path,
            name: imageName,
            source: match.source,
            file: file,
          });
        }
      }
    }

    if (imageList.length === 0) {
      new Notice(t("Can not find image file"));
      return;
    }

    this.upload(imageList).then(res => {
      if (!res.success) {
        new Notice("Upload error");
        return;
      }

      let uploadUrlList = res.result;
      this.replaceImage(imageList, uploadUrlList);
    });
  }

其中fileMenuUpload的功能设计有问题. 根据目前版本的插件的实际表现可知, 选中单个图像文件会出现这个upload按钮, 选中单个markdown文件不会出现, 选中多个文件也不会出现. 因此, fileMenuUpload的作用应为 "上传单个图像文件并更新与之相关的链接".
然而实际上fileMenuUpload的函数体内部开头有:

const fileArray = this.helper.getAllFiles();

其中this.helper.getAllFiles()的功能是 "抓取打开的editor之中所有的图片链接, 包括本地链接和网络链接".

src/helper.ts > Helper.getAllFiles

  // get all file urls, include local and internet
  getAllFiles(): Image[] {
    const editor = this.getEditor();
    let value = editor.getValue();
    return this.getImageLink(value);
  }

src/helper.ts > Helper.getEditor

  getEditor() {
    const mdView = this.app.workspace.getActiveViewOfType(MarkdownView);
    if (mdView) {
      return mdView.editor;
    } else {
      return null;
    }
  }

此处有两个问题:

• 1, 主要问题: 场景和功能完全不对, 左侧文件目录选中图像文件, 此时obsidian应聚焦在文件目录area, 因此active view并非markdown view, 于是此时getEditor()内部this.app.workspace.getActiveViewOfType()得到的必定是null, 而后执行editor.getValue()时触发typeError. 就算右侧有打开的markdown editor, 那和选中的图片也不存在必然联系. 总之此处的逻辑是很混乱的.
• 2, 次要问题: getAllFiles这个命名很不直观, 应该叫getAllFileUrlsInEditor或其他类似名称.

考虑到上述原因, 此处大概只能推翻重写, 出错的这部分原代码没有保留的价值了.

[renmu123]

其实是你理解错误，其实这个功能压根不支持在文件目录上传单个图片，设计是用来在md中上传图片，至于为什么出现了这个按钮，大概是bug

[Louisredstone]

其实是你理解错误，其实这个功能压根不支持在文件目录上传单个图片，设计是用来在md中上传图片，至于为什么出现了这个按钮，大概是bug

@renmu123 作者你好. 我对这个功能的确有误解, 看了代码之后我明白了. 原功能旨在于editor中右键显示这个上传按钮, 在文件列表右键菜单中出现这个按钮的确是BUG, 看起来像是obsidian某次API变化导致的.

不过, 考虑到本插件 image upload 的定位, 我认为在文件列表中右键上传的功能还是有意义的. 比如我原先在本地assets存了很多图片, 最近才开始迁移到云上, 如果手动一个个来上传的话非常麻烦. 而如果能按文件上传的话, 可以自动批量修改所有反向链接, 节约的时间还是很可观的. 而且 "上传" 二字出现在文件列表的右键菜单中, 的确容易引人误解, 此问题确有修复之必要.

我已经自行修复并提交 pull request, 详见: #178
其中修复了显示异常的bug, 并添加了在文件列表中批量上传图片的新功能. 至于具体是否合并到master分支, 全权交给你判断 :-)