forked from carbon-design-system/carbon
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New single drag and drop single
FileUploader (carbon-design-system#…
…14660) * feat: added new story * chore: working tooltip without style * chore: working upload file without style * feat: tooltip styling on progress * fix: fixed loading in the state * feat: added style for replace box * chore: improving the code * test: added test to fileUploaderItem * chore: added css to fix layout movement after upload * fix: removed replace functionality * fix: added breakpoint and ellipse to FF * fix: fixed width * fix: fixed styles * fix: fixed styling * fix: change pixel --------- Co-authored-by: Andrea N. Cardona <[email protected]>
- Loading branch information
1 parent
8b22597
commit 5ca370b
Showing
5 changed files
with
325 additions
and
29 deletions.
There are no files selected for viewing
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
171 changes: 171 additions & 0 deletions
171
packages/react/src/components/FileUploader/stories/drag-and-drop-single.js
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,171 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2016, 2023 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import React, { useState, useEffect, useRef } from 'react'; | ||
| import classnames from 'classnames'; | ||
| import FileUploaderItem from '../FileUploaderItem'; | ||
| import FileUploaderDropContainer from '../FileUploaderDropContainer'; | ||
| import FormItem from '../../FormItem'; | ||
|
|
||
| // import uid from '../../../tools/uniqueId'; | ||
| import '../FileUploader-story.scss'; | ||
|
|
||
| const prefix = 'cds'; | ||
|
|
||
| // -- copied from internal/tools/uniqueId.js | ||
| let lastId = 0; | ||
| function uid(prefix = 'id') { | ||
| lastId++; | ||
| return `${prefix}${lastId}`; | ||
| } | ||
| // -- end copied | ||
|
|
||
| const ExampleDropContainerApp = (props) => { | ||
| const [file, setFile] = useState(); | ||
| const uploaderButton = useRef(null); | ||
| const handleDrop = (e) => { | ||
| e.preventDefault(); | ||
| }; | ||
|
|
||
| const handleDragover = (e) => { | ||
| e.preventDefault(); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| document.addEventListener('drop', handleDrop); | ||
| document.addEventListener('dragover', handleDragover); | ||
| return () => { | ||
| document.removeEventListener('drop', handleDrop); | ||
| document.removeEventListener('dragover', handleDragover); | ||
| }; | ||
| }, []); | ||
|
|
||
| const uploadFile = async (fileToUpload) => { | ||
| // file size validation | ||
| if (fileToUpload[0].filesize > 512000) { | ||
| const updatedFile = { | ||
| ...fileToUpload[0], | ||
| status: 'edit', | ||
| iconDescription: 'Delete file', | ||
| invalid: true, | ||
| errorSubject: 'File size exceeds limit', | ||
| errorBody: '500kb max file size. Select a new file and try again.', | ||
| }; | ||
| setFile(updatedFile); | ||
| return; | ||
| } | ||
|
|
||
| // file type validation | ||
| if (fileToUpload.invalidFileType) { | ||
| const updatedFile = { | ||
| ...fileToUpload[0], | ||
| status: 'edit', | ||
| iconDescription: 'Delete file', | ||
| invalid: true, | ||
| errorSubject: 'Invalid file type', | ||
| errorBody: `"${fileToUpload.name}" does not have a valid file type.`, | ||
| }; | ||
| setFile(updatedFile); | ||
| return; | ||
| } | ||
|
|
||
| // simulate network request time | ||
| const rand = Math.random() * 1000; | ||
| setTimeout(() => { | ||
| const updatedFile = { | ||
| ...fileToUpload[0], | ||
| status: 'complete', | ||
| iconDescription: 'Upload complete', | ||
| }; | ||
| setFile(updatedFile); | ||
| }, rand); | ||
|
|
||
| // show x icon after 1 second | ||
| setTimeout(() => { | ||
| const updatedFile = { | ||
| ...fileToUpload[0], | ||
| status: 'edit', | ||
| iconDescription: 'Delete file', | ||
| }; | ||
| setFile(updatedFile); | ||
| }, rand + 1000); | ||
| }; | ||
|
|
||
| const onAddFilesButton = (event) => { | ||
| const file = event.target.files; | ||
|
|
||
| const newFile = [ | ||
| { | ||
| uuid: uid(), | ||
| name: file[0].name, | ||
| filesize: file[0].size, | ||
| status: 'uploading', | ||
| iconDescription: 'Uploading', | ||
| invalidFileType: file[0].invalidFileType, | ||
| }, | ||
| ]; | ||
|
|
||
| setFile(newFile[0]); | ||
| uploadFile([newFile[0]]); | ||
| }; | ||
|
|
||
| const handleFileUploaderItemClick = () => { | ||
| setFile(); | ||
| }; | ||
|
|
||
| const labelClasses = classnames(`${prefix}--file--label`, { | ||
| // eslint-disable-next-line react/prop-types | ||
| [`${prefix}--file--label--disabled`]: props.disabled, | ||
| }); | ||
|
|
||
| const helperTextClasses = classnames(`${prefix}--label-description`, { | ||
| // eslint-disable-next-line react/prop-types | ||
| [`${prefix}--label-description--disabled`]: props.disabled, | ||
| }); | ||
|
|
||
| return ( | ||
| <FormItem> | ||
| <p className={labelClasses}>Upload files</p> | ||
| <p className={helperTextClasses}> | ||
| Max file size is 500kb. Supported file types are .jpg and .png. | ||
| </p> | ||
| {file === undefined && ( | ||
| <FileUploaderDropContainer | ||
| {...props} | ||
| onAddFiles={onAddFilesButton} | ||
| innerRef={uploaderButton} | ||
| /> | ||
| )} | ||
|
|
||
| <div | ||
| className={classnames( | ||
| `${prefix}--file-container`, | ||
| `${prefix}--file-container--drop` | ||
| )}> | ||
| {file !== undefined && ( | ||
| <FileUploaderItem | ||
| key={uid()} | ||
| uuid={file.uuid} | ||
| name={file.name} | ||
| filesize={file.filesize} | ||
| errorSubject="File size exceeds limit" | ||
| errorBody="500kb max file size. Select a new file and try again." | ||
| // eslint-disable-next-line react/prop-types | ||
| size={props.size} | ||
| status={file.status} | ||
| iconDescription={file.iconDescription} | ||
| invalid={file.invalid} | ||
| onDelete={handleFileUploaderItemClick} | ||
| onAddFiles={onAddFilesButton} | ||
| /> | ||
| )} | ||
| </div> | ||
| </FormItem> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExampleDropContainerApp; |
Oops, something went wrong.