Images

Manage your uploaded files and enable or disable them from here. By default, this feature is enabled.

mailui.init({
    features: {
        userUploads: {
            enabled: true
        },
    },
});

Fetch Uploads Listener #

If you want full control over image uploading, fetching, and management, you can use the following callbacks for uploading, fetching, and removing images.

mailui.registerProvider(
      "userUploads",
      async (params: { page: number; perPage: number; mediaType: MediaType }, done: Function) => {
        done(data, meta);
      }
    );

Params #

Property	Description	Type	Default
page	The current page number	number	1
perPage	The number of items displayed per page	number	20
mediaType	Different type of media can be specify	image icon	image

Callback Data #

Property	Description	Type	Default
id	Unique number	any	-
fileName	Media file name	string	-
src	Media full url	string	-
alt	Media alt text	string	-

Callback Meta #

Property	Description	Type	Default
page	The current page number	number	1
lastPage	The total number of pages	number	-
perPage	The number of items displayed per page	number	20
total	The total number of items	number	-

On Upload Listener #

Triggers when a user uploads files, handling and processing them as needed.

mailui.registerProvider(
    "image:onUpload",
    async (params: { file: File; mediaType: MediaType }, done: Function) => {
        try {
            const media = {};
            done(media);
        } catch (error) {
            done(null);
            console.log("An error has occurred during upload file.");
        }
    }
);

Params #

Property	Description	Type	Default
file	Uploaded BLOB file type	file	-
mediaType	Different type of media can be specify	image icon	image

Media Properties #

Property	Description	Type	Default
id	Unique number	string \| number	-
fileName	Media file name	string	-
src	Media full url	string	-
alt	Media alt text	string	-

Remove Listener #

Triggers when a user remove uploaded files, handling and processing them as needed.

mailui.registerCallback("image:onRemove", async (image: Media, done: Function) => {
    // Add your code here
    
    done();
});

Params #

Property	Description	Type	Default
image	Image has all media properties {id: '', fileName: '', src: '', alt: ''}	media{}	-

Images

Fetch Uploads Listener #

Params #

Callback Data #

Callback Meta #

On Upload Listener #

Params #

Media Properties #

Remove Listener #

Params #

Explore Our Email Builder