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.

  1. 1. Begin by navigating to the MegaEdit Config of your product

    Begin by navigating to the MegaEdit Config of your product

  2. 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. 3. Click on Scripts

    Click on Scripts

  4. 4. Navigate to the config of the Infigo Form Builder script

    Navigate to the config of the Infigo Form Builder script

  5. 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. 6. Click on Save and Continue Edit

    Click on Save and Continue Edit

  7. 7. Launch your product

    Launch your product

  8. 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. 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. 10. Select FitToBleed

    Select FitToBleed

  11. 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. 12. Resized image field to match the canvas bleed

    Resized image field to match the canvas bleed

  13. 13. If we change the canvas, the field will automatically resize

    If we change the canvas, the field will automatically resize

  14. 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. 15. Uploaded image

    Uploaded image