rendering volume from locally loaded files

[jjustinm4]

I am trying to load a series of files locally and render them as volume . thought the files are valid dicom files . this code doesnt work . Am i correctly getting imagID's here ? No samples are given about how to render a volume from local files.

`
function loadVolumes() {
// Create an input element for file selection
const input = document.createElement('input');
input.type = 'file';
input.multiple = true; // Allow multiple file selection
input.accept = ''; // Limit to DICOM files

// Listen for file selection
input.addEventListener('change', async (event) => {
const target = event.target as HTMLInputElement;
const filechosen = Array.from(target.files || []) as any;

if (filechosen.length === 0) {
  return;
}
//cornerstoneDICOMImageLoader.wadouri.fileManager.add(file)

console.log('Selected files:', filechosen);

try {
  cornerstoneDICOMImageLoader.wadouri.fileManager.purge();
  cache.purgeCache();
  cache.purgeVolumeCache();
  for (let i = 0; i < filechosen.length; i++) {
    const id = cornerstoneDICOMImageLoader.wadouri.fileManager.add(
      filechosen[i]
    );
    await prefetchMetadataInformation(id);
    imageIds.push(id);
  }
  console.log('Image IDs generated lcally:', imageIds);

  if (imageIds.length > 0) {
    await run(); // Run the rendering after getting image IDs
  }
} catch (error) {
  console.error('Error generating image IDs:', error);
}

});

// Programmatically click the input to open the file dialog
input.click();
}
async function prefetchMetadataInformation(imageIdsToPrefetch) {
for (let i = 0; i < imageIdsToPrefetch.length; i++) {
await cornerstoneDICOMImageLoader.wadouri.loadImage(imageIdsToPrefetch[i])
.promise;
}
}

// Ensure your existing code correctly imports and uses createImageIdsAndCacheMetaData and run

/**

• Runs the demo
  */
  async function run() {
  // Init Cornerstone and related libraries
  await initDemo();

// Get Cornerstone imageIds and fetch metadata into RAM
if (imageIds.length == 0) {
imageIds = await createImageIdsAndCacheMetaData({
StudyInstanceUID:
'1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463',
SeriesInstanceUID:
'1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561',
wadoRsRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
});
}

console.log('this is id', imageIds);
// Instantiate a rendering engine
const renderingEngineId = 'myRenderingEngine';
const renderingEngine = new RenderingEngine(renderingEngineId);

// Create a stack viewport
const viewportId = 'CT_SAGITTAL_STACK';
const viewportInput = {
viewportId,
type: ViewportType.ORTHOGRAPHIC,
element,
defaultOptions: {
orientation: Enums.OrientationAxis.SAGITTAL,
background: <Types.Point3>[0.2, 0, 0.2],
},
};

renderingEngine.enableElement(viewportInput);

// Get the stack viewport that was created
const viewport = <Types.IVolumeViewport>(
renderingEngine.getViewport(viewportId)
);

// Define a unique id for the volume
const volumeName = 'CT_VOLUME_ID'; // Id of the volume less loader prefix
const volumeLoaderScheme = 'cornerstoneStreamingImageVolume'; // Loader id which defines which volume loader to use
const volumeId = ${volumeLoaderScheme}:${volumeName}; // VolumeId with loader id + volume id

// Define a volume in memory
const volume = await volumeLoader.createAndCacheVolume(volumeId, {
imageIds,
});

// Set the volume to load
volume.load();

// Set the volume on the viewport
viewport.setVolumes([
{ volumeId, callback: setCtTransferFunctionForVolumeActor },
]);

// Render the image
viewport.render();
}

run();
`