Skip to main content

Upload

The TkUpload component is an interface element that allows users to select and upload files from their devices to a server or a target location. It typically includes a "Choose File" button and a field displaying the selected file's name. This component simplifies the process of file selection and uploading.

import { TkUpload } from '@takeoff-ui/react'

Basic​

View Code
const handleFilesAccepted = (e) => {
  createToast({
    header: "Dosya eklendi",
    message: `${e.detail.length} dosya eklendi`,
    variant: "success",
    type: "outlined",
    timeout: 10000,
    removable: true,
  });
};
const handleUpload = (e) => {
  console.log(e.detail);
  createToast({
    header: "Dosya yüklendi",
    message: "Dosya yükleme başarılı.",
    variant: "success",
    type: "filled",
    timeout: 10000,
    removable: true,
  });
};
return (
  <TkUpload
    onTkFilesAccepted={handleFilesAccepted}
    onTkUpload={handleUpload}
  ></TkUpload>
);

State​

This demo showcases the disabled, invalid and loading states of the upload component.

View Code
<TkUpload disabled={true}></TkUpload>
<TkUpload invalid={true} error="This is an error message"></TkUpload>
<TkUpload loading={true}></TkUpload>

Accept​

This demo demonstrates the use of the accept prop to accept only PNG files for upload. By setting accept to "image/png", it restricts users to select only image files in PNG format. File types can be specified using MIME types or extensions separated by commas.

View Code
 const handleFilesAccepted = (e) => {
  createToast({
    header: "Dosya eklendi",
    message: `${e.detail.length} dosya eklendi`,
    variant: "success",
    type: "outlined",
    timeout: 10000,
    removable: true,
  });
};
const handleFilesRejected = (e) => {
  let errorMessage = e.detail
    ?.map((item) => item.reason + " " + item.file.name)
    .join("
");
  createToast({
    header: `${e.detail.length} dosya eklenemedi!`,
    message: errorMessage,
    variant: "success",
    type: "outlined",
    timeout: 10000,
    removable: true,
  });
};
return (
  <>
    <TkUpload
      accept="image/png"
      multiple
      onTkFilesAccepted={handleFilesAccepted}
      onTkFilesRejected={handleFilesRejected}
    ></TkUpload>
  </>
);

AutoUpload​

This demo demonstrates the use of autoUpload prop to automaticaly trigger tkUpload event when a new file is added.

View Code
const handleUpload = (e) => {
  console.log(e.detail);
  createToast({
    header: "Dosya yüklendi",
    message: "Dosya yükleme başarılı.",
    variant: "success",
    type: "filled",
    timeout: 10000,
    removable: true,
  });
};
return (
  <TkUpload
    autoUpload
    multiple
    onTkUpload={handleUpload}
  ></TkUpload>
);

Type​

This demo showcases the type prop of the upload component.

View Code
const handleChange= (e) => {
    createToast({
      header: 'Dosya eklendi',
      message: `${e.detail.length} dosya eklendi`,
      variant: 'success',
      type: 'outlined',
      timeout: 10000,
      removable: true,
    });
  };
  const handleUpload = (e) => {
    console.log(e.detail);
    createToast({
      header: 'Dosya yüklendi',
      message: `${e.detail.length} dosya yüklendi`,
      variant: 'success',
      type: 'filled',
      timeout: 10000,
      removable: true,
    });
  };
  return (
    <div>
      <TkUpload
        onTkChange={handleChange}
        onTkUpload={handleUpload}
      ></TkUpload>
      <TkUpload
        type="centered"
        onTkChange={handleChange}
        onTkUpload={handleUpload}
      ></TkUpload>
    </div>
  );

Upload API​

Props​

NameTypeDefaultDescription
string'*'Acceptable file types for upload. Use MIME types or extensions separated by commas.
booleanfalseIf autoUpload is set to true, the upload button will be hidden, and the tkUpload event will be automatically triggered for each newly added file.
string'ChooseFile'Label text displayed inside the choose button.
string'JPEG, PNG, PDFandMP4formats, upto50MB.'Description displayed under the title.
booleanfalseDisables the input, preventing user interaction.
booleanfalseIndicates whether the files can be downloaded. When true, a download button will be displayed next to each file.
booleantrueEnables drag and drop functionality for file uploads.
string'Releasetouploadfiles'Description displayed under the title when drag and drop is active.
string'Dropfileshere'Title displayed in the upload component when drag and drop is active.
stringnullProvided a error about the upload.
stringnullProvided a hint or additional information about the input.
booleanfalseIndicates whether the upload is in an invalid state, uploads will fail eventually
stringnullDefines the label of the upload area
booleanfalseIndicates whether the upload is in an loading state
numbernullMaximum allowed file count
numbernullMaximum allowed file size in bytes.
booleanfalseAllows multiple file selection.
booleanfalseDisplays a red asterisk (*) next to the label for visual emphasis.
booleantrueDisplays the uploaded files.
string'Chooseafileordrag&dropithere.'Title displayed in the upload component.
"centered", "default"'default'Type of the file upload area.
string'Upload'Label text displayed inside the upload button.
File[][]The file value of the upload.

Events​

NameDescription
tk-changeEmitted when one or more files pass validation.
tk-download-fileEmitted when a file is download button is clicked.
tk-files-rejectedEmitted when one or more files fail validation, with reasons.
tk-removed-fileEmitted when a file is removed from the accepted list.
tk-uploadEmitted when the user initiates file upload.