Feature Request: FileInput Component for Handling Customer File Uploads

[NeuroticCoder91]

Please list the related package(s)

checkout-ui-extensions/-react

If this related to specific APIs or components, please list them here

Is your feature request related to a problem? Please describe.

I want to be able to handle file uploads from customers in particular to collect review images.

Describe the changes you are looking for

Looking to have a FileInput component created to handle file uploads from a Form submission. Something like the following:

import { createRemoteComponent } from '@remote-ui/core';

/**
 * This component can be used within your Shopify UI extension, providing an interface for 
 * users to upload files. The actual handling of the file upload (sending the file to a server, 
 * processing it, etc.) would be managed in your application logic, separate from the UI 
 * component definition.
 */

export interface FileInputProps {
    /**
     * A unique identifier for the field. When no `id` is set,
     * a globally unique value will be used instead.
    */
  id?: string;
  name?: string;

  /**
   * `acceptedFileTypes` is an array of strings indicating the types of files that can be uploaded. 
   * For instance, `['image/jpeg', 'image/png']` for accepting JPEG and PNG images.
   */
  acceptedFileTypes?: string[];

  /**
   * `multiple` allows multiple files to be selected if true.
   */
  multiple?: boolean;

  /**
   * `disabled` is a boolean indicating whether the file input is interactive.
   */
  disabled?: boolean;

  /**
   * `required` makes the file input mandatory for form submission if true.
   */
  required?: boolean;

  /**
   * `error` is a string used to display any error message related to the file input.
   * When set, the file input will be given a specific stylistic treatment to communicate
   * problems that have to be resolved immediately.
   */
  error?: string;

  /**
   * `accessibilityLabel` provides a label for assistive technologies. When set, any
   * `children` supplied to this component will not be announced to screen reader users.
   */
  accessibilityLabel?: string;

  /**
   * `onChange` is a callback function that is called when a file is selected or when 
   * the selection is cleared. It passes either the `File` object of the selected file or `null` 
   * if no file is selected.
   */
  onChange?(file: File | null): void;
}

/**
 * Use FileInput to allow customers to upload files. This component provides an interface
 * for file selection and can handle various file types as specified in the `acceptedFileTypes` prop.
 */
export const FileInput = createRemoteComponent<'FileInput', FileInputProps>('FileInput');

Describe alternatives you’ve considered

The host is not available so we cannot create our own mapping for custom components for obvious reasons. Hoping this can push the needle towards creating this capability.

Additional context

Now, that I mocked up an image using Polaris perhaps DropZone would be the more appropriate name, but ultimately it is a file handler component.

Would love to get involved in any way!

[belalsj]

Hello @NeuroticCoder91,

Thank you for submitting this feature request! This is already in our roadmap.

Keep the suggestions coming, they're always welcome.

[gil--]

@belalsj Any idea if this is on the roadmap for Checkout or TY page? There's a few use-cases for uploading documents on B2B as well as for custom orders that require drawings.

[NiklasGlz]

@belalsj May you give us a rough estimate of when we can expect this feature to be released?

[TheSecurityDev]

@belalsj Will this be available for Admin UI Extensions as well?

[luco]

+1 on this