Load assets from server

JavaScript
1 
icons: Array<any> = [
		{canonical: 'router', readable: 'Router'},
		{canonical: 'webcam', readable: 'Webcam'}
];

loadAssets() {
		let icon_x = 30;
		let icon_y = 36;
        topology.registerIcon("router", "icons/router.png", icon_x, icon_y);
        topology.registerIcon("webcam", "icons/webcam.png", icon_x, icon_y);
}

These are the codes I have above I want to be able to access files from a server and once a file is added in the server folder I want the assets to update the content of the folders. and constantly refresh them for current content.

Thanks

2

I want the code to not be hard coded to load the assets into the app every time. I believe there is a way to not hard code it but im not sure how to go about it if that makes sense? Any help will be great!

3

Well if that code is supposed to run in the browser, you can’t directly look for folder contents on the server; you’ll need an endpoint which provides the concrete names of the files in a given directory. You might then request that list using AJAX, loop over it and register the icons etc. E.g. if you have an endpoint /assets which returns a JSON response like

[
  {
    "canonical": "router",
    "readable": "Router"
  },
  {
    "canonical": "router",
    "readable": "Router"
  }
]

you’d request that like

const ICON_X = 30
const ICON_Y = 36

const registerAsset = asset => topology.registerIcon(
  asset.canonical, 
  `icons/${asset.canonical}.png`, 
  ICON_X, 
  ICON_Y
)

fetch('/assets')
  .then(res => res.json())
  .then(assets => assets.forEach(registerAsset))
4

okay so i need it to get from all the items from the server and load them into the app. The app has each image file hard coded in it. Once the user uploads a file onto the server file path, which i have working. The image that the user uploads needs to show up into the app without having to hard code it like the first post code. similar to refreshing the app to new files able to be used.

5

Yes. So you need an endpoint to provide a list of files in that directory. I don’t know which language/framwork/CMS you’re using on the backend, but e.g. using express:

app.get('/assets', (req, res) => {
  fs.readdir('./assets', (err, files) => {
    if (err) {
      res.statusCode = 500
      return res.end(`${err}`)
    }

    res.end(JSON.stringify(files))
  })
})

This would list all files in the ./assets folder as a JSON array. If the user can upload files, you’ll probably want to store these files along with the associated user ID (and properties like your canonical etc.) in a database, and query the list there instead of just scanning the directory though. But again this is just an example… if you have trouble with this part and it’s not node-based you might also ask a question over at the PHP/Java/Python board.

6

This is the overview of the app project.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.