Skip to main content

File uploader

The File Uploader component is a crucial tool for applications that require users to upload files, facilitating the transfer of documents, images, and other data into the system. This component is particularly useful for applications that handle user-generated content, document management, or data import functionalities. By using the File Uploader, businesses can streamline the process of collecting and storing files, ensuring that they are securely managed within the application's media library. This component enhances user experience by providing a straightforward and efficient interface for file uploads, supporting a wide range of file types and sizes.

Properties​

To effectively utilize the File Uploader component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the File Uploader component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
  • Upload Controls:
    • Start Upload: A button that initiates the file upload process, allowing users to begin transferring files to the application.
    • Maximum Number of Uploads: Specifies the maximum number of files that can be uploaded in a single session (default is 1). This setting helps manage server load and user expectations.
    • Maximum File Size: Defines the maximum allowable size for each file being uploaded (default is 1 MB). This ensures that files are manageable and do not exceed storage or processing capabilities.
  • Performance and Security Settings:
    • Concurrent Upload Amount: Determines the number of files that can be uploaded simultaneously (default is 1). This setting optimizes upload performance and resource utilization.
    • Allowed File Types: Specifies the file types that are permitted for upload, defined by their extensions. This input validation is crucial for security, preventing unauthorized or harmful files from being uploaded. Supported file types include: .gif, .jpeg, .png, .svg, .webp, .csv, .json, .xml, .doc, .docx, .pdf, .gzip, .zip, .md.

By structuring the File Uploader component with these attributes, businesses can create a secure and user-friendly interface that effectively manages file uploads. The ability to control upload parameters and validate file types ensures that the component remains a powerful tool for enhancing application functionality and user experience.

Style​

Best Practices​

  • User Guidance: Clearly indicate where users can drag and drop files. Use visual cues like borders and background colors to define the drop zone.
  • Feedback and Accessibility: Provide immediate feedback when a file is uploaded, such as a progress bar or confirmation message. Ensure the uploader is accessible by using labels and tooltips.
  • Consistency: Maintain a consistent style with other UI elements, such as buttons and input fields, to create a cohesive user experience.

Highest Value Features​

  • Dropzone Customization: Customizing the dropzone's appearance can enhance user interaction by making it clear and inviting.
  • Button Styling: Well-styled upload buttons improve usability and encourage user interaction.
  • Responsive Design: Ensure the file uploader adapts well to different screen sizes, enhancing usability across devices.

All the Settings​

Border​

  • Border Options: Customize the border style, width, and color to define the outline and separation of the file uploader and its components.

Padding​

  • Padding Options
    • Icon: Adjust padding for all sides, top, left, bottom, right.
    • Size: Set in pixels using up and down arrows or by entering a numeric value.

Background​

  • Normal and On Hover Options:
    • Background Color:
      • Color: Color picker or enter values in HEX, RGBA, HSLA format.
    • Image: OR “select an image” from the media library OR “http” have it referred to an online image.
    • Background Attachment: Options include scroll, fixed, local, initial, inherit.
    • Background Position X/Y: Expressed in pixels (arrow up or down, or number), shift of the background regarding the X-axis (horizontal shift) and Y-axis (vertical shift).
    • Background Repeat: Options include repeat (horizontal and vertical), repeat-x (horizontal repeat), repeat-y (vertical repeat), no-repeat (based upon position one instance), initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Background Size: Options include auto (autofit the size to the element), length, cover, contain, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Background Origin: Options include border-box, padding-box, content-box, initial (inherits the browser’s default), inherit (inherit from the parent element).

File​

  • File Border: Customize the border of the file display area using “BORDER OPTIONS”.
  • File Padding: Adjust the padding within the file display area using “PADDING OPTIONS”.
  • File Margin: Set the margin around the file display area using “MARGIN OPTIONS”.
  • File Background: Customize the background of the file display area using “BACKGROUND OPTIONS”.
  • File Font: Customize the font of the file name and details using “FONT OPTIONS”.

Dropzone​

  • Dropzone Border: Customize the border of the dropzone using “BORDER OPTIONS”.
  • Dropzone Padding: Adjust the padding within the dropzone using “PADDING OPTIONS”.
  • Dropzone Margin: Set the margin around the dropzone using “MARGIN OPTIONS”.
  • Dropzone Background: Customize the background of the dropzone using “BACKGROUND OPTIONS”.
  • Dropzone Font: Customize the font of the dropzone instructions using “FONT OPTIONS”.

Button​

  • Button Border: Customize the border of the upload button using “BORDER OPTIONS”.
  • Button Padding: Adjust the padding within the upload button using “PADDING OPTIONS”.
  • Button Margin: Set the margin around the upload button using “MARGIN OPTIONS”.
  • Button Background: Customize the background of the upload button using “BACKGROUND OPTIONS”.
  • Button Font: Customize the font of the button text using “FONT OPTIONS”.

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively.

This style guide provides a comprehensive overview of the styling options available for the File Uploader component in NoCode-X, ensuring users can create visually appealing and functional designs.

Event: On Upload​

  • This action is executed whenever a file is uploaded by using the File uploader.
  • It allows for processing an upload of a file.

Compatible functions​

  • Convert markdown to a file
  • Convert video to an audio file
  • Convert pdf to text
  • Open media
  • Get media
  • Generate data from csv
  • Delete a file from an ftp
  • Get files from folder
  • Upload files to folder
  • Delete all media
  • Delete media
  • Create pdf from docx