File Upload

Installation

import { FileUpload } from "@octopusdeploy/design-system-components"

Properties

Using the File Upload component

Import and use the FileUpload component from the @octopusdeploy/design-system-components package.

For example:

                                                        
                                                        
                                                            <FileUpload
                                                            onChange={onChange}
                                                            label="Upload file"
                                                            description="Select a file to upload"
                                                            error={error}
                                                        />
                                                        
                                                            

This will show a region where files can be dropped, and can also be clicked to open a file selection dialog.

Restricting file types

The acceptedFileTypes prop can be used to control the types of files that can be accepted. This is an array of file extension strings starting with a period e.g. [“.txt”, “.log”]

                                                        
                                                        
                                                            <FileUpload
                                                            onChange={onChange}
                                                            label="Upload file"
                                                            description="Select a file to upload"
                                                            error={error}
                                                            acceptedFileTypes={[".txt", ".log"]}
                                                        />
                                                        
                                                            

Restricting file size

The maxFileSizeBytes prop can be used to control the maximum size of accepted files.

                                                        
                                                        
                                                            <FileUpload
                                                            onChange={onChange}
                                                            label="Upload file"
                                                            description="Select a file to upload"
                                                            error={error}
                                                            maxFileSizeBytes={1024 * 1024}
                                                        />
                                                        
                                                            

Selecting multiple files

By default, only a single file can be selected. Selecting another file will override this selection.

To enable multiple files to be selected, set the filesLimit prop to the number of files allowed. Newly selected files will now be appended to the selection instead.

Form Descriptions

Form descriptions allow you to pass in a string, with the option to include an inline code descriptor or link. If you want to include a code descriptor or link you need to follow a particular format, this allows you to include as many links or code descriptors as you need while also ensuring a consistent application of styling and formatting.

For example:

                                                        
                                                        
                                                             descriptionText`Set ${descriptionCode("itemEnabled")} to true or see our ${descriptionLink("guide", "/docs/guide")} for more details.`,
                                                        
                                                            

The above code will render the following:

Adding a Popover to the label

This is used to display a Popover with more content explaining the context of a field. It should only be used when the Helper Text is not sufficient.

To include this you can pass the PopoverBasicHelp component to the popover prop, e.g.:

                                                        
                                                        
                                                            <FileUpload 
                                                          label="With Popover"
                                                          value="Popover"
                                                          popover={<PopoverBasicHelp placement="right-start" description="A popover" />}
                                                          onChange={handleChange} 
                                                        />
                                                        
                                                            

Code Sub-components

Sub-components are used to compose the Form components in the Design System, however they are not exposed via the design system package and therefore cannot be used on their own. Instead, use the packaged components we ship, e.g. TextField , etc.

Should you require changes to the sub components please reach out in #team-frontend-foundations-requests or follow the Contribution guidelines.