Create file in selected folder

Creates a file in the selected folder and opens it in the editors.

Before you start

Please make sure you are using a server environment to run the HTML file because the JavaScript SDK must be launched on the server. You need to add the URL of your server's root directory to the Developer Tools section of DocSpace.

Step 1. Set HTML structure

Create an HTML file. Add a combo box, a text field, and a button. The HTML file must include a div tag where we specify the DocSpace connection parameters:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DocSpace JavaScript SDK</title>
        <style>
            .holder {
                margin: auto;
                width: 800px;
            }
        </style>
        <script src="{PORTAL_SRC}/static/scripts/sdk/1.0.0/api.js"></script>
    </head>
    <body>
        <div id="holder-buttons" class="holder" style="width: 400px; margin-top: 300px;">
            <label for="combobox"><b>Folders</b></label><br />
            <select id="combobox" onclick="onComboboxClick()" style="height: 25px; width: 405px;"></select><br />
            <label for="fileName"><b>File name</b></label><br />
            <input type="text" id="fileName" name="fileName" value="" style="width: 400px;"><br />
            <button onclick="onButtonClick()" style="margin-top: 20px;">Create File</button>
        </div>
        <div id="holder-frame" class="holder" style="display: none;">
            <div id="ds-frame"></div>
        </div>
    </body>
</html>

The API JavaScript file can normally be found in the following DocSpace folder: {PORTAL_SRC}/static/scripts/sdk/1.0.0/api.js where {PORTAL_SRC} is the name of the server with the ONLYOFFICE DocSpace installed.

Step 2. Initialize the Manager mode

Add a script to initialize the Manager mode.

Add an event handler for onAppReady, which fires when initialization is successful:

function onAppReady() {
  const frame = DocSpace.SDK.frames["ds-frame"]
}

Create a configuration for the Manager mode. In the rootPath field, specify the section whose directories you want to display:

const config = {
  events: {
    onAppReady,
  },
  rootPath: "/rooms/personal/",
  height: "700px",
}

Initialize the Manager mode with the initManager method:

const docSpace = DocSpace.SDK.initManager(config)

Step 3. Upload a list of folders to the combo box

Add the onComboboxClick() event handler for the combo box. Using the getFolders method, upload the list into the combo box:

const combobox = document.querySelector("#combobox").value
function onComboboxClick(e) {
  const data = await frame.getFolders()
  for (const item of data) {
    const option = document.createElement("option")
    option.value = item.id
    option.textContent = item.title
    combobox.append(option)
  }
}

Step 4. Add a method to create a file

Add the onButtonClick() event handler for the button. Using the createFile method, create a file in the selected folder:

function onButtonClick() {
  const frame = DocSpace.SDK.frames["ds-frame"]
  const selectedFolder = document.querySelector("#combobox").value
  const fileName = document.querySelector("#fileName").value

  const res = await frame.createFile(selectedFolder, fileName)
  const docSpace = DocSpace.SDK.initEditor({
    id: res.id,
    height: "700px",
  })

  document.querySelector("#holder-buttons").style.display = "none"
  document.querySelector("#holder-frame").style.display = "block"
}

Step 5. Run the sample

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>DocSpace JavaScript SDK</title>
    <script src="{PORTAL_SRC}/static/scripts/sdk/1.0.0/api.js"></script>
    <style>
      .holder {
        margin: auto;
        width: 800px;
      }
    </style>
    ...
  </head>
  <body>
    <div id="holder-buttons" class="holder" style="width: 400px; margin-top: 300px;">
      <label for="combobox"><b>Folders</b></label><br />
      <select id="combobox" onclick="onComboboxClick()" style="height: 25px; width: 405px;"></select><br />
      <label for="fileName"><b>File name</b></label><br />
      <input type="text" id="fileName" name="fileName" value="" style="width: 400px;"><br />
      <button onclick="onButtonClick()" style="margin-top: 20px;">Create File</button>
    </div>
    <div id="holder-frame" class="holder" style="display: none;">
      <div id="ds-frame"></div>
    </div>
    ...
  </body>
  <script>
    const combobox = document.querySelector("#combobox")

    function onAppReady() {
      const frame = DocSpace.SDK.frames["ds-frame"]
    }

    const config = {
      events: {
        onAppReady,
      },
      rootPath: "/rooms/personal/",
      height: "700px",
    }

    function onComboboxClick(e) {
      const data = await frame.getFolders()
      for (const item of data) {
        const option = document.createElement("option")
        option.value = item.id
        option.textContent = item.title
        combobox.append(option)
      }
    }

    function onButtonClick() {
      const frame = DocSpace.SDK.frames["ds-frame"]
      const selectedFolder = document.querySelector("#combobox").value
      const fileName = document.querySelector("#fileName").value

      const res = await frame.createFile(selectedFolder, fileName)
      const docSpace = DocSpace.SDK.initEditor({
        id: res.id,
        height: "700px",
      })

      document.querySelector("#holder-buttons").style.display = "none"
      document.querySelector("#holder-frame").style.display = "block"
    }

    const docSpace = DocSpace.SDK.initManager(config)
  </script>

Get Help

If you have any questions about ONLYOFFICE DocSpace, try the FAQ section first.
You can request a feature or report a bug by posting an issue on GitHub.
You can also ask our developers on ONLYOFFICE forum (registration required).