DragDropFiles Control and integration with ListView and FilePicker v3

[aaclage]

Q	A
Bug fix?	[x]
New feature?	[x]
New sample?	[ ]
Related issues?	mentioned in #856

What's in this Pull Request?

Update to V3 version.
This new control allows to drag and drop files in pre defined areas.
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:

Embedded and integrated with ListView:

Embedded and integrated with FilePicker:

[aaclage]

Hi @AJIXuMuK receive message the branch was changed,
is this solution under revision? or should not be consider for this version?

Thank you for your attention.

[AJIXuMuK]

Hi @aaclage,

The branch has been changed as I merged a PR into the branch.

So your PR is still valid and valuable for v3 version as well.

I believe @joelfmrodrigues reviewed your PR for v2 so I will pass the review of this one to him as well :)

[aaclage]

Thank you @AJIXuMuK for the feedback.
I was thinking did something incorrect.

[joelfmrodrigues]

@aaclage just some minor things:
I just noticed that you named one of the controls MultiUploadFilePicket and not MultiUploadFilePicker (notice the last character). Any chance you could fix the name? (I'm assuming it was a typo)

[joelfmrodrigues]

This loop is generating a warning in the browser console as the repeated elements don't have a key property

Suggested change

	result.push(<div className={styles.localTabFilename}>{filesResult[i].name}</div>);
	result.push(<div key={i.toString()} className={styles.localTabFilename}>{filesResult[i].name}</div>);

[joelfmrodrigues]

@aaclage I have just added the key property to the version in dev-v2 branch

[aaclage]

@joelfmrodrigues already making the changes.

[aaclage]

@aaclage just some minor things:
I just noticed that you named one of the controls MultiUploadFilePicket and not MultiUploadFilePicker (notice the last character). Any chance you could fix the name? (I'm assuming it was a typo)

yes, making the change.

[aaclage]

@joelfmrodrigues updated "Rename to MultipleUploadFilePickerTab" version for revision.

[joelfmrodrigues]

@aaclage this is now merged. Many thanks!

[aaclage]

Thank you @joelfmrodrigues :), one small missing detail is to include PR in "Milestone" 3.1.0 .

[AJIXuMuK]

@aaclage it won't be missed without milestone anyway :)
Thank you for the contribution!