Upload mode (Form Builder) | FB_032
Make how-to guides like this one in a snap.
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

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
2

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

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
3

Click on Scripts

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
4

Navigate to the config of the Infigo Form Builder script

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
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.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
6

Click on Save and Continue Edit

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
7

Launch your product

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
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)

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
9

Check User image select

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

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
10

Select FitToBleed

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
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.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
12

Resized image field to match the canvas bleed

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
13

If we change the canvas, the field will automatically resize

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
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.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
15

Uploaded image

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
Well done!
Create how-to guides like this in a snap. Get Tango now.