Upload mode (Form Builder) | FB_032
SW

Sam Webster

Created Feb 20, 2024

Upload mode (Form Builder) | FB_032

In this tutorial, we'll take a look at one of the Form Builder's available modes, which tailor the experience directly to how you wish your end users to interact with this product.

Here, we'll be taking a look at the Upload mode. This mode keeps the interface nice and simple, allowing end users to simply upload their own artwork to predefined frames via the user-facing form within MegaEdit. This is great primarily used for poster or canvas products, however has wide reaching potential.

14
1

Begin by navigating to the MegaEdit Config of your product

Begin by navigating to the MegaEdit Config of your product
2

For this example, we will apply more than 1 canvas to demonstrate how the upload mode can be effectively utilised

For this example, we will apply more than 1 canvas to demonstrate how the upload mode can be effectively utilised
3

Click on Scripts

Click on Scripts
4

Navigate to the config of the Infigo Form Builder script

Navigate to the config of the Infigo Form Builder script
5

Input the line instanceEditorMode: 'Upload'

This sets the Infigo Form Builder to utilise its upload mode. This pre-configures its capabilities to match this particular mode.

Input the line instanceEditorMode: 'Upload'
6

Click on Save and Continue Edit

Click on Save and Continue Edit
7

Launch your product

Launch your product
8

Add an image field and perform basic configuration using the Infigo Form Builder

This includes the usual steps of applying a field name and defining interactivity options.

For this configuration, it is most likely the user should not be able to interact with the field (deselecting all interactivity toggles)

Add an image field and perform basic configuration using the Infigo Form Builder
9

Check User image select

This will allow our users to upload custom imagery to the field via the customer-facing form

Check User image select
10

Select FitToBleed

Select FitToBleed
11

Click the '+' icon to add the FitToBleed field tag to the field

This will ensure that, regardless of the canvas used, the field will always resize to correspond to the canvas bleed.

Other tutorials are available on the Infigo Academy going into this function in more detail.

Click the '+' icon to add the FitToBleed field tag to the field
12

Resized image field to match the canvas bleed

Resized image field to match the canvas bleed
13

If we change the canvas, the field will automatically resize

If we change the canvas, the field will automatically resize
14

End users will be able to interact with an upload button in the user-facing form

This will allow them to upload imagery from their computer.

End users will be able to interact with an upload button in the user-facing form
15

Uploaded image

Uploaded image
Well done!
Create how-to guides like this in a snap. Get Tango now.