Drag-and-drop file upload UI

[kaganjd]

Based on #92 and #271, @machinic designed a new UI for file uploads! @machinic, @catarak, @lmccart: I'm guessing this is the flow based on what I saw in Zeplin, but please correct me if I'm wrong about any of this.

Code

It seems like the preferred interaction is:

1. User drags a file anywhere on the editor
2. Dragging triggers file/file type detection, handling, and UI
3. On file drop, file gets added to project folder

Design

The styling below is approximate and uses general variable names, units, font weights, and measurements, but the ultimate goal is to replicate the above design. Final styling should be in em units instead of px, color variables and font weights should use the existing SCSS names, etc.

Window styling

 {
  box-shadow: inset -4px -4px 4px 0 rgba(0, 0, 0, 0.5);
  border: solid 4px var(--bluish);
}

Dialog box styling

Background

{
  width: 271px;
  height: 240px;
  border-radius: 2px;
  background-color: var(--white-three);
  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.16);
  border: solid 0.5px #b9d0e1;
}

Header

 {
  font-family: Montserrat;
  font-size: 21px;
  font-weight: bold;
  text-align: left;
  color: rgba(51, 51, 51, 0.87);
}

Body

{
  font-family: Montserrat;
  font-size: 16px;
  line-height: 1.25;
  text-align: left;
  color: var(--black);
}

[machinic]

Sounds about right. I am traveling through Thursday evening. I can add some flow/state details on Friday as well as field any questions that might've come up in the thread.

[lmccart]

that looks right to me

[kylemcdonald]

Right now it seems like the upload dialog works, but it is difficult to read what is going on. I wasn't sure if it's a bug or just unfinished, but I wanted to share just in case :)

The parts that are confusing to me:

• on the left hand side it's hard to tell if the loading bar is still loading, or if it's done.
• on the right hand side, it's hard to tell if it's uploaded or not, or if there is an error because of the "x" icon (I think) in the background.
• not sure why there is a size listed (13B) on one file but one but not the other, makes me feel like one of the uploads is broken.

[catarak]

i agree, this is confusing! i'd like to prioritize working on this, going to add it to the current milestone.

[ashu8912]

Yes The Asset Loading Can Take A Green Color Something that depicts the completion. I am not a designer but the gray color is very confusing.

[pcgamer1]

I would like to work on this!

[Ayushmanwebdeveloper]

Hi! I’m Ayushman Tripathi, JavaScript Software Developer and I came across the projects Asset Uploading Improvements, and Adding Test Coverage. I find them really fascinating. I believe my skills and experience would be a great fit for these project. I am really interested in contributing to Asset Uploading Improvements, and I’ve relevant skills for contributing to it as I’ve experience in full stack web development (React, Node, MongoDB, PostgresSQL, REST API, Django, AWS). I’ve worked on 10+ full stack projects & 4 internships in the past 1.5 years, and I have also completed the App Academy Open Software Engineering Bootcamp (500+ hours of full-stack online curriculum), where I learned a variety of skills. Additionally, I have worked on various frontend and backend projects, and I’m also preparing for the AWS Certified Developer Associate certification. I’m willing to learn new skills while contributing to the project. I’ll put all my efforts into successfully contributing to the project. Can you please guide me on how to start contributing to the above two projects ? Thanks a lot.

[ShivamAhir]

Hi, my name is Shivam. I'm currently a final year engineering student at NIT Kurukshetra. I have a strong understanding of front-end technologies such as HTML, CSS, JavaScript, React.js, and Material UI, and for backend development, I'm proficient in Node.js and Express.js. I'm keen to contribute to this repository during the 2024 GSoC program. Could someone provide guidance on how to get started with this repository?

[rahulrana701]

@ShivamAhir first try to run the project locally and go through the code base thoroughly and then use that project as user for a while and then you can look at the issues and try to solve them , or can create issues yourself.