[FEATURE REQUEST] Make Windows "Open With.." Dialog Load the Image

[ghost]

Checklist

• [X] I have checked that this issue isn't addressed in the FAQ.
• [X] I have checked that this issue isn't addressed in any other issue or pull request.

Related Problem(s)

Right-clicking an image in Windows and selecting open with Upscayl only opens the app, it does not load the image.

Description

App should open with the selected image loaded.

Alternatives

No response

[NayamAmarshe]

That won't be possible for now. I cannot spend my time on a Windows only feature. Electron builder does not seem to support file associations for MacOS and Linux, so unfortunately, I'd have to mark this as unplanned.

PRs are always welcome though, if someone wants to, they can submit a PR for the feature.

[aaronliu0130]

@NayamAmarshe I don't think this is asking for a file association, I think it's when the file is opened with upscayl (which i think is processed as 'upscayl/upscayl.exe "file name.jpg"') the image gets automatically loaded into the select image button

[NayamAmarshe]

@NayamAmarshe I don't think this is asking for a file association, I think it's when the file is opened with upscayl (which i think is processed as 'upscayl/upscayl.exe "file name.jpg"') the image gets automatically loaded into the select image button

That requires file association feature I believe.

[aaronliu0130]

The user can just browse their file manager in the open with-other screen and select anya pp and it gets passed as an argument I believe.

[NayamAmarshe]

Okay, I'll take a look.

[ghost]

Precisely. It doesn't need to get added to a context menu in Windows or anything. It just needs to support a Windows standard executable launch option that has the location of the file to load on startup when going via "Open with" in the right click menu of an image file in Windows explorer.

[aaronliu0130]

I just tested it and in Windows it indeed just passes the file to be opened as the first argument. Reopening for now while NayamAmarshe hasn't stopped looking

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aaronliu0130]

As a vanilla JS person who only learned React today, the only thing I currently see blocking me from implementing this is the inability to affect the TSX file in index.ts, where arguments are handled. I've tried import and "jsx": "react" (with importing react in the TSX) but it still says Module '../renderer/pages/index' was resolved to 'c:/Users/aaron/Git/upscayl/renderer/pages/index.tsx', but '--jsx' is not set. I really need ideas...

[aaronliu0130]

A few months ago I tried to do this. It's quite a bit harder than I expected and would require us to make the upscayling functions more modular to allow for an alternative entry point.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If this is still happening, please reply to indicate so.

[Cyboroz]

Hi! I asked copilot ... and after a few interaction it came to the suggestion to at least configure the electron setup script in the portion for windows, that's package.json and add some lines so it should become: "win": { "publisherName": "Upscayl Team", "target": [ "nsis", "zip" ], "icon": "build/icon.png", "fileAssociations": [ { "ext": ".png", "name": "Image PNG" }, { "ext": ".jpg", "name": "Image JPEG" } ] }

Then... the windows automagic association should be created... So it would be a matter of populating the "image" field with the first argument passed to the executable.

Again.. copilot suggest to...

To process the first command-line argument and use it to populate the "select image" field, follow these steps:

1. Modify Argument Parsing:

   • Update electron/utils/get-arguments.ts to extract the first command-line argument as the selected image path.

2. Update Image Selection Logic:

   • Modify electron/commands/select-file.ts to handle the command-line provided image path.

3. Integrate with UI:

   • Update the relevant UI components, such as renderer/components/sidebar/settings-tab/select-image-scale.tsx, to use the provided image path.

Step 1: Modify Argument Parsing

In electron/utils/get-arguments.ts, add a function to get the first command-line argument:

export const getCliImagePath = () => {
  const args = process.argv.slice(1);
  return args.length > 0 ? args[0] : null;
};

Step 2: Update Image Selection Logic

In electron/commands/select-file.ts, modify the selectFile function to use the CLI image path if available:

import { getCliImagePath } from "../utils/get-arguments";

const selectFile = async () => {
  const mainWindow = getMainWindow();
  const cliImagePath = getCliImagePath();

  if (cliImagePath) {
    setSavedImagePath(cliImagePath);
    return cliImagePath;
  }

  // existing logic for file dialog selection
  const { canceled, filePaths } = await dialog.showOpenDialog({
    properties: ["openFile"],
    title: "Select Image",
    defaultPath: savedImagePath,
    filters: [
      {
        name: "Images",
        extensions: ["png", "jpg", "jpeg", "jfif", "webp"],
      },
    ],
  });

  if (canceled) {
    logit("🚫 File Operation Cancelled");
    return null;
  } else {
    setSavedImagePath(filePaths[0]);
    return filePaths[0];
  }
};

export default selectFile;

Step 3: Integrate with UI

In renderer/components/sidebar/settings-tab/select-image-scale.tsx, update the component to use the selected image path:

import { useEffect, useState } from "react";
import { getCliImagePath } from "../../../electron/utils/get-arguments";

export function SelectImageScale({ scale, setScale, hideInfo }) {
  const [imagePath, setImagePath] = useState("");

  useEffect(() => {
    const cliImagePath = getCliImagePath();
    if (cliImagePath) {
      setImagePath(cliImagePath);
    }
  }, []);

  return (
    <div>
      {imagePath && <p>Selected Image: {imagePath}</p>}
      <div className={`${useCustomWidth && "opacity-50"}`}>
        {/* existing UI logic */}
      </div>
    </div>
  );
}

These modifications will allow the application to process the first command-line argument as the selected image path and update the "select image" field accordingly.

@aaronliu0130 : I hope this tip is helpful.