1. Log in to the Kuika platform.
2. Open the project you will work on from the Apps screen.
3. Go to the UI Design module.

4. Select the Special category from the Elements panel on the left side.
5. Drag and drop the Big File Upload element into the workspace.

‍

• Chunk Size: This parameter allows large files to be divided into small pieces when uploaded to the server. It minimizes problems such as connection breaks, especially when uploading files of 100 MB or more. For example, if uploading in 10 MB chunks is set, the file is sent in 10 MB blocks and only the relevant part is reloaded in case of interruptions during upload. This not only balances network traffic but also makes the upload more stable. The Chunk Size setting is a critical parameter for the application's performance and user experience. The optimum value should be determined according to the file size and the internet speed of the target audience.
• Label: It is a short informative text explaining what the file upload area is used for. It clearly understands the type of file that needs to be uploaded and the expectations of the system. For example, a label that reads “Please upload your identity document” guides the user and prevents them from uploading the wrong file. Label text can be changed according to the use case of the application and should be clear enough to enhance the user experience.
• Hint: Text that provides hints or technical restrictions on the file upload process. It can include the file format, maximum size, or special upload instructions. For example, “You can only upload .pdf or .jpg files” or “You can upload up to 200 MB files”. It is positioned to appear in the upload area or just below the upload button and ensures that the process is completed smoothly.

File Upload Path (File Upload Directory) Setting

Follow the steps below to set the upload directory setting for file uploads:

1. Go to the Configuration Manager module.

2. Locate the File Upload Path field.

3. Type the server directory path where the files will be uploaded. (Example: /userUploads/)
4. Save the settings.

The file upload directory is defined via the File Upload Path setting in the Configuration Manager module. Dynamic file path setting is not done.

File Upload

It uploads large files selected or dragged and dropped by the client to the server in HTTP multipart/form-data format. The process is performed in chunk logic to optimize network performance and prevent data loss in case of possible outages.

• Drag and drop the file directly onto the element.
• The system splits the file into chunks according to the Chunk Size parameter (example: 10 MB).
• Each chunk is transmitted in turn to the server and stored in temporary memory.

• On Upload Finish action is triggered when the upload is complete. The following values are generated with this action and should be used for administration:
  
  • File ID (GUID): Unique ID assigned by the system to the uploaded file.
  • File Name: The original file name that the user uploaded.

The File ID must be stored in the database and all downloads and deletes must be managed through this ID. Otherwise, the file cannot be processed.

File Download

1. Click on the Big File Upload element.
2. Open the Properties panel on the right edge.

3. Select On Upload Finish → Device → Download File From Server from the+ADD ACTION menu.
4. Configure the following fields:

• File ID: Enter the unique ID number of the file to be downloaded. (Ex: “{{{uploadedFileId}}”)
• File Name: Specify a name for the file to be downloaded. The file will be downloaded to the user's device with this name (Ex: “Report_2024.pdf”)

If the File ID is missing or entered incorrectly, the system cannot find the file and the download will fail. The ID must be obtained and stored during the download.

When the download request is triggered:

• The system verifies the file with the specified File Path and File ID.
• The MIME type is checked and the file is transferred to the client over HTTP.
• The browser automatically downloads the file or offers the option to save it, depending on the user's settings.

Before the download is triggered, it must be checked whether the user has authorization over the file.

File Deletion

1. Click on the Big File Upload element.
2. Open the Properties panel on the right edge.

3. Select On Upload Finish → Device → Delete File From Server from the+ADD ACTION menu.
4. Configure the following fields:

• File ID: The unique ID number of the file to be deleted.

If File Path and File ID do not match, the file cannot be detected and the operation will fail. File ID must be saved after upload.

When the delete operation is triggered:

• The system verifies the file based on the File Path and File ID.
• When the verification is complete, the file is permanently deleted from the server.
• The deleted file cannot be recovered.

Before deletion, it must be checked that the file is not used in the system and is not referenced by other processes. Otherwise, system errors and data loss may occur.

By following this guide, you can use the Big File Upload element effectively in your application.

In a web application, users should be able to upload documents such as IDs, diplomas or certificates and then view, download and, if necessary, delete them. Documents should be stored in user-specific directories and process steps should be traceable through the system.

File upload

1. Click on the Big File Upload element.
2. In the Properties panel on the right side, in the Label field, type “Upload your document”.
3. Then in the Hint field type “You can only upload .pdf, .jpg or .png extensions. Max. size: 200 MB”.
4. When the upload is complete, the following actions are triggered:
   
   • File ID and File Name are retrieved from the system.
   • It is associated with the related record in the user table and saved to the database.

INSERT INTO user_documents (user_id, file_id, file_name, upload_date)VALUES ({{currentUser.userId}}, {{uploadedFileId}}, {{uploadedFileName}}, NOW());

The File ID will be the reference for all downloads and deletions. No action can be taken without saving.

File download

1. Add a Button element from the Elements panel on the left side.
2. In the Properties panel, type “Download Document” in the Label field.
3. Choose OnClick → Device → Download File From Server from the +ADD ACTION menu.
4. Edit the following field:
   
   • File ID: Enter the unique ID number of the file to download. (Ex: {{{selectedDocument.file_id}})

File deletion

1. Add a Button element from the Elements panel on the left edge.
2. In the Properties panel, type “Delete Document” in the Label field.
3. Choose OnClick→ Device → Delete File From Server from the +ADD ACTION menu.
4. Edit the following field:
   
   • File ID: Enter the unique ID number of the file to be downloaded. (Ex: {{{selectedDocument.file_id}}})

The user must be presented with a confirmation screen before deletion. The deleted file cannot be recovered.

This example scenario is using Big File Upload;

• File upload,
• File-based data recording,
• Secure downloads and deletions,
• Authorization and user control is provided.

Authorization

To manage access control at the element level, you can use the Authorization section in the Properties panel.

Access Types

Anonymous

Allows all users to view the element without logging in.

Restricted

Restricts access to only verified users or specific roles.

• Everyone: When enabled, all logged-in users can access the element.
• Roles: The roles allowed to access the element are selected here. To edit the role list, click the gear (⚙️) icon next to the Roles field to open the Role Management window. From this window, you can add new roles, create folders, or manage existing roles.

Unauthorized Behavior (Hide / Disable)

If the user does not have the required role, you can specify how the element should behave in the Choose field:

• Hide: If the user is not authorized, the element is completely hidden and does not appear on the screen.
• Disable: The element remains visible but becomes unclickable / unusable.

This setting is used to manage how unauthorized users encounter the element.

Visibility

• Always Visible: Element is always visible.
• Hidden: Element is hidden.
• Sometimes Visible: The element is visible depending on a specific condition.

To configure the setting:

1. Select the element on the screen.
2. Open the Properties panel on the right edge.
3. In the Visibility field, select an option according to your needs.

Editability

• Enabled: Elements can be edited.
• Disabled: Element cannot be edited.
• Sometimes Enabled: The element can be edited or uneditable according to certain conditions.

Interface Design with Style Panel

By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:

• Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
• Text: Font, style, color, size and spacing settings.
• Fill: Customize the background with color or images.
• Border: Add borders and corner radius settings.
• Shadow: Add a shadow effect to add depth to elements.

By following these steps, you can configure the Area Chart element to suit your needs.