Uploading CZML

CesiumJS
1

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"
       onclick="document.getElementById('myFileInput').click()"
       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</
         >
</form>

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

2

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

3

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.

4

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

Scott

5

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?

6

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:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Viewer/viewerDragDropMixin.js#L209

7

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

8

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.