Magento Admin Pattern Library

Image Uploader

Contents

• Overview
• When to Use
• When Not to Use
• Variations
• Behavior
• Style
• Examples
• Accessibility
• Assets

Overview

Within the Magento application, user often need to upload images onto the application for use.

The use of image uploader should follow this guideline.

When to Use

• When user is required to upload a single image or multiple images onto the application.

When Not to Use

• This guide is for image upload, not addressing file uploads.

Variations

There are two variations:

1. Upload Single Image

2. Upload Multiple Images

Refer to the rest of this document for details of behavior and style on each variations.

Behavior

1. Upload Single Image

2. Upload Multiple Images

Users can upload the images by either browsing through their files or drag and drop the images.

Upload by browsing

Drag & Drop Images

Style

1. Upload Single Image

2. Upload Multiple Images

Examples

1. Upload Single Image

2. Upload Multiple Images

Accessibility

To initiate the uploader, the buttons should follow button accessibility guidelines: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-graphical-buttons

In the browser upload window, standard behavior should be kept.

Assets

PSD files can be found here: Download Image Uploader PSD source