Change filepicker icon and other setting

Hi
I want to ask you about filepicker I tried the example of GoCloudStorage in my computer but the filePcker has no icon (the left icon displayed when I choose save or remove ) how can I add icon and change button style and other details
thank you

The icons are assumed to be in the iconsRelativeDirectory property, which defaults to ../goCloudStorageIcons/.

sorry to bother you but if I tried to add an icon and I follow the below but still not displaying:
gls = new gcs.GoLocalStorage(myDiagram,"/iconFolder/icon1.png");
where iconFolder is in the same project

As you can see in the source code, storage/src/GoLocalStorage.ts, the constructor takes three arguments, where the third argument is the optional iconsRelativeDirectory path.

i tried this but still not working
gls = new gcs.GoLocalStorage(myDiagram,defaultModel,“…\iconFolder\icon1.png”);

Can you please check the syntax of your path? Remember that this is JavaScript and the path needs to be a URL.

I also notice your path parameter includes a file (“icon1.png”). The path parameter should not include any files – it should just be the path where those logo files are located.

sorry but I am still confused
here is the structure of my project:

%D8%A7%D9%84%D8%AA%D9%82%D8%A7%D8%B7

and I write in NewFile.html
gls = new gcs.GoLocalStorage(myDiagram,defaultModel,“url(…/iconsFolder/)”);

and the output I got is
re

in the top left corner the icon still not changed

use

"../iconsFolder/"

as your third parameter

Thank you very much for your time
I tried it but unfortunately it did not work I do not know where the problem is :(

Are there any errors or warnings in the console?

If you type

gls.iconsRelativeDirectory

in the console and press enter, what do you see?

sorry I am beginner
where can I find the console please

In most web browsers, pressing F12 will open the dev tools, one of which will be the console window.

ss

i got this

OK, that is the default value for the iconsRelativeDirectory property, meaning whatever you are passing to your GoLocalStorage is not being accepted or is being overridden elsewhere in your code. Are you sure you are only initializing one instance of GoLocalStorage? Can I see the code you are using to construct it?

Also, what is going on in line 108 of NewFile.html that’s giving you that error? It may be unrelated, but it’s worth investigating

<title>GoCloudStorageManager test</title>

<link rel="stylesheet" type="text/css" href="v.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.23/go-debug.js"></script>

<script src="../lib/gcs.js"></script>
<button id="openButton" onclick="handlePromise('Load')">Load </button>

<button id="saveButton" onclick="handlePromise('SaveAs')">Save As</button>


<h3 id="currentFile">Untitled </h3>
<div>
    <h4>Diagram 1</h4>
    <div id="myDiagramDiv" style="height: 300px; width: 300px; background-color: lightgray;"></div>
</div>



<script>

    

    

    var $ = go.GraphObject.make;
    myDiagram = $(go.Diagram, "myDiagramDiv",  {
                  initialContentAlignment: go.Spot.Center,  // center the content
                  "undoManager.isEnabled": true  // enable undo & redo
              });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },  // some room around the text
          new go.Binding("text", "key"))
      );

    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", color: "lightblue" },
      { key: "Beta", color: "orange" },
      { key: "Gamma", color: "lightgreen" },
      { key: "Delta", color: "pink" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" },
      { from: "Beta", to: "Beta" },
      { from: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);

    defaultModel = myDiagram.model.toJson();



    

    // update the title on page to reflect newly loaded diagram title TODO
    

    /* 
    * Promise handler for core functions
    * @param {String} action Accepted values: Load, Delete, New, Save
    */
    var handlePromise = function (action) {

        
        switch (action) {
        case 'Load': gls.loadWithUI().then(function (fileData) { 
            handleFileData(action, fileData); 

            }); break;
            
            
            case 'SaveAs': gls.saveWithUI().then(function (fileData){
                handleFileData(action, fileData);
            }); break;
            
        }
    }

    function init() {
        
        gls = new gcs.GoLocalStorage(myDiagram,defaultModel,"../iconsFolder/");

        
        
        
    }

</script>

and for the CSS I used excatly what is in the example for CloudStorage

Ah, this is a bug. Thank you for finding it for us.

It will be fixed in the next release. For now, replace your gcs.js file contents with the contents of this gist: GoCloudStorage fixed 9-5-2018 · GitHub

That should fix the problem, please let me know if it does not

still not working
I got the same output as before
is there any other way to fix this?

I have tried it a few different times, in a few different files, it is working.

Have you replaced your entire gcs.js file contents with the contents of the gist I sent?

Is it possible the browser cache is remembering old files / not updating with the new gcs.js? Try clearing your browser history and trying again.

yes I replaced it all
i tried two times but still have the same problem
I cleared the browser and tried again but the problem remains