Uploading CZML

1. A concise explanation of the problem you're experiencing.

I am trying to program a button to open the file explorer and upload a .czml file into a cesium instance.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

My first solution creates the buttons and opens the file explorer but does not upload the files:

<input type="file" id="myFileInput" />
<input type="button"
       value="Run" />

My second solution also creates the buttons and opens the file explore, but when a file is selected and the upload button is clicked the user receive HTTP 404.0 error. :

<form action = "upload.php" method = "POST" enctype = " multipart/form-data">
  <input type = "file" name = "file">
  <button type = "submit" name = "submit">UPLOAD</

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I have a Mat Lab based Satellite simulation that outputs a .czml file that we want to upload into cesium for better visualization results.

4. The Cesium version you're using, your operating system and browser.

Cesium version:1.50 Operating system: windows(visual studio) Browser: Google chrome

I think the first solution should work.

This is a good tutorial/reference to follow for doing this: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

Should I be using the cesium.CzmlDataSource.load(czml,options) command. if so where should I be using it and I'm assuming the czml parameter would just be the file I'm passing through, what would be the options parameter.

You only need to specify the czml parameter as the URL of the file you have already uploaded to the server.


So am I correct to use a php post request to send the CZML file to the server and if so how do obtain the url?

If you’re loading a local CZML file, then you can load the contents using the normal browser API, then parse the JSON and load the data into Cesium directly. No need to send to a server.

You can see similar code in Cesium which loads from a file using FileReader in the drag-and-drop handling code:


I was actually reviewing this code today I guess my confusion comes into place on how i manipulate this code to work with my first solution stated above

Here’s a minimal Sandcastle example of using the browser File API to let the user upload a CZML file.

You can handle any other file upload in the same way.