This repository has been archived by the owner on Feb 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 115
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #482 from aledavila/file-uploader-x
feat(file-uploader): add experimental file uploader
- Loading branch information
Showing
9 changed files
with
73 additions
and
2,252 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
--- | ||
label: Experimental | ||
title: File Uploader | ||
tabs: ['Code', 'Usage'] | ||
--- | ||
|
||
<page-intro>**File Uploader** allows the user to transfer a file or submit content of their own.</page-intro> | ||
|
||
<component | ||
name="File Uploader" | ||
component="file-uploader" | ||
variation="file-uploader" | ||
experimental="true" | ||
> | ||
</component> | ||
<component-docs component="file-uploader"></component-docs> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
--- | ||
label: Experimental | ||
title: File Uploader | ||
tabs: ['Code', 'Usage'] | ||
--- | ||
|
||
## General | ||
|
||
- A File Uploader is commonly found in forms, but they can also live as stand alone elements. | ||
- **Add files** is the default text that appears with the File Uploader. | ||
- A File Uploader should always be accompanied by **Submit** or **Upload**, which is to be styled as a [Secondary Button](/components/button). | ||
- Use an ellipsis (...) if the filename extends beyond the width of its parent element. | ||
|
||
## Basic interaction | ||
|
||
1. The user may select 1 or more files to upload at a time. By default, any file type is accepted, but you can add parameters to validate a specific file type. | ||
2. The action of clicking **Add files** will trigger a browser-specific upload window. | ||
3. Once the user chooses files to upload, the browser-specific upload window closes and the files will appear below the **Add files** button. | ||
4. User clicks **Submit** or **Upload** to submit their data. | ||
5. Any errors that may occur with the file should appear as an inline error | ||
[Notification](/components/notification). | ||
|
||
## Upload state | ||
|
||
Developers using File Uploader will be able to use JavaScript to inject a Loading component when selected files are actually being uploaded. | ||
|
||
## Removing files | ||
|
||
Developers will use JavaScript to inject a “close” button on each file that is selected to be uploaded. It's up to the developer to code the logic for removing these files individually. However, keep in mind that this kind of editing isn't supported natively in the browser. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<div class="bx--form-item"> | ||
<strong class="bx--file--label">Account photo</strong> | ||
<p class="bx--label-description">only .jpg and .png files. 500kb max file size.</p> | ||
<div class="bx--file" data-file> | ||
<label | ||
for="your-file-importer-id-here" | ||
class="bx--file-btn bx--btn bx--btn--primary bx--btn--sm" | ||
role="button" | ||
tabindex="0">Add file</label> | ||
<input | ||
type="file" | ||
class="bx--file-input" | ||
id="your-file-importer-id-here" | ||
data-file-uploader | ||
data-target="[data-file-container]" | ||
multiple | ||
/> | ||
<div data-file-container class="bx--file-container"></div> | ||
</div> | ||
</div> |