-
Notifications
You must be signed in to change notification settings - Fork 3k
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
[HOLD for payment 2023-08-14] [$1000] Web - Appropriate message is not shown when drag&drop a folder. #22306
Comments
Triggered auto assignment to @sakluger ( |
Bug0 Triage Checklist (Main S/O)
|
ProposalPosting proposal early as per new guidelines Please re-state the problem that we are trying to solve in this issue.Appropriate message is not shown when drag&drop a folder. What is the root cause of that problem?When we drag file it will have file object info as shown here in debug. ![]() When we drag folder it will have file object info as shown here in debug. ![]() As we can see for the folder type property is empty string and size belongs to folder size. So when we drop content, we just check size but we do not have any checking to detect that given item is folder or file, so it will just check size and show message accordingly. Here is the code we are checking for file size etc. App/src/components/AttachmentModal.js Lines 172 to 202 in f08ab19
What changes do you think we should make in order to solve the problem?We need to add checking that dropped item is folder or not. So if dropped item is folder it will have file.type as empty, so we can put condition as shown code below: const isValidFile = useCallback(
(_file) => {
// *** ADD THIS CONDITION ***
// If dropped item is folder then show error.
if (_file.type === '') {
setIsAttachmentInvalid(true);
setAttachmentInvalidReasonTitle(props.translate('attachmentPicker.folderNotAllowed'));
setAttachmentInvalidReason(props.translate('attachmentPicker.folderNotAllowedMessage'));
return false;
}
...
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[props.translate],
); We have to also add corresponding translation for en and es. en.js attachmentPicker: {
...
folderNotAllowed: 'Folder not allowed.', // *** ADD THIS ***
folderNotAllowedMessage: 'Uploading folders is not allowed.', // *** ADD THIS ***
}, es.js attachmentPicker: {
...
folderNotAllowed: 'Carpeta no permitida.',
folderNotAllowedMessage: 'No se permite subir carpetas.',
}, Note: We can adjust the message text copy as per need. At present I put folder not allowed message for explanation purpose. What alternative solutions did you explore? (Optional)None Result22306-FolderNotAllowed.mov |
I agree that this is a bug, we do not support folder upload and should return an error if a user tries uploading a folder via drag and drop. |
Job added to Upwork: https://www.upwork.com/jobs/~012e40ccd48a35f18f |
Current assignee @sakluger is eligible for the External assigner, not assigning anyone new. |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 ( |
ProposalPlease re-state the problem that we are trying to solve in this issue.Web - Appropriate message is not shown when drag&drop a folder What is the root cause of that problem?We are not checking for file if it is a folder or not. What changes do you think we should make in order to solve the problem?There are also other files where type is empty, for example: if type is empty the backend also rejects this file, and sends an error. So there is no point of sending files where type is empty. We can add additional condition App/src/components/AttachmentModal.js Line 186 in acf9ced
This way, we can prevent folders and any other files which backend would respond with an error. Line 168 in cd741fb
What alternative solutions did you explore? (Optional) |
ProposalPlease re-state the problem that we are trying to solve in this issue.Web - Appropriate message is not shown when drag&drop a folder What is the root cause of that problem?The issue was caused due to "IsValidFile" function not checking the file type before checking for other attributes. What changes do you think we should make in order to solve the problem?Found some viable solutions.
so with the help of this object, we can easily distinguish files uploaded, whether it's a folder or image, or a file without any type. Here are some example file uploaded and type checking.
![]()
![]()
![]() so using this Method we can check file type if it's a folder we can rise a Error to the user "Folder can't be Uploaded" and If it's a File without a type property then we can add a type to that file then Upload*** Detailed steps1. Changes in Drag and Drop Component.
App/src/components/DragAndDrop/index.js Lines 93 to 109 in acf9ced
addEventListeners() {
this.dropZone = document.getElementById(this.props.dropZoneId);
document.documentElement.setAttribute('webkitdirectory',"")
this.dropZoneRect = this.calculateDropZoneClientReact();
document.addEventListener('dragover', this.dropZoneDragListener);
document.addEventListener('dragenter', this.dropZoneDragListener);
document.addEventListener('dragleave', this.dropZoneDragListener);
document.addEventListener('drop', this.dropZoneDragListener);
window.addEventListener('resize', this.throttledDragNDropWindowResizeListener);
}
removeEventListeners() {
document.documentElement.removeAttribute('webkitdirectory')
document.removeEventListener('dragover', this.dropZoneDragListener);
document.removeEventListener('dragenter', this.dropZoneDragListener);
document.removeEventListener('dragleave', this.dropZoneDragListener);
document.removeEventListener('drop', this.dropZoneDragListener);
window.removeEventListener('resize', this.throttledDragNDropWindowResizeListener);
} 2. OnDropChanges
const data = lodashGet(e, ['dataTransfer', 'items', 0]);
displayFileInModal(data); 3. IsValidFilehere we can Check File type then throw an Error "File Type Not Supported" if (typeof _data.webkitGetAsEntry === 'function') {
const entry = _data.webkitGetAsEntry();
checkFileorFolder(entry);
// entry Object has isDirectory property
} What alternative solutions did you explore? (Optional)One more suggestion is rather than adding EventListeners to entire document and then narrowing down to upload section. just add EventListeners to that View. |
📣 @Charan-hs! 📣
|
Contributor details |
✅ Contributor details stored successfully. Thank you for contributing to Expensify! |
Will check on this in morning |
On @PrashantMangukiya 's proposal here #22306 (comment), the root cause is correct but I am not aligned with the solution to check and consider empty file type as a folder, since there could be file with empty file type. |
@alitoshmatov 's proposal #22306 (comment) here mentions to block all empty file types since backend doesn't allow it. I don't think we should block files without extension, I think should be raised as a separate bug on why backend doesn't allow it, maybe we can confirm the same with internal engineer on if this is the expected behaviour. |
@Charan-hs 's proposal here #22306 (comment) uses |
Hi, we can implement proposed changes i.e using 1. Changes in Drag and Drop Component (with two different ways).
App/src/components/DragAndDrop/index.js Lines 93 to 109 in acf9ced
addEventListeners() {
this.dropZone = document.getElementById(this.props.dropZoneId);
this.dropZone.setAttribute("webkitdirectory","")
this.dropZoneRect = this.calculateDropZoneClientReact();
this.dropZone.addEventListener('dragover', this.dropZoneDragListener);
this.dropZone.addEventListener('dragenter', this.dropZoneDragListener);
this.dropZone.addEventListener('dragleave', this.dropZoneDragListener);
this.dropZone.addEventListener('drop', this.dropZoneDragListener);
window.addEventListener('resize', this.throttledDragNDropWindowResizeListener);
}
removeEventListeners() {
this.dropZone = document.getElementById(this.props.dropZoneId);
this.dropZone.removeAttribute("webkitdirectory")
this.dropZone.removeEventListener('dragover', this.dropZoneDragListener);
this.dropZone.removeEventListener('dragenter', this.dropZoneDragListener);
this.dropZone.removeEventListener('dragleave', this.dropZoneDragListener);
this.dropZone.removeEventListener('drop', this.dropZoneDragListener);
window.removeEventListener('resize', this.throttledDragNDropWindowResizeListener);
}
addEventListeners() {
this.dropZone = document.getElementById(this.props.dropZoneId);
document.documentElement.setAttribute('webkitdirectory',"")
this.dropZoneRect = this.calculateDropZoneClientReact();
document.addEventListener('dragover', this.dropZoneDragListener);
document.addEventListener('dragenter', this.dropZoneDragListener);
document.addEventListener('dragleave', this.dropZoneDragListener);
document.addEventListener('drop', this.dropZoneDragListener);
window.addEventListener('resize', this.throttledDragNDropWindowResizeListener);
}
removeEventListeners() {
document.documentElement.removeAttribute('webkitdirectory')
document.removeEventListener('dragover', this.dropZoneDragListener);
document.removeEventListener('dragenter', this.dropZoneDragListener);
document.removeEventListener('dragleave', this.dropZoneDragListener);
document.removeEventListener('drop', this.dropZoneDragListener);
window.removeEventListener('resize', this.throttledDragNDropWindowResizeListener);
} 2. OnDropChanges
const data = lodashGet(e, ['dataTransfer', 'items', 0]);
displayFileInModal(data); 3. IsValidFilehere we can Check File type then throw an Error "File Type Not Supported" if (typeof _data.webkitGetAsEntry === 'function') {
const entry = _data.webkitGetAsEntry();
checkFileorFolder(entry);
// entry Object has isDirectory property
}
const entryContent = await readEntryContentAsync(entry); |
@abdulrahuman5196 @luacmartins Created a PR #23321 |
@abdulrahuman5196 |
Triggered auto assignment to @LLPeckham ( |
@LLPeckham can you please review the copy below? This is an error message we'll display to users when they try to upload an entire folder in NewDot
|
@luacmartins -- What about: |
Sounds good! Thank you! |
Looks like the PR is continuing to make progress. |
PR is in review |
Based on my calculations, the pull request did not get merged within 3 working days of assignment. Please, check out my computations here:
On to the next one 🚀 |
Hey @luacmartins I'm a bit confused with the PR, why is it showing the deploy messages twice? |
@sakluger I think there has been some issue with melvin. This change was pushed to production on Aug 7 #23321 (comment). This issue should be made to hold for payment on Aug 14. Can we kindly change it manually? |
Not a regression. Folder uploaded was not supported and we wheren't showing proper message from implementation itself.
No. Minor bug to show proper error mesage in case of folders, so a regression test won't be beneficial. |
@abdulrahuman5196 Error message has been approved here #22306 (comment) |
All paid up! Thanks everyone. |
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Action Performed:
Expected Result:
We should show an error message that uploading folders is not supported.
Actual Result:
We show the error:
The attachment size must be greater than 240 bytes.
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: 1.3.36-4
Reproducible in staging?: n/a
Reproducible in production?: n/a
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Test58_Dragdropfolder-1.mp4
Expensify/Expensify Issue URL:
Issue reported by: @daveSeife
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688504637490979
View all open jobs on GitHub
Upwork Automation - Do Not Edit
The text was updated successfully, but these errors were encountered: