<button onclick="onDropboxImport()">Import From Dropbox</button>
<br>
<button onclick="onDropboxPrepare()">Prepare for Dropbox</button>
<br>
<button onclick="onDropboxExport()">Export Into Dropbox</button>

button {
  margin: 1em;
}

const dropboxAvailable = window.Dropbox.isBrowserSupported();
let exportData;

declare global {
  interface Window {
    Dropbox: {
      choose(options: any): void;
      save(options: any): void;
      isBrowserSupported(): boolean;
    };
  }
}

function readBlobPromise(blob: Blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onerror = function (error) {
      reject(error);
    };
    reader.onloadend = function () {
      resolve(reader.result);
    };
  });
}

async function onDropboxPrepare() {
  const cleanScript = { foo: "bar" };
  const jsonse = JSON.stringify(cleanScript);
  const blob = new Blob([jsonse], { type: "application/json" });
  const blobUrl = await readBlobPromise(blob);
  const options = {
    files: [
      {
        url: blobUrl,
        filename: "test.json"
      }
    ],
    success() {
      alert("Сохранено");
    },
    cancel() {
      alert("Отменено");
    },
    error(errorMessage: Error) {
      alert(errorMessage.message);
    }
  };
  exportData = options;
}

function onDropboxImport() {
  const options = {
    success(files: Array<{ link: string; name: string }>) {
      console.log(files);
      alert("Сохранено");
    },
    linkType: "direct",
    multiselect: false,
    extensions: [".json"],
    folderselect: false
  };
  window.Dropbox.choose(options);
}

function onDropboxExport() {
  if (exportData === undefined) {
    alert("Сначала нажмите Prepare for Dropbox");
    return;
  }
  try {
    window.Dropbox.save(exportData);
  } catch (errorMessage: Error) {
    console.error(errorMessage);
    alert(errorMessage.message);
  }
}