Rclone Web GUI v2.0 - testers req

Hey everyone,

I am happy to announce that the newer, faster and better version of rclone web-gui is now released in beta, it's still in its early stages, so I would really appreciate if you could test it out and give feedback so together, we can make it even better.

Highlights:

  1. New and redesigned UI.
  2. Support to control mounts from the GUI (requires atleast rclone v1.52.1.0-DEV ).
  3. Sorting of files and folders in Explorer with name/ size/ date modified etc.
  4. Faster loading of files.
  5. Some minor bug fixes and improvements.

Installing the beta version (v2.0.2):

rclone rcd --rc-web-gui --rc-web-fetch-url=https://api.github.com/repos/rclone/rclone-webui-react/releases/tags/v2.0.2 --rc-web-gui-update

If your web ui crashes for no reason, you may have to have to clear the local storage from the browser:

Screenshot from 2020-06-14 17-04-06

Right click the ip address and click delete all, then refresh the page.

If you need to go back to the latest stable version v0.1.0,

you can use

rclone rcd --rc-web-gui --rc-web-gui-force-update

You may have to clear the browser local storage if needed, after switching to the older version.

Alternatively, you can use the hosted version:

Head over to https://rclone.github.io/rclone-webui-react/. And enter the IP address, username and password of rclone rc server.

While running the rclone rc server, use the following command,

rclone rcd --rc-user=abc --rc-pass=abcd --rc-allow-origin="https://rclone.github.io" 

replace the username and password with your liking. If you are not comfortable with specifying it here, use the .htpasswd option.

rclone rcd --rc-allow-origin="https://rclone.github.io" --rc-htpasswd /path/to/.htpasswd
5 Likes

thanks,

i have a suggested improvement.

for the open new remote, there should be a per-populated drop down box that lists all the remotes,
or an option to press the down arrow and then display a list of all remotes.

Thank you for the suggestion. This is very much required.

sure, is this post the correct place for more comments?

Yes, please feel free to post here,
if you have some specific bug, I would really appreciate it if you create a new issue here: https://github.com/rclone/rclone-webui-react/issues, as it becomes easier to track.

thanks,

what is needed is a dual pane interface. like midnight commander.
press F5 to copy between panes.
Press F6 to move between panes.

also, using a web browser as the user interface means i cannot run your software locally.
i have a lot of window server 2019 hyper-v edition server , which is free.
has no gui, no windows explorer, no desktop, no ability to run a web browser.
however, the rclonebrowser does run on it well.
sure, i can tweak a firewall, connect via the ssh server but it is nice to be able to run software locally.

I am planning to release the webui to npm. So you should be able to use node to run the web gui without the rclone.

One thing you can do right now to connect to it, is to download the latest build for webui and then run it using a local server. I often use the python server for testing, by navigating to the extracted webui files, and running,

python -m "http.server"

This creates a local server which serves the webui.

One thing you need to allow while running the server on Windows server is to run with the --rc-allow-origin=local_address If you use the command above, you will use --rc-allow-origin=http://localhost:8000.

An even better alternative, if you don't mind using a remotely hosted web gui (on GitHub Pages).

Head over to https://rclone.github.io/rclone-webui-react/. This is the latest version of rclone-web-gui which is automatically created for every release.

For using this, you have to specify

--rc-allow-origin="https://rclone.github.io" --rc-user=abc --rc-pass=abcd

You need to specify the user and password because, you will have to enter it while logging in.
If you are not comfortable with specifying username and password here, you can use a htpasswd file.

1 Like

Interesting idea, we should discuss more about it

This should go in there GUI docs if it isn't there already!

1 Like

Yes. Will add that.

1 Like

This is definitely needed. My feedback is that the function keys aren't as required. To me we can move things between panes by dragging them but that isn't intuitive. Additionally, on mobile browsers you can't drag and drop with touch. It would be nice to have simple arrows between the two pane that you can copy or move.

Also the ability to multi-select (check boxes?) to select those items before using the arrows buttons (and delete buttons) would be a big navigational improvement.

It looks really nice though. Great work.

1 Like

This is awesome! Kudos man

1 Like

Thanks @calisro, this feature would help.

@negative0 -- looks great!

I'd like to collaborate on building a scheduler which would work with the GUI. Is that interesting to you? Is it something that would work with your GSoC 2020 plugin system? If this is interesting, I'll up in an idea with details.

Cheers,
Steve

That sounds like just the thing! I know @negative0 is looking for a guinea pig project to integrate as a plugin :slight_smile:

Hi @Stephen_Klosky. That's an interesting idea. We should discuss more over it. We can either try to implement it as a plugin, or we can integrate it into the main rclone-webui project itself. Looking forward to collaborating.

You can find the template for creating a plugin here. https://github.com/rclone/rclone-plugin-template

Great. I'll check out the template and let you know. :slight_smile:

Hi @negative0,

I checked out the template. It will take me a bit of time to learn the framework (react, rclone api, web ui config). The concept looks great. I have a couple questions.

How does an end user select/enable a plugin?
How is the plugin deployed at runtime?

Thanks,
Steve

@Stephen_Klosky Here are some instructions https://github.com/rclone/rclone-plugin-template/blob/master/GettingStarted.md.

The end user can enable the plugin using the web gui. The gui makes a call to the rclone backend, and then the backend downloads the plugin via the github repository specified in the package.json of the plugin. The compilation is done using a Github action.

Here are some examples:


The current development is going on in the plugins branch of rclone/rclone and rclone/rclone-webui-react.

the plugin infrastructure basically uses iframe to load the things. So for the plugin development, you can use any js frontend framework.