Contents x
    File upload & handling
    • 10 Oct 2024
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    Contents

    File upload & handling

    • Updated on 10 Oct 2024
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    Article summary

    General

    Files that are uploaded into a Configuration are so called Configuration Files.
    They can either be uploaded by the end-user via SigSlos or with Custom Code.
    Afterwards they are permanently linked to the current configuration and can be accessed via Hive or viewed in the Configuration Insights.

    SigSlo - End-user upload

    Uploading a file is very easy to achieve:
    image.png

    1. Select any Signal. E.g. Clicked of a Button
    2. As slot choose Configurator which is the top-most element of the controls
    3. Select one of the Upload slots
      • Upload image: Only images are allowed. Unsupported formats will not be uploaded
      • Upload file: Any file can be uploaded
    4. Enter a unique name for your file
    5. [Optional] Enter a Download name, which will be the filename when the user downloads it

    Afterwards you can test it right away in the Preview of your configurator.

    1. Upload an image with the button
    2. Open the watches on the right
    3. Enter Configuration.getImage("myImage")
      • myImage has to be name you entered in the SigSlo parameters
    4. Afterwards you should see an JSON object below with the Url and some metadata (width, height, etc.)

    Usage in Hive

    Hive provides two functions to retrieve the uploaded file:

    • configuration.getImage("myImage")
    • configuration.getFile("myFile")

    If there isn't an uploaded file yet (or the name is invalid) the value will be Empty. Therefore it's required to do an empty check before accessing properties like the url.

    var myImage = configuration.getFile("myImage");
if myImage is empty then
  "url empty"
else
  myImage.url
end

    Custom Code

    Custom code allows you to upload programmatically created files like screenshots from a 2D or 3D preview, datasheets or similar.
    The available functions can be found under the namespace CfgnFiles.
    All functions can be awaited and will directly return the url of the uploaded file.
    Besides that, they are also available in Hive like explained in the previous chapters.

    Example - Upload screenshot

    const uploadResult = await CfgnFiles.uploadImages({
    screenshotTopView: { file: myScreenshotFile, displayName: 'top-view-2024-09-16' },
  });

  if (uploadResult.success) {
    console.log(uploadResult.urls.screenshotTopView);
  }

    Example - Upload dummy file

    await CfgnFiles.uploadFiles({
    fileText: {
      file: new File(['Lorem ipsum'], 'dummy.txt'),
    },
  });

    Creating PDF files

    With the function CfgnFiles.createPdfFromHtml() you can create a PDF file from any HTML string.

    For details on how to create the HTML see: Create PDF from HTML content

    Example - Create PDF from HTML

    const resultUrl = await CfgnFiles.createPdfFromHtml(
    'bomPdf',
    '<html><body>Hello world content</body></html>',
    'cfgr-bom-' + Date.now(),
    { displayHeaderFooter: true, headerTemplate: '<html><body>My Header</body></html>' }
);
console.log('url is: ', resultUrl);

    Configuration Insights

    Note

    Insights are only available for published or staged configurators.
    Configurations of a preview can't be found under Configuration Insights.

    All the uploaded files of a configuration are permanently stored and can be viewed in the Configuration Insights afterwards.
    To view them, simply open the Configuration details of a Configuration and expand the Files section.
    image.png

    Was this article helpful?
    What's Next
    General
    Knowledge
    Support
    Follow Us