Moxi Design System

# Uploads

# Image Uploads

The mx-image-upload component is used to upload a single image file (or PDF file, if the acceptPdf prop is passed).

The component wraps an <input type="file"> (opens new window), which emits both an input event and a change event whenever a file is selected or removed. The isUploading and isUploaded props can then be set accordingly.

The assetName prop is set to "logo" in this example. Upload PDF … PDF Uploaded! 🎉 This example uses the dropzone-text and uploaded slots. 
<mx-image-upload el-aria-label="Upload file" assistive-text="This is assistive text" @input="onInput" />
<mx-image-upload el-aria-label="Upload file" show-icon="false" asset-name="logo" @input="onInput">
  <span slot="instructions">
    The <code>assetName</code> prop is set to "logo" in this example.
  </span>
</mx-image-upload>
<mx-image-upload el-aria-label="Upload file" show-dropzone-text="false" upload-btn-type="outlined" upload-button-label="Attach" @input="onInput" />
<mx-image-upload el-aria-label="Upload file" accept-pdf accept-image="false" icon="ph ph-file-arrow-up" @input="onInput">
  <span slot="dropzone-text" class="mt-8">
    Upload PDF &hellip;
  </span>
  <span slot="uploaded">
    PDF Uploaded! 🎉
  </span>
  <span slot="instructions">
    This example uses the <code>dropzone-text</code> and <code>uploaded</code> slots.
  </span>
</mx-image-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
onInput(e) {
  if (e.target.files.length === 0) return console.log('Removed file')
  console.log('Uploading ' + e.target.files[0].name)
  const mxImageUpload = e.target.closest('mx-image-upload')
  mxImageUpload.isUploading = true
  // Simulate upload
  setTimeout(() => {
    mxImageUpload.isUploaded = true
    mxImageUpload.isUploading = false
    console.log('Uploaded ' + e.target.files[0].name)
  }, 2000)
1
2
3
4
5
6
7
8
9
10

# Success and error messages

There are two slots for success and error status messages, named success and error respectively.

The image was uploaded successfully Images may be up to 4800px in width or height. The selected image does not meet requirements. The width must be less than 4800px. 
<mx-image-upload el-aria-label="Upload file" thumbnail-size="cover" thumbnail-url="https://picsum.photos/300">
  <span slot="success">
    The image was uploaded successfully
  </span>
</mx-image-upload>
<mx-image-upload el-aria-label="Upload file" thumbnail-size="cover" thumbnail-url="https://picsum.photos/320">
  <span slot="instructions">
    Images may be up to 4800px in width or height.
  </span>
  <span slot="error">
    The selected image does not meet requirements.  The width must be less than 4800px.
  </span>
</mx-image-upload>
1
2
3
4
5
6
7
8
9
10
11
12

# Avatars

Passing the avatar prop sets the width and height to 80px and changes the icon.

To provide an initial thumbnail image (e.g. if the user has previously uploaded an avatar), set the thumbnail-url prop.

<mx-image-upload
  avatar
  el-aria-label="Upload avatar"
  thumbnail-url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" 
  @input="onInput"
/>
1
2
3
4
5

# Dimensions & thumbnail size

The width and height props may be used to set the dimensions of the dropzone/thumbnail container.

The thumbnailSize prop may also be used to set how the thumbnail fits inside the container: cover (default), stretch, contain, or auto.

<mx-image-upload el-aria-label="Upload file" width="75%" height="150px" thumbnail-size="cover" thumbnail-url="https://via.placeholder.com/200x100" />
<mx-image-upload el-aria-label="Upload file" width="75%" height="150px" thumbnail-size="stretch" thumbnail-url="https://via.placeholder.com/200x100" />
<mx-image-upload el-aria-label="Upload file" width="75%" height="150px" thumbnail-size="contain" thumbnail-url="https://via.placeholder.com/200x100" />
<mx-image-upload el-aria-label="Upload file" width="75%" height="150px" thumbnail-size="auto" thumbnail-url="https://via.placeholder.com/200x100" />
1
2
3

# External button

Set the showButton prop to false if you want to leverage the selectFile and removeFile methods with an external button.

Select file ... 
<mx-image-upload el-aria-label="Upload file" ref="upload" show-button="false" @change="onChange" />
<mx-button
  btn-type="simple"
  :icon="hasFile ? 'ph ph-trash-simple' : 'ph ph-arrow-fat-line-up'"
  @click="onButtonClick"
>
  {{ hasFile ? 'Remove' : 'Select file ...' }}
</mx-button>
1
2
3
4
5
6
7
onChange(e) {
  this.hasFile = e.target.files.length > 0
},
onButtonClick() {
  if (this.hasFile) {
    this.$refs.upload.removeFile()
  } else {
    this.$refs.upload.selectFile()
  }
},
1
2
3
4
5
6
7
8
9

# mx-image-upload

# Properties

Property Attribute Description Type Default
acceptImage accept-image Set acceptImage to false and acceptPdf to true to only accept PDF files. Set both to false to accept any file. boolean true
acceptPdf accept-pdf Set acceptImage to false and acceptPdf to true to only accept PDF files. Set both to false to accept any file. boolean false
assetName asset-name Replaces the word "image" in the default dropzone text (i.e. "No image to show"). string 'image'
assistiveText assistive-text Assistive text to display under the dropzone. To add markup, use the instructions slot directly instead. string undefined
avatar avatar Sets the width and height to 80px and changes the icon. boolean false
elAriaLabel el-aria-label The aria-label attribute for the inner input element. string undefined
error error boolean false
height height The height of the dropzone / thumbnail container (e.g. "400px" or "50%"). string undefined
icon icon The class name of the icon to use instead of the default icon. string undefined
inputId input-id The id attribute to apply to the input element. string undefined
isUploaded is-uploaded Set to true to show the Remove button, thumbnail, and uploaded slot content. boolean false
isUploading is-uploading Set to true to disable the button and show the circular progress indicator. boolean false
name name The name attribute for the input element. string undefined
removeButtonLabel remove-button-label The text to display on the Remove button string 'Remove'
showButton show-button Set to false to hide the default Upload/Remove button. boolean true
showDropzoneText show-dropzone-text Set to false to hide the dropzone text. boolean true
showIcon show-icon Set to false to hide the dropzone icon. boolean true
thumbnailSize thumbnail-size Sets the thumbnail sizing strategy relative to the container. "auto" \| "contain" \| "cover" \| "stretch" 'cover'
thumbnailUrl thumbnail-url The URL for the thumbnail of the currently selected image. string undefined
uploadBtnType upload-btn-type The btnType prop for the Upload button. "action" \| "contained" \| "outlined" \| "simple" \| "text" 'contained'
uploadButtonLabel upload-button-label The text to display on the Upload button string 'Upload'
width width The width of the dropzone / thumbnail container (e.g. "400px" or "50%"). string undefined

# Events

Event Description Type
mxThumbnailChange Emits the thumbnail url as CustomEvent.detail whenever it changes (i.e. after generating a data URI) CustomEvent<string>

# Methods

# removeFile() => Promise<void>

# Returns

Type: Promise<void>

# selectFile() => Promise<void>

# Returns

Type: Promise<void>

# Dependencies

# Depends on

# Graph

graph TD;
  mx-image-upload --> mx-circular-progress
  mx-image-upload --> mx-button
  style mx-image-upload fill:#f9f,stroke:#333,stroke-width:4px
1
2
3
4

If you are having trouble setting a prop or adding an event listener, refer to this page.

←