MiImagePicker

The MiImagePicker component is a stateful Flutter widget that allows users to select and upload images from camera or gallery.

Overview

MiImagePicker provides a user-friendly interface for image selection and upload in Flutter applications. Key features:

• Image selection from camera or gallery.
• Single or multiple image selection.
• Image compression before upload.
• Direct cloud storage upload with signed URLs.
• JSON configuration for customization.
• Optional image tagging.
• Local image preview.
• Data binding for selected image paths.

Component Name: imagePicker

JSON key: "component": "imagePicker".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
imagePath	String or List<String>	dynamic	Image Path: State variable key for uploaded image path(s). List if allowMultiple is true, String otherwise.	null	Yes	No
folderPath	String	String	Folder Path: Cloud storage folder path for uploads (e.g., AWS S3).	null	Yes	No
public	bool	bool	Public: If true, images are publicly accessible in cloud storage.	false	Yes	No
allowMultiple	bool	bool	Allow Multiple: Enables multiple image selection if true.	true	Yes	No
maxImages	int	int	Max Images: Maximum number of images selectable when allowMultiple is true.	null	Yes	No
signedUrlApi	Map	Map	Signed URL API: API call details for pre-signed URLs. Includes keys: "path", "data", "filePathKey", "contentTypeKey", "resultUrlKey".	null	Yes	No
label	String	String	Label: Text label above the upload button.	null	Yes	No
description	String	String	Description: Descriptive text below the label.	null	Yes	No
imageTaggingKey	String	String	Image Tagging Key: State variable key for image tag value. Enables tagging if provided.	null	Yes	No
imageTaggingLabel	String	String	Image Tagging Label: Label for the tagging input/button.	"Add Tag"	Yes	No
imageTaggingTextFieldLabel	String	String	Image Tagging Text Field Label: Label for the tag text field.	"Tag"	Yes	No
localPreview	bool	bool	Local Preview: If true, show local image previews before upload.	false	Yes	No
maxUploadSize	num	double	Max Upload Size: Maximum image file size in KB.	null	Yes	No
allowedExtensions	List<String>	List	Allowed Extensions: List of allowed file extensions (e.g., ['jpg', 'png']).	['jpg', 'png', 'jpeg']	Yes	No
padding	List<num>	EdgeInsets	Inner Padding: Padding within the component container.	null	Yes	No
margin	List<num>	EdgeInsets	Outer Margin: Margin around the component.	null	Yes	No
alignment	String	AlignmentGeometry	Alignment: Alignment of the component within its parent.	"topLeft"	Yes	No
color	String	Color	Background Color: Background color of the container.	null	Yes	No
width	num	double	Fixed Width: Fixed component width.	null	Yes	No
height	num	double	Fixed Height: Fixed component height.	null	Yes	No

Note:

• Data Binding: imagePath binds to a state variable for uploaded image paths.
• Signed URL API: Configure signedUrlApi for direct cloud uploads.
• Image Tagging: Enable tagging with imageTaggingKey and related parameters.
• Configuration: Customize appearance and behavior using JSON parameters.

Example JSON Configuration

Example 1: Basic Image Picker

{
  "component": "imagePicker",
  "label": "Upload Image",
  "imagePath": "profileImagePath"
}

Explanation of Example 1:

• This is the most basic configuration for MiImagePicker.
• It sets the "component" to "imagePicker" to identify the component type.
• "label": "Upload Image" provides a user-friendly label for the button.
• "imagePath": "profileImagePath" binds the selected image path to the state variable profileImagePath.

Example 2: Image Picker with Folder and Signed URL API

{
  "component": "imagePicker",
  "label": "Upload Product Image",
  "folderPath": "product-images",
  "signedUrlApi": {
    "path": "/api/get-signed-url",
    "data": {},
    "filePathKey": "file_path",
    "contentTypeKey": "content_type",
    "resultUrlKey": "${DATA.uploadUrl}"
  },
  "imagePath": "productImagePath"
}

Explanation of Example 2:

• This example expands on the basic configuration by adding cloud storage upload capabilities.
• "folderPath": "product-images" specifies that images will be uploaded to the product-images folder in cloud storage.
• "signedUrlApi" is configured to use an API endpoint /api/get-signed-url to obtain pre-signed URLs for secure uploads. It defines the keys for file path, content type in the request, and how to extract the upload URL from the API response.

Example 3: Image Picker with Multiple Selection and Tagging

{
  "component": "imagePicker",
  "label": "Upload Multiple Images",
  "allowMultiple": true,
  "imageTaggingKey": "imageTag",
  "imagePath": "imagePaths"
}

Explanation of Example 3:

• This example demonstrates enabling multiple image selection and image tagging.
• "allowMultiple": true allows users to select multiple images.
• "imageTaggingKey": "imageTag" enables the tagging feature and binds the tag value to the imageTag state variable.

Example 4: Image Picker with Size Limit and Allowed Extensions

{
  "component": "imagePicker",
  "label": "Upload File",
  "maxUploadSize": 1024,
  "allowedExtensions": ["jpg", "png"],
  "imagePath": "filePath"
}

Explanation of Example 4:

• This example showcases how to restrict upload file size and types.
• "maxUploadSize": 1024 limits the maximum upload size to 1024 KB (1MB).
• "allowedExtensions": ["jpg", "png"] restricts the selectable file types to JPG and PNG images.