--- tags: organism --- # Organism / File Uploader This organism is a part of the Supporting Documents Component within the Deal Room. Only the founder/company will be able to view this component as it is an editing function. To access it, the founder must either choose to "Add" or "Edit Document" (dropdown menu). ## States & Variables ... ### Sign In Before accessing their cloud storage files, they must first log into their relevant accounts (e.g Microsoft, Google, Dropbox, etc) For each of the Log In processes, they all involve the same text boxes and "Sign In" buttons. The only variable is the Logo and Name Diplayed (e.g Google Logo with "Sign In to continue to GDrive") <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12152%253A30224&chrome=DOCUMENTATION" allowfullscreen></iframe> ##### Variables - Provider - The Header will allow the founder to navigate between a few different cloud provider choices (Google, Dropbox, Amazon, Microsoft) <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12152%253A30399&chrome=DOCUMENTATION" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12152%253A30549&chrome=DOCUMENTATION" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12152%253A30848&chrome=DOCUMENTATION" allowfullscreen></iframe> ... - Local Files - The final "Computer" icon (far right) is a local files uploader, allowing the founder to upload a file directly from his/her computer. They can do this by clicking and selecting a file, or by dragging and dropping one into the display box. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12152%253A30998&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ... ... #### Happy State Once the founder has logged into their company cloud provider, they are able to navigate their folders and files from within the modal, selecting which files they wish to upload. At the moment, this has to be done one at a time. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A4020&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ##### Variables - Cloud Provider - As mentioned above, this will differ depending on which service you are logged into (and which tab is selected above). - Grid vs List View - The founder has the choice to browse their files in Grid View or List View - The can be changed using the Atom / Grid vs List View Toggle <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A4413&chrome=DOCUMENTATION" allowfullscreen></iframe> ... - Folder View - If a founder goes into a folder, the navigation changes slightly. The "Search {Dropbox}" title changes to the Title of the Folder and a Back Icon. This gives the founder the impression they can go back to the previous page of navigating their files. - Founders can therefore search through their folders to find files they need. This is often the case if their file storage is not organised! <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A4683&chrome=DOCUMENTATION" allowfullscreen></iframe> ... - Number of Files and Folders - This will vary company to company. ... ... ... ### Organism Components #### Atoms ##### Atom / Cloud Uploader Icons <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A5538&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ##### Atom / Grid vs List Toggle <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A4193&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ##### Atom / Folder Name Back Button <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A4610&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ... ... #### Molecules ##### Molecule / Cloud Uploader / Header <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A5537&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ##### Molecule / Search Bar with Grid vs List Atom <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A5236&chrome=DOCUMENTATION" allowfullscreen></iframe> ##### Molecule / Document Row / Folder <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A4673&chrome=DOCUMENTATION" allowfullscreen></iframe> ##### Molecule / Document Row / Document <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D15472%253A5055&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ... ... ## Questions - Question 1 - Question 2 - ... ## Interactions - ... - ... ```gherkin Feature: Company / PreMoney Valuations & Key Drivers As a Company I want to ... So that ... Scenario: ... Given ... When ... Then ... Scenario: ... Given ... When ... Then ... Scenario: ... Given ... When ... Then ... ```