Skip to content

Issue Report: Web UI Doesn't Forward Sort Parameters to API #568

Description

@Bharathboy1

Issue Report: Web UI Doesn't Forward Sort Parameters to API

Summary

The web UI at /share/ doesn't forward query parameters (sort, order, limit, cursor, path) to the backend API when fetching file listings, causing sorting and pagination to not work in the web interface.

Problem Description

When accessing a share URL with sorting parameters like:

https://demo.com/share/7ddc153a-c1db-49c7-858e-74d4675c9399?sort=size&order=desc&limit=1000

The web UI correctly receives these parameters but fails to forward them to the API endpoint /api/shares/{id}/files. This results in unsorted file listings regardless of the URL parameters.

Expected Behavior

The web UI should:

  1. Extract query parameters from the current URL
  2. Forward these parameters to API calls made to /api/shares/{id}/files
  3. Display files sorted according to the specified parameters

Actual Behavior

The web UI makes API calls to /api/shares/{id}/files without any query parameters, always returning the default sorted results (by name, ascending).

Steps to Reproduce

  1. Visit a share URL with sorting parameters: ?sort=size&order=desc&limit=1000
  2. Observe that files are not sorted by size in descending order
  3. Check browser network tab to see API calls to /api/shares/{id}/files without query parameters

Technical Details

Backend API Support

The backend API correctly supports all necessary query parameters: 1

The SharesListFiles function properly handles these parameters: 2

The API specification defines the supported parameters: 3

Frontend Issue

The frontend code (located in the separate teldrive-ui repository) needs to be modified to:

  1. Read URL parameters using URLSearchParams
  2. Forward relevant parameters to API calls

What Needs to Be Fixed

Location

The fix needs to be applied in the teldrive-ui repository (frontend code), not the main Teldrive repository. 4

Required Changes

Locate the component handling the /share/ route and modify it to:

// Extract parameters from current URL
const urlParams = new URLSearchParams(window.location.search);
const apiParams = new URLSearchParams();

// Forward relevant parameters
['sort', 'order', 'limit', 'cursor', 'path'].forEach(param => {
  if (urlParams.has(param)) {
    apiParams.set(param, urlParams.get(param));
  }
});

// Make API call with forwarded parameters
fetch(`/api/shares/${shareId}/files?${apiParams.toString()}`)

Workaround

Until the fix is implemented, users can access the API directly:

https://demo.com/api/shares/7ddc153a-c1db-49c7-858e-74d4675c9399/files?sort=size&order=desc&limit=1000

Notes

  • This is purely a frontend issue - the backend API works correctly
  • The frontend repository is separate from the main Teldrive repository
  • Look for components handling share routes or file listing in the teldrive-ui codebase
  • Consider implementing URL synchronization to keep browser URL in sync with sort state

Notes

  • The backend API already works correctly - this is purely a frontend issue
  • The frontend repository is separate from the main Teldrive repository (mentioned in CONTRIBUTING.md 4 )
  • Look for components handling share routes or file listing in the web UI codebase
  • Until fixed, you can use the API directly: /api/shares/{id}/files?sort=size&order=desc&limit=1000

Citations

File: openapi/openapi.yaml (L1434-1455)

  /shares/{id}/files:
    get:
      operationId: Shares_listFiles
      summary: List files in share
      parameters:
        - name: id
          in: path
          required: true
          schema:
            $ref: '#/components/schemas/UUID'
        - name: share_token
          in: cookie
          required: false
          schema:
            type: string
          explode: false
        - $ref: '#/components/parameters/ShareQuery.path'
        - $ref: '#/components/parameters/ShareQuery.sort'
        - $ref: '#/components/parameters/ShareQuery.order'
        - $ref: '#/components/parameters/ShareQuery.limit'
        - $ref: '#/components/parameters/ShareQuery.cursor'
        - $ref: '#/components/parameters/ShareQuery.page'

File: pkg/services/share.go (L159-176)

func (a *apiService) SharesListFiles(ctx context.Context, params api.SharesListFilesParams) (*api.FileList, error) {
	share, err := a.validFileShare(ctx, uuid.UUID(params.ID), params.ShareToken.Or(""))
	if err != nil {
		return nil, err
	}
	fileType := share.Type

	if fileType == api.FileShareInfoTypeFolder {
		qParams := repositories.FileQueryParams{
			UserID:    share.UserID,
			Operation: "list",
			Status:    "active",
			Path:      share.Path + params.Path.Or(""),
			Sort:      string(params.Sort.Value),
			Order:     string(params.Order.Value),
			Limit:     params.Limit.Value,
			Cursor:    params.Cursor.Value,
		}

File: typespec/main.tsp (L1354-1386)

model ShareQuery {
  @query
  @doc("Folder path")
  @example("/documents/2023/")
  path?: string;

  @query
  @doc("Sort field")
  @example("name")
  sort?: "name" | "updatedAt" | "size" | "id" = "name";

  @query
  @doc("Sort order")
  @example("asc")
  order?: "asc" | "desc" = "asc";

  @query
  @doc("Items per page")
  @example(50)
  @maxValue(1000)
  @minValue(1)
  limit?: integer = 500;

  @query
  @doc("Pagination cursor")
  cursor?: string;

  @query
  @doc("Page number")
  @example(1)
  @minValue(1)
  page?: integer = 1;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions