Overview
The file upload component is a Vue component that has been created to be compatible with FormKit’s schema approach to form building, it can be used to provide a more user-friendly file upload experience than the regular file input type.
Basic usage
Importing the component
Import the component, styling and FormKit dependencies for creating a custom input
import { createInput, plugin, defaultConfig } from "@formkit/vue";
import { DsFileUpload, fkFileUploadProps } from "@coloplast/design-system";
import "@coloplast/design-system/components/formkit/formkit.css";
import "@coloplast/design-system/components/file-upload/ds-file-upload.css";
Global configuration
In order to use the file upload component in FormKit you need to register the component as an custom input and include it in the FormKit configuration used by your application.
// Create the input type - the type is being registered as "fileupload"
// The props are also provide via the package as fkFileUploadProps, include them here:
const FkFileUpload = createInput(DsFileUpload, {
forceTypeProp: "fileupload",
props: fkFileUploadProps,
});
// When you register the FormKit plugin in your Vue app, you can pass in the newly defined
// file upload component to make it available to the application.
app.use(
plugin,
defaultConfig({
inputs: {
fileupload: FkFileUpload,
}
}),
);
Example usage
Once you’ve registered the component with FormKit, you can use it just like any other FormKit input, either via standalone FormKit components, or via FormKit schema.
<FormKit
type="fileupload"
help="Should be ___ format, and less than __MB"
id="file"
label="Upload a file"
name="file"
></FormKit>
Component playground and props
Here’s an interactive example of the component from Storybook, to explore and test out the props look at the ‘Controls’ tab on the story.
Or alternatively, view the File Upload docs in Storybook.
Accessibility
The File upload component builds on the native HTML <input type="file"> element. It includes a visual button as well as a drag and drop area that can receive keyboard focus.
- To upload a file with the keyboard, users can interact with the drag-and-drop region.
- To give the input keyboard focus, use the tab key (or shift + tab when tabbing backwards)
- To activate the input, use the enter/return or space keys
All buttons and actions have configurable accessible labels and can be accessed via keyboard navigation.
The help text provided is also associated with the file input via aria-describedby.
Internationalisation
All labels can be managed via props allowing for multilingual environments.
The component has been created and tested to support right-to-left languages.