JS & TypeScript

Control Rclone from JavaScript and TypeScript using the remote control HTTP API.

JavaScript and TypeScript can interact with Rclone's remote control API using the native fetch API or libraries like Axios.

Make sure to configure CORS properly if calling the API from a browser.

Usage

Using the native fetch API:

fetch('http://localhost:5572/')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Or with async/await:

const response = await fetch('http://localhost:5572/');
const data = await response.json();
console.log(data);

Using Axios:

import axios from 'axios';

const response = await axios.get('http://localhost:5572/');
console.log(response.data);

Libraries

rclone-sdk

rclone-sdk is a fully typed SDK for the remote control API, built from its OpenAPI description, so the endpoints and their request and response shapes are checked by the TypeScript compiler. It works with plain fetch, React Query and SWR.

npm install rclone-sdk
import createRCDClient from 'rclone-sdk'

const rcd = createRCDClient({ baseUrl: 'http://localhost:5572' })

// List all configured remotes
const { data: remotes } = await rcd.POST('/config/listremotes')
console.log(remotes?.remotes) // ['gdrive', 'dropbox', 's3']

// List files in a remote
const { data: files } = await rcd.POST('/operations/list', {
  body: { fs: 'gdrive:', remote: 'Documents' }
})
console.log(files?.list)

// Get storage info for a remote
const { data: about } = await rcd.POST('/operations/about', {
  body: { fs: 'gdrive:' }
})
console.log(`Used: ${about?.used} / ${about?.total}`)

With React Query:

import createRCDQueryClient from 'rclone-sdk/query'

const rq = createRCDQueryClient({ baseUrl: 'http://localhost:5572' })

function RemotesList() {
  const { data, isLoading, error } = rq.useQuery('post', '/config/listremotes')

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {data?.remotes?.map(remote => (
        <li key={remote}>{remote}</li>
      ))}
    </ul>
  )
}

How is this guide?