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

File Upload #506

Closed
mcarrano opened this Issue Dec 14, 2017 · 17 comments

Comments

Projects
None yet
7 participants
@mcarrano
Copy link
Member

mcarrano commented Dec 14, 2017

  • [x ] This is a new pattern
  • This is an enhancement on an existing pattern

This is a proposal for a new pattern to support file upload.

4. Use Cases + Requirements

  • Browse to select a file to upload
  • Allow the user to select a file on their desktop and drag & drop it onto the web app for upload.
@mcarrano

This comment has been minimized.

Copy link
Member Author

mcarrano commented Dec 14, 2017

@catrobson I have created this new issue, as requested. Please feel free to add further requirements or details, as needed.

@mcarrano mcarrano added this to New / Needs Info in PatternFly Contributions Dec 15, 2017

@mcarrano mcarrano moved this from New / Needs Info to Accepted-ToDo/Backlog in PatternFly Contributions Jan 25, 2018

@mcarrano mcarrano removed the Help Wanted label Feb 9, 2018

@mcarrano mcarrano moved this from Accepted-ToDo/Backlog to Discovery & Concept Design in PatternFly Contributions Feb 9, 2018

@mcarrano mcarrano assigned mcarrano and gdoyle1 and unassigned mcarrano Feb 21, 2018

@mcarrano

This comment has been minimized.

Copy link
Member Author

mcarrano commented Feb 22, 2018

@gdoyle1 is currently working on a design proposal and will post here for review when ready. The following PatternFly stories have been created to track this work:

Propose that this will be added as a new pattern to Forms and Controls. @LHinson do you agree?

@gdoyle1

This comment has been minimized.

Copy link
Contributor

gdoyle1 commented Feb 27, 2018

Here is the Google Doc with Requirements, Use Cases, Best/Common Practices and the Proposed Design link. If anyone has any feedback on the current wireframes provided, that'd be great to hear!

@mcarrano

This comment has been minimized.

Copy link
Member Author

mcarrano commented Mar 1, 2018

@gdoyle1 Thanks for posting. I think this is a good start. Left a couple of comments on your InVision deck to think about. Let me know if we need to discuss live. Also, just a general question. This design assumes that drag and drop to upload would always be supported. Do we know if there are instances where we might just want a simple textbox and browse button approach either to save space or otherwise?

@serenamarie125 @catrobson @maryclarke @jeperry would be good to also get your thoughts.

@johnnyNcsu

This comment has been minimized.

Copy link

johnnyNcsu commented Mar 20, 2018

@mcarrano I am new to PatternFly but also have this use case (file input). I have been integrating the design pattern for file input created by krajee to my project (in addition to PatternFly elements) - in particular I am using the file input pattern he defines in his example 9. His code is already in npm registry as a bootstrap styled plugin which is nice. (This particular modal dialog appears to favor BSv4 styling however - I am working on fixing the styling for BSv3 which is better for my work). I am currently adding this file input modal as part of a PatternFly drop-menu list which differs from the proposal put forth by @gdoyle1.

In any case, I was considering contributing this (integrating really) to PF as it really would be more appropriate there (also npm is not handling install deps well separately) but don't want to step on any toes or run afoul of any license incompatibilities; nor am I particularly experienced at OSS contribution; nor can it turn into my full-time job :) Suggestions?

@mcarrano

This comment has been minimized.

Copy link
Member Author

mcarrano commented Mar 20, 2018

Thanks for your input @johnnyNcsu . @gdoyle1 is in the process of updating her design and we definitely want to accommodate something more like the example you gave as an option. You should continue to follow this issue for updates.

As far as contributing your code back into PatternFly, I am probably not the best person to ask. Recommend checking up on guidelines for code contributions outlined here: https://github.com/patternfly/patternfly

@johnnyNcsu

This comment has been minimized.

Copy link

johnnyNcsu commented Mar 20, 2018

@mcarrano will do - Thanks.

@mcarrano

This comment has been minimized.

Copy link
Member Author

mcarrano commented Apr 4, 2018

@gdoyle1 Any updates on this?

@gdoyle1

This comment has been minimized.

Copy link
Contributor

gdoyle1 commented Apr 5, 2018

@mcarrano I uploaded the newest wireframes a couple weeks ago! They begin at "Initial Screen V2." https://redhat.invisionapp.com/share/N5G2SX76QDZ It's the same InVision project as posted above. I would love to hear what you/others think about these.

@mcarrano

This comment has been minimized.

Copy link
Member Author

mcarrano commented Apr 5, 2018

@gdoyle1 the revised design looks great. @catrobson @serenamarie125 @maryclarke @jeperry @kybaker @LHinson please take a look. It's the screens labeled "V2" that you should be looking at.

@gdoyle1 for future reference, it's good to post a comment here when changes are made, that way I'll be sure not to miss updates! Thanks.

@mcarrano

This comment has been minimized.

Copy link
Member Author

mcarrano commented Apr 5, 2018

Per 4/5 PF-UXS Meeting - Let's create a draft in the form of a Google Doc that includes Overview and Design pages. Want to consider use cases and variations that may be needed. @catrobson to follow up with @gdoyle1 . Also should get Visual Design involved to create hi-fi mockups.

@gdoyle1

This comment has been minimized.

Copy link
Contributor

gdoyle1 commented Apr 19, 2018

I am currently working on the proposed finalized Google Doc with:

  1. Overview
  2. Use Cases
  3. Design Pages
  4. Design Write-ups

Please feel free to comment with any feedback. Some wireframes for the second set of use cases are still in progress.

For reference, here is the previous Doc I was using to gather requirements and use cases as well as the InVision Project I put all of the design pages in.

@mcarrano

This comment has been minimized.

Copy link
Member Author

mcarrano commented Apr 19, 2018

@serenamarie125 @catrobson @maryclarke please take a look to ensure that this design meets your requirements.

@mcarrano mcarrano added this to Interaction Design in PatternFly 3 Feature Board Apr 20, 2018

@mcarrano mcarrano assigned dongniwang and unassigned gdoyle1 May 8, 2018

@bmignano

This comment has been minimized.

Copy link
Contributor

bmignano commented Jun 21, 2018

@dongniwang do you happen to have the source files for the images? I think you may have been working on this with Gina but I'm not sure. Thanks!

@dongniwang

This comment has been minimized.

Copy link

dongniwang commented Jun 21, 2018

@bmignano - I don't have the source files, unfortunately, but I think you might be able to find some files in Google drive.

@catrobson

This comment has been minimized.

Copy link
Member

catrobson commented Jun 21, 2018

@beanh66

This comment has been minimized.

Copy link
Member

beanh66 commented Jun 27, 2018

@serenamarie125 @catrobson @maryclarke @mcarrano Please review the latest File Upload Design document. @bmignano has updated this doc to reflect what she would be looking to contribute for the overview and design pages in PF. Note: the design is based on the initial work done by @gdoyle1 and @dongniwang! We wanted to get a final review before opening a PR.

@bmignano bmignano referenced this issue Jul 6, 2018

Merged

New pattern: File upload #692

6 of 6 tasks complete

@mcarrano mcarrano moved this from Interaction Design to Checkpoint 1 in PatternFly 3 Feature Board Jul 9, 2018

@mcarrano mcarrano removed this from Checkpoint 1 in PatternFly 3 Feature Board Jul 11, 2018

@mcarrano mcarrano closed this in #692 Aug 2, 2018

@mcarrano mcarrano removed this from Preliminary Review (Checkpoint 1) in PatternFly Contributions Sep 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment