> For the complete documentation index, see [llms.txt](https://docs-old.zus.network/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-old.zus.network/guides/zus-js-sdk/js-sdk-sample-app/describing-code-1/adding-file-operation-functionalities.md).

# Adding File Operation Functionalities

<details>

<summary>File Operation Functions</summary>

{% code lineNumbers="true" %}

```javascript
  const handleUploadFiles = async (event) => {
    console.log("handleUploadFiles", event.currentTarget.files);
    setFilesForUpload(event.currentTarget.files);
  };

  const uploadClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation for upload");
      return;
    }
    if (!(filesForUpload && filesForUpload.length > 0)) {
      alert("Please select the files for upload");
      return;
    }
    console.log(
      "uploading to allocation",
      selectedAllocation.id,
      filesForUpload
    );
    if (filesForUpload && filesForUpload.length > 0) {
      const objects = [];
      const allocationId = selectedAllocation.id;
      for (const file of filesForUpload) {
        objects.push({
          allocationId: allocationId,
          remotePath: `/${file.name}`,
          file: file,
          thumbnailBytes: null,
          encrypt: false,
          isUpdate: false,
          isRepair: false,
          numBlocks: 100,
          callback: function (totalBytes, completedBytes, error) {
            console.log(
              file.name +
                " " +
                completedBytes +
                "/" +
                totalBytes +
                " err:" +
                error
            );
          },
        });
      }

      const results = await bulkUpload(objects);

      console.log("upload results", JSON.stringify(results));
    }
  };

  const downloadClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation for download");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for download");
      return;
    }
    console.log(
      "downloading from allocation",
      selectedAllocation.id,
      selectedFile.path
    );
    //allocationID, remotePath, authTicket, lookupHash string, downloadThumbnailOnly bool, numBlocks int
    const file = await download(
      selectedAllocation.id,
      selectedFile.path,
      "",
      "",
      false,
      10
    );
    console.log("downloaded file", file);

    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";

    a.href = file.url;
    a.download = file.fileName;
    a.click();
    window.URL.revokeObjectURL(file.url);
    document.body.removeChild(a);
  };

  const shareClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation for share");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for share");
      return;
    }
    console.log("share file", selectedAllocation.id, selectedFile.path);
    //allocationId, filePath, clientId, encryptionPublicKey string, expireAt int, revoke bool,availableAfter string
    const authTick = await share(
      selectedAllocation.id,
      selectedFile.path,
      "",
      "",
      0,
      false,
      0
    );
    console.log("authTicket", authTick);
    setAuthTicket(authTick);
  };

  const downloadSharedClick = async () => {
    if (authTicket) {
      console.log("downloading using authTicket", authTicket);

      //allocationID, remotePath, authTicket, lookupHash string, downloadThumbnailOnly bool, numBlocks int
      const file = await download("", "", authTicket, "", false, 10);
      console.log("downloaded file", file);

      const a = document.createElement("a");
      document.body.appendChild(a);
      a.style = "display: none";
      a.href = file.url;
      a.download = file.fileName;
      a.click();
      window.URL.revokeObjectURL(file.url);
      document.body.removeChild(a);
    }
  };

  const listFilesClick = async () => {
    try {
      const list = (await listObjects(selectedAllocation.id, "/")) || [];
      console.log("file list", list);
      setFilesList(list);
    } catch (error) {
      console.log("error:", error);
    }

    try {
      const destList =
        (await listObjects(selectedAllocation.id, "/test")) || [];
      console.log("dest file list", destList);
      setDestFilesList(destList);
    } catch (error) {
      console.log("error:", error);
    }
  };

  const selectFile = (file) => {
    setSelectedFile(file);
    console.log("selected file", file);
  };

  const showLogsClick = async () => {
    await showLogs();
  };

  const hideLogsClick = async () => {
    await hideLogs();
  };

  const getAppendedFileName = (filename, postfix) => {
    const isExtnExist = filename.lastIndexOf(".") > 0;
    const newFileName = isExtnExist
      ? filename.substring(0, filename.lastIndexOf(".")) +
        postfix +
        filename.substring(filename.lastIndexOf("."), filename.length)
      : filename + postfix;
    console.log("getAppendedFileName", newFileName);
    return newFileName;
  };

  const copyClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for copy");
      return;
    }
    console.log("copy file", selectedAllocation.id, selectedFile.path);
    //allocationId, path, destination
    await copyObject(selectedAllocation.id, selectedFile.path, "/test");
    console.log("copy completed");
  };

  const moveClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for move");
      return;
    }
    console.log("move file", selectedAllocation.id, selectedFile.path);
    //allocationId, path, destination
    await moveObject(selectedAllocation.id, selectedFile.path, "/test");
    console.log("move completed");
  };

  const deleteClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for delete");
      return;
    }
    console.log("delete file", selectedAllocation.id, selectedFile.path);
    //allocationId, path
    await deleteObject(selectedAllocation.id, selectedFile.path);
    console.log("delete completed");
  };

  const renameClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for rename");
      return;
    }
    console.log("rename file", selectedAllocation.id, selectedFile.path);
    //allocationId, path, newName
    await renameObject(
      selectedAllocation.id,
      selectedFile.path,
      getAppendedFileName(selectedFile.path, "_new")
    );
    console.log("rename completed");
  };

  let player;

  let isPlayerReady = false;

  const playClick = async () => {
    player = document.getElementById("player");
    if (!selectedAllocation) {
      alert("Please select allocation");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for play");
      return;
    }
    console.log("playing file", selectedAllocation.id, selectedFile.path);

    if (isPlayerReady) {
      if (player.paused) {
        player.play();
      }
    } else {
      const file = selectedFile;
      console.log("playing file", file);
      const isLive = file.type == "d";

      if (file) {
        const allocationId = selectedAllocation.id;
        startPlay({
          allocationId,
          videoElement: player,
          remotePath: file?.path,
          authTicket: "",
          lookupHash: file?.lookup_hash,
          mimeType: file?.mimetype,
          isLive: isLive,
        });
        isPlayerReady = true;
      }
    }
  };

  const playSharedClick = async () => {
    player = document.getElementById("player");

    if (isPlayerReady) {
      if (player.paused) {
        player.play();
      }
    } else {
      const isLive = false;

      if (authTicket) {
        const allocationId = selectedAllocation.id;
        startPlay({
          allocationId,
          videoElement: player,
          remotePath: "",
          authTicket: authTicket,
          lookupHash: "",
          mimeType: "",
          isLive: isLive,
        });
        isPlayerReady = true;
      }
    }
  };

  const pauseClick = async () => {
    player.pause();
  };

  const stopClick = async () => {
    if (isPlayerReady) {
      stopPlay({ videoElement: player });
      isPlayerReady = false;
    }
  };

  const createDirClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation");
      return;
    }
    console.log("create Dir", selectedAllocation.id, dirName);
    //allocationId, path
    await createDir(selectedAllocation.id, "/" + dirName);
    console.log("create Dir completed");
  };

  const getFileStatsClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for file stats");
      return;
    }
    console.log("getting file stats", selectedAllocation.id, selectedFile.path);
    const fileStats = await getFileStats(
      selectedAllocation.id,
      selectedFile.path
    );
    console.log("file stats completed", fileStats);
  };

  const downloadBlocksClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation for download blocks");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for download blocks");
      return;
    }
    console.log(
      "downloading blocks from allocation",
      selectedAllocation.id,
      selectedFile.path
    );
    //allocationID, remotePath, authTicket, lookupHash string, numBlocks int, startBlockNumber, endBlockNumber int64, callbackFuncName string
    const output = await downloadBlocks(
      selectedAllocation.id,
      selectedFile.path,
      "",
      "",
      10,
      0,
      10
    );
    console.log("downloaded blocks", output);
  };

const getLookupHashClick = async () => {
    if (!selectedAllocation) {
      alert("Please select allocation");
      return;
    }
    if (!selectedFile) {
      alert("Please select the file for lookup hash");
      return;
    }
    console.log("lookup hash file", selectedAllocation.id, selectedFile.path);
    //allocationId, path
    const hash = await getLookupHash(selectedAllocation.id, selectedFile.path);
    console.log("lookup hash completed", hash);
  };
```

{% endcode %}

</details>

Line 1 to 385 defines the file operation functionalities of web app :

* handleUploadFiles : A helper function for selecting files to upload .
* uploadClick : Upload file on click.Calls js-sdk [bulkUpload ](/guides/zus-js-sdk/sdk-reference.md#bulkupload)function.Provide allocation and files for upload as input.
* downloadClick : Download file on click, Calls js-sdk[ ](/guides/zus-js-sdk/sdk-reference.md#download)[download](/guides/zus-js-sdk/sdk-reference.md#download) function.
* shareClick : Share file on click.Calls js-sdk [share](/guides/zus-js-sdk/sdk-reference.md#share) function.
* downloadSharedClick : Download shared file functionality.Calls js-sdk [download](/guides/zus-js-sdk/sdk-reference.md#share) function.Download for shared file is done via authticket which is generated with shareClick function defined above.
* listFilesClick : List files in an allocation on click. Calls js-sdk [listObjects ](/guides/zus-js-sdk/sdk-reference.md#listobjects)function by passing valid allocation and directory in allocation.
* &#x20;getAppendedFileName : A helper function for listing file name in theweb app.
* copyClick : Copy file in an allocation . Calls js-sdk [listObjects ](/guides/zus-js-sdk/sdk-reference.md#listobjects)function by passing valid allocation name and local file path name.
* moveClick : Move file between directories in an allocation. Calls js-sdk [moveObject ](/guides/zus-js-sdk/sdk-reference.md#moveobject)function by passing valid allocation and directory path in allocation.
* deleteClick : Delete files in an allocation.Calls js-sdk [deleteObject](/guides/zus-js-sdk/sdk-reference.md#deleteobject) function by passing valid allocation and path for file to delete.
* renameClick : Rename file in an allocation.Calls js-sdk [renameObject](/guides/zus-js-sdk/sdk-reference.md#renameobject) function.&#x20;
* playClick: A helper function for playing  a selected file in an allocation.
* playSharedClick: A helper function for playing a shared file in an allocation
* pauseClick: A helper function for pausing the file play.
* stopClick: A helper function for stopping the file play.
* createDirClick : Create Directory in an allocation.Calls js-sdk [createDir](/guides/zus-js-sdk/sdk-reference.md#createdir) function.
* getFileStatsClick : Get File Stats on click .Calls js-sdk [getFileStats](/guides/zus-js-sdk/sdk-reference.md#getfilestats) function.
* downloadBlocksClick : Download files by block . Calls js-sdk [downloadBlocks](/guides/zus-js-sdk/sdk-reference.md#downloadblocks) function.
* getLookupHashClick: Get Lookup Hash for a File.Calls js-sdk [getLookupHash](/guides/zus-js-sdk/sdk-reference.md#getlookuphash) function.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs-old.zus.network/guides/zus-js-sdk/js-sdk-sample-app/describing-code-1/adding-file-operation-functionalities.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.