Components

File upload

Note: Component coming soon

We are still working on this component. We will release it soon, and we would appreciate your feedback then.

Example of File Upload

Code

Mustache / Handlebars// Developer note: ensure your ".mustache" files are imported as plain text. In Webpack you might use https://github.com/webpack-contrib/raw-loader import Mustache from "mustache"; import FileUpload from "@govtnz/ds/build/mustache/FileUpload.mustache"; // The variables FileUpload are all strings that are mustache templates. export default `${Mustache.render(FileUpload, {})}`;

React (JavaScript)import React from "react"; import FileUpload from "@govtnz/ds/build/react-js/FileUpload"; import "@govtnz/ds/build/css/FileUpload.css"; // or @govtnz/ds/build/scss/FileUpload.scss export default () => <FileUpload />;

React (TypeScript)import React from "react"; import FileUpload from "@govtnz/ds/build/react-ts/FileUpload"; import "@govtnz/ds/build/css/FileUpload.css"; // or @govtnz/ds/build/scss/FileUpload.scss export default () => <FileUpload />;

React with Styled Components (JavaScript)import React from "react"; import FileUpload from "@govtnz/ds/build/react-js-styled-components/FileUpload"; export default () => <FileUpload />;

React with Styled Components (TypeScript)import React from "react"; import FileUpload from "@govtnz/ds/build/react-ts-styled-components/FileUpload"; export default () => <FileUpload />;

Vue (JavaScript)<template> <file-upload /> </template> <script> import Vue from "vue"; import FileUpload from "@govtnz/ds/build/vue-js/FileUpload.vue"; export default { components: { "file-upload": FileUpload } }; </script>

Vue (TypeScript)<template> <file-upload /> </template> <script lang="ts"> import Vue from "vue"; import FileUpload from "@govtnz/ds/build/vue-ts/FileUpload.vue"; export default { components: { "file-upload": FileUpload } }; </script>

HTML <div class="g-fileUpload__form-group"> <label class="g-fileUpload__label"> Upload a file </label> <input class="g-fileUpload__input" type="file" /> </div>

Credit

Guidance, original HTML and CSS derived from GOV.UK Design System.

Get in touch

If you’ve got a question, idea, or suggestion, email the Design System (DS) team at info@digital.govt.nz, use our NZGDS Slack app, or discuss File upload on 'GitHub issues'.