How SharePoint Differentiates Between Folders and Files in a SharePoint Library

When working with SharePoint document libraries, it’s common to deal with both folders and files. At first glance, they look similar in the UI, but under the hood, SharePoint treats them differently.

If you’re building a SharePoint Framework (SPFx) web part, understanding how to programmatically separate folders and files is critical for building custom file explorers, search components, or dashboards.

How SharePoint Distinguishes Folders and Files

Internally, every document library item has metadata. The key property that defines whether the item is a folder or a file is:

• FSObjType

  • 0- File

  • 1- Folder

Other helpful properties include:

• FileLeafRef: The display name (with extension for files, without extension for folders).

• File: Populated only for files.

• Folder: Populated only for folders.

Example with REST API

/_api/web/lists/getbytitle('Documents')/items?$select=Id,FileLeafRef,FSObjType

Response:

Id	FileLeafRef	FSObjType
1	Reports	1 (Folder)
2	Report1.docx	0 (File)
3	Report2.pdf	0 (File)

Example Using SPFx with PnP.js

The PnPjs library is widely used in SPFx solutions to interact with SharePoint data. You can easily fetch items and check whether they are folders or files.

import { sp } from "@pnp/sp/presets/all";

// Get library items and differentiate folders vs files
export const getLibraryItems = async (libraryName: string) => {
  try {
    const items: any[] = await sp.web.lists.getByTitle(libraryName).items
      .select("Id", "FileLeafRef", "FSObjType", "File/Name", "Folder/Name")
      .expand("File", "Folder")();

    // Separate folders and files
    const folders = items.filter(i => i.FSObjType === 1);
    const files = items.filter(i => i.FSObjType === 0);

    return { folders, files };
  } catch (err) {
    console.error("Error fetching items: ", err);
    return { folders: [], files: [] };
  }
};

Output

If your Documents library contains:

• Reports (folder)

• Report1.docx (file)

• Report2.pdf (file)

The output will be:

{
  "folders": [
    { "Id": 1, "FileLeafRef": "Reports", "FSObjType": 1 }
  ],
  "files": [
    { "Id": 2, "FileLeafRef": "Report1.docx", "FSObjType": 0 },
    { "Id": 3, "FileLeafRef": "Report2.pdf", "FSObjType": 0 }
  ]
}

Rendering in React (SPFx Web Part)

You can now render folders and then files, just like SharePoint’s native document library view.

import * as React from "react";

interface IItem {
  Id: number;
  FileLeafRef: string;
  FSObjType: number;
}

interface ILibraryViewProps {
  folders: IItem[];
  files: IItem[];
}

const LibraryView: React.FC<ILibraryViewProps> = ({ folders, files }) => {
  return (
    <div>
      <h3>Folders</h3>
      <ul>
        {folders.map(folder => (
          <li key={folder.Id}>{folder.FileLeafRef}</li>
        ))}
      </ul>

      <h3>Files</h3>
      <ul>
        {files.map(file => (
          <li key={file.Id}>{file.FileLeafRef}</li>
        ))}
      </ul>
    </div>
  );
};

export default LibraryView;

Why This Matters

• Helps you build custom file browsers in SPFx.

• Enables document management solutions where files and folders need different actions.

• Supports advanced scenarios like search filtering, metadata-based grouping, and document dashboards.

Conclusion

In SharePoint, the key differentiator between folders and files is the FSObjType property. By using PnPjs in SPFx, you can query libraries, filter items, and present them neatly in your custom web parts.

This allows developers to replicate or even enhance the native SharePoint document experience in custom solutions.