Uploading files

Uploading files in SynergiWeb revolves around data objects. You can derive the underlying datasource ID, upload new records and delete existing ones using hooks from @olenbetong/appframe-react.

Deriving the datasource ID

Every data object exposes the ID of its datasource. This value is needed when you call low-level APIs or want to log which datasource handled an upload.

const dataSourceId = dsProjectFiles.getDataSourceId();

Uploading files with useData

import { useData, useDragAndDropUpload } from "@olenbetong/appframe-react";

function ProjectFiles({ projectId }: { projectId: number }) {
  let files = useData(dsProjectFiles, `[ProjectID] = ${projectId}`);
  let { upload, status } = useDragAndDropUpload({
    dataObject: dsProjectFiles,
    fields: { ProjectID: projectId },
    validateFile(item) {
      return item.type.startsWith("image/");
    },
  });

  function handleFileChanged(e: React.ChangeEvent<HTMLInputElement>) {
    let file = e.target.files?.[0];
    if (file) upload([file]);
  }

  return (
    <>
      <input type="file" onChange={handleFileChanged} />
      <ul>
        {files.map((row) => (
          <li key={row.ID}>{row.FileName}</li>
        ))}
      </ul>
      {status.map((s) => (
        !s.complete && (
          <progress key={s.index} value={s.progress.loaded} max={s.progress.total} />
        )
      ))}
    </>
  );
}

Binding to the current row

Use useCurrentRow to bind form fields to the selected file record.

import { useCurrentRow } from "@olenbetong/appframe-react";

let file = useCurrentRow(dsProjectFiles);

<input
  value={file?.Label ?? ""}
  onChange={(e) => dsProjectFiles.currentRow("Label", e.target.value)}
/>

Deleting files

Deleting a file means deleting the selected row and refreshing the datasource.

await dsProjectFiles.deleteCurrentRow();
await dsProjectFiles.refreshDataSource();

Security and validation

• Validate files on the client with validateFile (type, size) and again on the server.

• Restrict datasource permissions so only authorized users can insert or delete records.

• Never trust file names or extensions—inspect content on the server before storing.