<a href="/wiki/display/CPDesign/AI+File+Upload">AI File Upload</a>

Created by Milanov, Kalin, last modified on Feb 14, 2024

Component Owner: BTP

Designer Responsible: Milanov, Kalin

Specification Status: IN REVIEW

Overview

Look and Feel

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-file-upload/media1_1bd1255c809985ae518fd21a291c3aed5fa6a5a9b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1bd1255c809985ae518fd21a291c3aed5fa6a5a9b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1bd1255c809985ae518fd21a291c3aed5fa6a5a9b.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-file-upload/media%5C_1bd1255c809985ae518fd21a291c3aed5fa6a5a9b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-file-upload/media_1bd1255c809985ae518fd21a291c3aed5fa6a5a9b.png?width=750&format=png&optimize=medium</a>" width="668" height="450"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-file-upload/media1_1f84afed90a334277875114f1e3db8ae22e9464fd.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f84afed90a334277875114f1e3db8ae22e9464fd.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f84afed90a334277875114f1e3db8ae22e9464fd.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-file-upload/media%5C_1f84afed90a334277875114f1e3db8ae22e9464fd.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-file-upload/media_1f84afed90a334277875114f1e3db8ae22e9464fd.png?width=750&format=png&optimize=medium</a>" width="668" height="450"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-file-upload/media1_1a57e30247c438e8082e4ac14e7b057ecde52ed18.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1a57e30247c438e8082e4ac14e7b057ecde52ed18.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1a57e30247c438e8082e4ac14e7b057ecde52ed18.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-file-upload/media%5C_1a57e30247c438e8082e4ac14e7b057ecde52ed18.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-file-upload/media_1a57e30247c438e8082e4ac14e7b057ecde52ed18.png?width=750&format=png&optimize=medium</a>" width="668" height="450"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/ai-file-upload/media1_191e61e60e0317faaf3bf3145136bd286d2610ff8.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_191e61e60e0317faaf3bf3145136bd286d2610ff8.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_191e61e60e0317faaf3bf3145136bd286d2610ff8.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/patterns/generative-ai/ai-file-upload/media%5C_191e61e60e0317faaf3bf3145136bd286d2610ff8.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/ai-file-upload/media_191e61e60e0317faaf3bf3145136bd286d2610ff8.png?width=750&format=png&optimize=medium</a>" width="668" height="450"> </picture> </div> </div></p>

Anatomy

<div> <div></div> <div>UI Element</div> <div>Description</div> </div> <div> <div>A</div> <div>AI File Upload Container</div> <div>This is a container that holds the File Upload content.</div> </div> <div> <div>B</div> <div>File Name</div> <div>This is a standard text that displays the file name. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915836">Text (Horizon)</a> for full specifications.</div> </div> <div> <div>C</div> <div>Progress Indicator</div> <div>A line that shows how far the file has been uploaded.</div> </div> <div> <div>D</div> <div>Actions</div> <div>A horizontal stack of buttons. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</div> </div>

Desktop Specification (Compact Mode)

<div> <div></div> <div>UI Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>AI File Upload Container</div> <div> <p>display: flex;<br>padding: 0.1875rem 0.25rem 0.1875rem 0.5rem;<br>align-items: center;<br>gap: 0.25rem;</p> <p>border-radius: 0.25rem;<br>background: var(--sapGroup_ContentBackground);<br>border: solid 0.0625rem var(--sapAIGroup_ContentBorderColor);</p> <p><strong>Focus State</strong><br>border: none;<br>outline: solid 0.125rem var(--sapAIContent_FocusColor);</p> </div> </div> <div> <div>B</div> <div>File Name</div> <div> <p>color: var(--sapTextColor);<br>font-family: var(--sapFontFamily);<br>font-size: var(--sapFontSmallSize);</p> <p><strong>Error State Text</strong><br>font-family: var(–sapFontBoldFamily);<br>color: var(--sapNegativeTextColor);</p> <p><strong>Error State Icon</strong><br>width: 0.75rem;<br>height: 0.75rem;<br>color: var(--sapNegativeTextColor);</p> </div> </div> <div> <div>C</div> <div>Progress Indicator</div> <div> <p>width: 100%;<br>height: 0.25rem;</p> <p>position: absolute;<br>bottom: 0rem;</p> <p><strong>Track</strong><br>background: transparent;</p> <p><strong>Progress Bar</strong><br>background: var(--sapAIBorderColor);</p> </div> </div>

Tablet Specification (Cozy Mode)

Identical to desktop specification.

Phone Specification (Cozy Mode)

Identical to tablet specification.

Keyboard Handling

The keyboard handling for the AI File Upload is used on the keyboard handling of the Button and Toolbar components. Refer to Fiori Keyboard Interaction for full specifications about each of these components.

Button - p.171
Toolbar - p. 275

Handling of file uploads via the keyboard is described in the AI Container and AI Prompt specifications.

The screen reader for the AI File Upload is based on the screen reader of the Progress Indicator. Refer to Fiori Screen Reader Specification for full specifications.

Progress Indicator - p.71