I am building an interactive graph app where the user would upload a data file. The app would then build the graph from the input file.
I am having problems with making the input work with a graph API (cytoscape). More specifically, the file dialog window does not pop up when I include the div. That is, the input button is not responsive unless I comment out the API div.
Please see the code below. I guess this is not specific to the graph component. However, I could not get to the bottom of this, so I am posting the complete instance of the problem.
function updateSize() {
let nBytes = 0,
oFiles = this.files,
nFiles = oFiles.length;
for (let nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
let sOutput = nBytes + " bytes";
// optional code for multiples approximation
const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}
// end of optional code
document.getElementById("fileNum").innerHTML = nFiles;
document.getElementById("fileSize").innerHTML = sOutput;
console.log("AAAA!")
}
document.getElementById("uploadInput").addEventListener("change", updateSize, false);
// https://blog.js.cytoscape.org/2016/05/24/getting-started/
var cy = cytoscape({
container: document.getElementById('cy'),
// ~~~~~~~~~~~~~~~~~~~
elements: [{
data: {
id: 'a'
}
},
{
data: {
id: 'b'
}
},
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}
],
// ~~~~~~~~~~~~~~~~~~~
style: [{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red',
label: 'data(id)'
}
}]
});
cy.layout({
name: 'circle'
}).run();#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}<body>
<form name="uploadForm">
<div>
<input id="uploadInput" type="file" name="myFiles" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span>
</div>
<div><input type="submit" value="Send file"></div>
</form>
<div>
<h1>This!</h1>
</div>
<div id="cy"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.20.0/cytoscape.min.js" integrity="sha512-cjmYAonfXK+azDmWqvnqq8xmygHRHqVI7S0zuRxQnvcYVeoakwthRX6pPKoXfG1oIjDvMUtteRV9PhQjJwKWxQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
