Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Fixed file drop component to accept multiple files when dragging and dropping #92

Merged
merged 5 commits into from
Jan 8, 2020

Conversation

Blackbaud-AlexKingman
Copy link
Contributor

Addresses #91

@codecov
Copy link

codecov bot commented Jan 7, 2020

Codecov Report

Merging #92 into master will not change coverage.
The diff coverage is 100%.

Impacted file tree graph

@@          Coverage Diff          @@
##           master    #92   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          25     25           
  Lines         935    939    +4     
  Branches      131    132    +1     
=====================================
+ Hits          935    939    +4
Impacted Files Coverage Δ
...modules/file-attachment/file-attachment.service.ts 100% <100%> (ø) ⬆️
...dules/file-attachment/file-attachment.component.ts 100% <100%> (ø) ⬆️
...lic/modules/file-attachment/file-drop.component.ts 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0afaf33...4883b48. Read the comment docs.

/**
* Returns `true` if a directory is found in the provided `files` parameter.
*/
public hasFolder(files: any): boolean {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

☝️ Two things happening here:

  1. Renamed the method to hasFolder to be more transparent about its purpose.
  2. Removed the files.length > 1 check because you might want multiple files depending on what context this is called in. Removing that line also made this method have one single responsibility.

@Blackbaud-BobbyEarl
Copy link

@@ -130,9 +130,15 @@ export class SkyFileDropComponent {
this.acceptedOver = false;

if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {
if (this.fileAttachmentService.verifyDropFiles(dropEvent.dataTransfer.files)) {
this.handleFiles(dropEvent.dataTransfer.files);
if (!this.multiple && dropEvent.dataTransfer.files.length > 1) {

Choose a reason for hiding this comment

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

Do you mind setting these statements' values to well-named variables so that their purposes are easy to read going forward? If you don't like that, maybe some helpful comments above each if check?

const isCheckingWhateverThisIsChecking = (!this.multiple && dropEvent.dataTransfer.files.length > 1);
const hasDirectory = this.fileAttachmentService.hasFolder(dropEvent.dataTransfer.files);

if (isCheckingWhateverThisIsChecking || hasDirectory) {
  return;
}

this.handleFiles(dropEvent.dataTransfer.files);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good idea. Done.

@Blackbaud-BobbyEarl
Copy link

@Blackbaud-AlexKingman Blackbaud-AlexKingman merged commit 1ca8d21 into master Jan 8, 2020
@Blackbaud-AlexKingman Blackbaud-AlexKingman deleted the file-drop-multiple-files branch January 8, 2020 20:42
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants