Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DragDropFiles Control and integration with ListView and FilePicker #856

Merged
merged 4 commits into from
Apr 1, 2021

Conversation

aaclage
Copy link
Contributor

@aaclage aaclage commented Mar 31, 2021

Q A
Bug fix? [x]
New feature? [x]
New sample? [ ]
Related issues? fixes #803, mentioned in #853

What's in this Pull Request?

This new control allows to drag and drop files in pre defined areas.
@AJIXuMuK This control has High impact in following controls ListView and FilePicker since they were changed/added to adapt this new control.
If additional tests or revision need to be made please advise.

This control has the following features that provide enhance and adaptability to existing controls.

  • Include drag and drop of file in pre defined area of existing controls.
  • Add custom Label on Upload Area.
  • Add custom icon based on Office UI Fabric Icons.
  • Enable or disable Control.
  • Manage the output Files from custom Method "onDrop"
  • dropEffect manages the action after drop the file.
    - https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect
  • Integration of DragDropFiles in existing Controls ListView and FilePicker > new Tab "Upload Files".
  • Control allow drag and drop of Folders with files, only File[] are return with new property "fullPath" in file.
    - New property "fullPath" was included in file object to allow identify dropped files based on Folders, this allow users to create associated folder path by code (defensive code included https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry)

Sample code:

<DragDropFiles 
          dropEffect="copy" 
          enable={true}  
          onDrop={this._getDropFiles}
          iconName="Upload"
          labelMessage= "My custom upload File"
          >
  {/* Specify the components to load where Drag and drop area should work */}
</DragDropFiles>

Simple Sample view:
image

Embedded and integrated with ListView:
image

Embedded and integrated with FilePicker:
image

@joelfmrodrigues joelfmrodrigues self-assigned this Apr 1, 2021
Copy link
Collaborator

@joelfmrodrigues joelfmrodrigues left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Waiting author feedback

src/controls/dragDropFiles/DragDropFiles.tsx Outdated Show resolved Hide resolved
@aaclage
Copy link
Contributor Author

aaclage commented Apr 1, 2021

@joelfmrodrigues new version included and Method webkitGetAsEntry removed since was not supported.

@aaclage
Copy link
Contributor Author

aaclage commented Apr 1, 2021

@joelfmrodrigues I am sorry for this last changes, changed the code as describe in the article, just includes the method if exists in browser "defensive code".
With this last changes code is ready for review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants