KendoReact Upload Overview

import { useState } from "react";
import "./App.scss";
import {
  Upload,
  UploadFileInfo,
  UploadHttpHeaders,
  UploadOnAddEvent,
  UploadOnBeforeRemoveEvent,
  UploadOnBeforeUploadEvent,
  UploadOnProgressEvent,
  UploadOnRemoveEvent,
  UploadOnStatusChangeEvent,
} from "@progress/kendo-react-upload";

export const App = () => {
  const token: string = "your token";
  const saveUrl: string =
    "https://demos.telerik.com/kendo-ui/service-v4/upload/save";
  const removeUrl: string =
    "https://demos.telerik.com/kendo-ui/service-v4/upload/remove";

  const [files, setFiles] = useState<Array<UploadFileInfo>>([]);

  const saveHeader: UploadHttpHeaders = {};
  saveHeader["x-access-token"] = token || "";

  const removeHeader: UploadHttpHeaders = {};
  removeHeader["x-access-token"] = token || "";

  const onAdd = (event: UploadOnAddEvent) => {
    console.log("onAdd: ", event.affectedFiles);
    setFiles(event.newState);
  };

  const onRemove = (event: UploadOnRemoveEvent) => {
    console.log("onRemove: ", event.affectedFiles);
    setFiles(event.newState);
  };

  const onProgress = (event: UploadOnProgressEvent) => {
    console.log("onProgress: ", event.affectedFiles);
    setFiles(event.newState);
  };

  const onStatusChange = (event: UploadOnStatusChangeEvent) => {
    console.log("onStatusChange: ", event.affectedFiles);
    setFiles(event.newState);
  };

  const onBeforeUpload = (event: UploadOnBeforeUploadEvent) => {
    console.log("onBeforeUpload: ", event);
    event.additionalData.description = "File upload";
  };

  const onBeforeRemove = (event: UploadOnBeforeRemoveEvent) => {
    console.log("onBeforeRemove: ", event);
    event.additionalData.description = "File remove";
  };

  return (
    <Upload
      autoUpload={true}
      batch={false}
      multiple={true}
      restrictions={{
        allowedExtensions: [".jpg", ".png"],
        maxFileSize: 4000000,
        minFileSize: 500000,
      }}
      defaultFiles={[]}
      withCredentials={false}
      onAdd={onAdd}
      onRemove={onRemove}
      onProgress={onProgress}
      onStatusChange={onStatusChange}
      onBeforeUpload={onBeforeUpload}
      onBeforeRemove={onBeforeRemove}
      saveHeaders={saveHeader}
      removeHeaders={removeHeader}
      saveUrl={saveUrl}
      removeUrl={removeUrl}
    />
  );
};