Image Picker

Uploading is the process of publishing information to a remote server via a web page or upload tool.

  • When you need to show the process of uploading.
  • When you need to upload files by dragging and dropping.

Install

import {ImagePicker} from '@xsolla/uikit';

Examples

Empty

With image

With persistent image

With error

Error

Disabled

Empty

With image

With error

Error

Disabled

Empty

Upload image

With image

random

With error

Upload image
Error

Disabled

Upload image

Usage

<ImagePicker name="image" input={{value: null, onChange: () => void 0}} url="/" />

API

PropertyDescriptionTypeDefault
inputconfig for redux-form or basic image pickerobject{}
nameimage picker namestringnull
disabledset the disabled status of image pickerboolfalse
appearancevisual appearancestringprimary, secondary,tertiary
captionupload caption for secondary appearancestringUpload image
metameta for redux-form or basic image pickerobject{touched: false, error: null}
urlUploading URLstring
responseKeyResponse image urlstringimage_url
onUploadStartcallback function that is fired when uploading startsfunction() => void 0
onUploadEndcallback function that is fired when uploading finishes either successfully or with error; accepts function with arguments: (response, error) => {}function() => void 0
HTTPClientset custom HTTP client. On image upload uses .post method with arguments: (url, data, config) => Promise. Config exampleaxios
dataIdattribute for data identifierstring
maxSizeMaximum file size (in bytes). Error message id: xsui.image-picker.max-size-error. Error message values (in megabytes): fileSize, maxSizenumber
isImagePersistentRemove the ability to delete an already uploaded image from pickerboolean
acceptedTypesArray of accepted typesarray['image/gif', 'image/jpg', 'image/jpeg', 'image/png', '.gif', '.jpg', '.jpeg', '.png']
formDataImageKeyFormData key for post request the image to serverstring"image"
formatErrorMessageText output if the format is incorrectstring"Unsupported image format."
onUploadImagecallback function that is fired before uploading starts, prevent upload, and return blob image filefunction(image: Blob) => void 0