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

Drag and Drop One or More Files #935

Merged
merged 23 commits into from
Mar 11, 2024

Conversation

tcnichol
Copy link
Contributor

A new feature is added. We can now either drag and drop or select multiple files using the same upload dialog. The old ones have been removed since this handles both single and multiple files using either method.

This currently just works with files, not folders. A zip file is uploaded as a zip file. More options to come with later pull requests.

@tcnichol tcnichol requested a review from longshuicy as a code owner February 19, 2024 18:30
@tcnichol tcnichol linked an issue Feb 19, 2024 that may be closed by this pull request
@tcnichol tcnichol requested a review from ddey2 February 19, 2024 18:30
@tcnichol tcnichol self-assigned this Feb 19, 2024
@tcnichol tcnichol added the enhancement New feature or request label Feb 19, 2024
@tcnichol tcnichol modified the milestones: v2.0, v2.0-beta-3 Feb 19, 2024
@tcnichol tcnichol linked an issue Feb 19, 2024 that may be closed by this pull request
@tcnichol
Copy link
Contributor Author

Should I make this against the next release instead of main?

@ddey2
Copy link
Member

ddey2 commented Feb 20, 2024

I tested, it works. I was able to successfully drag and drop one/multiple files. I have few UI suggestions.

  1. The button already says 'Choose a file', I think the text saying 'Upload a file' may be unnecessary. I was looking for other softwares which supports drag n drop. In Google drive, they don't say anything, but you can simply drag a file anywhere to upload a file. I think we may just want a simple text below the button 'Drop files' to indicate Clowder support the feature.
Screenshot 2024-02-20 at 2 21 49 PM Screenshot 2024-02-20 at 2 22 25 PM 2. wierd thing ---> I see 'n' after the button. Once I click on the button and uploads a file, it's gone but something else appears.

@tcnichol
Copy link
Contributor Author

@ddey2
I took out the text from the drag and drop area.

For the n, I haven't been able to replicate it locally. Let me know if it still shows up.

@ddey2
Copy link
Member

ddey2 commented Feb 21, 2024

@tcnichol I still see the n. For testing, I opened it in a private Mozilla window, it showed a different label for the button along with a N. I think you're probably using inbuilt class. @longshuicy Could you check at your end if you see something like the attached ss?
Mozilla_ss
Safari_ss

@lmarini lmarini changed the base branch from main to release/v2.0.0-beta2 March 7, 2024 15:12
@lmarini lmarini merged commit 980cafb into release/v2.0.0-beta2 Mar 11, 2024
6 checks passed
@lmarini lmarini deleted the 922-drag-and-drop-a-single-file branch March 11, 2024 15:07
longshuicy added a commit that referenced this pull request Mar 22, 2024
* initial commit, add dependency, new class
will eventually combine all file uploads

* working on adding upload drag and drop

* page does not load

* drag and drop does not actually work

* addign fileinputdrop as independent component

* add fileupload drop inside uploadfiledraganddrop

* drag and drop does not add files
select selects files but misses the first one

* drag and drop works now, is overwritten if file selected using button, need to fix

* uploads but overwrites, need to fix

* works for the select, need to fix other

* should work for drop now too

* was not an array

* delete icon works
removing console logs

* drag and drop and select means other upload methods no longer needed

* removing text in drag and drop

* added to styles but not using because it does not work

* some changes, not sure how to do rest

* fix button

* return to dataset

* remove unnecessary imports

---------

Co-authored-by: Chen Wang <[email protected]>
longshuicy added a commit that referenced this pull request Mar 22, 2024
* clear more breakpoints and move role to the Details

* bump version up

* add version to public layout too

* update changelog

* package json version

* Pre commit autoformat (#846)

* Removed unused imports using autoflake.

* Ordered imports using isort.

* Reformatted using black.

* Setting up pre-commits.

* Ran pre-commit an all files.

* Working on creating openapi.json without running backend to be used with codegen.

* Fixed `MUI: The Tabs component doesn't accept a Fragment as a child.`

* Fixed runtime error due to replacing `== None` with 'is None'.

* Fixed runtime error due to replacing `== None` with 'is None'.

* Automatically generate openapi json file using pre-commit hook.

* Added codegen precommit hook.

* Setting up prettier and eslint.

* First run of prettier.

* Runnin eslint and prettier as hooks.

* Skip codegen directories when running eslint and prettier.

* Flake8 E711 exception. Required for Beanie query to work.

* Fixed search_users_prefix codegen stub.

* Fixed beanie query for get_dataset_folders.

* Ignore Flake8 E711 since beanie query do not support `is None`.

* bump keycloak chart version to 13 so it's using keycloak appversion 20

* update chart lock

* add login to github repo

* push set to true

* revert login to github repo

* version updates

* revert

* no v in the appVersion

* change to make keycloak point to external url (#942)

* 929 message on empty page if there is no datasets (#930)

* basic message, need to improve

* adding a login or register button

* removing buttons

* links to login or register if no public datasets

* changing text

* srink the version and align to left (#950)

* moved key to grid instead of card

* adding admin mode to the authwrapper (#951)

* Fixed dataset parameters. They weren't being included in rabbtimq message. (#957)

* fix extractor bugs and deployment script bug (#958)

* Use --host 0.0.0.0 when running uvicorn to make backend listen on host IP.

* fix missing add metadata button on dataset
pycharm was complaining about missing publicView boolean in DisplayMetadata

* Drag and Drop One or More Files (#935)

* initial commit, add dependency, new class
will eventually combine all file uploads

* working on adding upload drag and drop

* page does not load

* drag and drop does not actually work

* addign fileinputdrop as independent component

* add fileupload drop inside uploadfiledraganddrop

* drag and drop does not add files
select selects files but misses the first one

* drag and drop works now, is overwritten if file selected using button, need to fix

* uploads but overwrites, need to fix

* works for the select, need to fix other

* should work for drop now too

* was not an array

* delete icon works
removing console logs

* drag and drop and select means other upload methods no longer needed

* removing text in drag and drop

* added to styles but not using because it does not work

* some changes, not sure how to do rest

* fix button

* return to dataset

* remove unnecessary imports

---------

Co-authored-by: Chen Wang <[email protected]>

* precommits

---------

Co-authored-by: Luigi Marini <[email protected]>
Co-authored-by: Todd Nicholson <[email protected]>
Co-authored-by: toddn <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Done
Status: Done
Development

Successfully merging this pull request may close these issues.

drag and drop multiple files. drag and drop a single file
4 participants