Question to configurator.uploadFile()

paramate frontend libraries
#1

I’m trying to upload a file to the configurator with a button “load file to configurator” (see minimal example below) and the configurator.uploadFile() function. But I’m not sure about the options of the function, e.g. the “HTML file object” and the “file ID”.
I always get the error: TypeError: b is undefined

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
  <title>File upload test</title>
  <link rel="stylesheet" type="text/css" href="https://libs.paramate.trinckle.com/paramateViewport-latest.css">
  <script src="https://libs.paramate.trinckle.com/paramateConfigurator-latest.js"></script>
  <script src="https://libs.paramate.trinckle.com/paramateControls-latest.js"></script>
  <script src="https://libs.paramate.trinckle.com/paramateViewportWebGL-latest.js"></script>
</head>
<body>
  <div id="viewPort" style="width: 500px; height: 500px;"></div>
  <div id="controls"></div>
<script>
var configurator
var viewPort
var controls

window.onload = function(){

  // Create configurator object
  configurator = new Paramate.Configurator({
    APIHub: 'https://api.paramate.trinckle.com',
    configuratorId: '588c596b-1a49-4423-b834-8b9a43a8f69f',
    APIKey: '4db800982c753b662b75d065ccb77830'
  });

  // Create viewport object
  viewPort = new Paramate.ViewportWebGL({
    configurator: configurator,
    viewportElement: document.getElementById('viewPort')
  });

  // Create controls object
  controls = new Paramate.Controls({
    configurator: configurator,
    containerElement: document.getElementById('controls')
  });

  // Register viewport and controls
  configurator.viewPort = viewPort;
  configurator.controls = controls;

  // Start configurator
  configurator.initialize();
}

function getFileAndUpload(){
  // get HTML file object
  var HTMLfile = document.getElementById("LOGOupload");
  console.log(HTMLfile);

  // define ID to upload the file to
  var fileID = "main:LOGOupload";

  // upload file in configurator with options: HTML file object, file ID, progress, success
  configurator.uploadFile(HTMLfile,fileID,function(progress){console.log(progress);},function(success){console.log(success);});
}
</script>

  <!-- upload a file on webpage to create HTML file object -->
  upload a file <input type="file" id="LOGOupload">
  <br><br>

  <!-- upload file in configurator -> "TypeError: b is undefined" -->
  <button type="button" name="button" onclick="getFileAndUpload()">load file to configurator</button>

</body>
</html>
#2

Hi,

The parameters of the uploadFile function should be in a JS object, like this:

configurator.uploadFile({file: fileObject, fileId: fileID, progress: progressFunction, success: successFunction});

Also the fileObject is actually one file of the file input HTML element, that can be accessed by fileElement.files[0].
And the progress function is assigned to an XMLHttpRequest so it gets an event that has a “loaded” and “total” member.
The success function gets an object, the same as the return value, so it is an object with a “token” member.

With all these, your line should look like this:

configurator.uploadFile({file: HTMLfile.files[0], fileId: fileID, progress: function(progress){console.log(progress.loaded / progress.total);},success: function(res){console.log(res.token);}});

p.s.: I see that the documentation of this function is not sufficient, I will fix that with the same information

#3

hmm, I am still getting the same error

I changed the following two lines:

var HTMLfile = document.getElementById("LOGOupload").files[0];

configurator.uploadFile(HTMLfile,fileID,function(progress){console.log(progress.loaded/progress.total);},function(result){console.log(result.token);});

I am still not sure if the file format and the fileID (= parameter name in main.sps?) are correct?

#4

please note the syntax. you are still using function parameters, but the function should have one parameter that is a JavaScript object:

{ file: HTMLfile.files[0], fileId: fileID, progress: function(progress){console.log(progress.loaded / progress.total);}, success: function(res){console.log(res.token);} }

the fileID does not matter much in this case, because the token in the result will have to be set as the value for the file open parameter.

#5

Thank you very much, it works