dump/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <link rel="stylesheet" type="text/css" href="../stylesheets/stylesheet.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="../stylesheets/pygment_trac.css" media="screen" />

    <script src="../javascripts/libs/pace.js"></script>
    <link rel="stylesheet" type="text/css" href="../stylesheets/pace-theme-loading-bar.css" media="screen" />

    <script src="../javascripts/libs/jquery-1.10.2.js"></script>
    <script src="../javascripts/utils.js"></script>

    <script>

$(function() {

  dcmjs.utils.initialize();

  var dcmdump = function(reader, file) {
    var fileName = '/uploadedfile.dcm';

    $('#main_content').append('<p class="output">Writing...</p>');
    var content = new Int8Array(reader.result);
    FS.writeFile(fileName, content, {encoding: "binary"});

    $('#main_content').append('<p class="output">Dumping...</p>');
    dcmjs.utils.execute('dcmdump', [fileName]);
  }

  var readSelectedFiles = function(files) {
    $('#main_content p.output').remove();
    $('#main_content').append('<p class="output">Reading...</p>');
    $.each(files, function(index,file) {
      dcmjs.utils.readFile(file, dcmdump);
    });
  }

  // File selector
  function handleFileSelect(e) {
    evt = e.originalEvent
    var files = evt.target.files; // FileList object
    dcmjs.utils.displayFileProperties(files)
    readSelectedFiles(files);
  }

  // Setup the file selector listener
  $('#fileSelector').bind('change', handleFileSelect)

  // Drag and Drop
  function handleFileDrop(e) {
    evt = e.originalEvent
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object
    dcmjs.utils.displayFileProperties(files)
    readSelectedFiles(files);
  }

  // Setup the dnd listeners
  function ignoreDrag(e) {
    e.originalEvent.stopPropagation();
    e.originalEvent.preventDefault();
    e.originalEvent.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }
  $('#fileDropZone').bind('dragenter', ignoreDrag).bind('dragover', ignoreDrag).bind('drop', handleFileDrop);

  /*
    Override print
  */
  var printToMainContext = function(s) {
    $('#main_content').append('<p class="output">' + s + '</p>');
  };
  Module.print = printToMainContext;

  /*
    Clean up and start
  */
  $('#main_content p.output').remove();
});

    </script>

    <title>dcmjs by commontk</title>
  </head>

  <body>

<header>
  <div class="container">
    <h1>dcmjs dump</h1>
    <h2>View the header of a dicom file using dcmjs</h2>
  </div>
</header>

<div class="container">
  <section id="main_content" style="display:none;">

    <!-- File selector -->
    <p>Browse for DICOM files:</p>
    <input type="file" id="fileSelector" name="selectorFiles[]" multiple />
    <output id="fileSelectorOutput"></output>

    <p>Or</p>

    <!-- Drag and Drop -->
    <div class="files_wrapper">
      <div class="area_file" id="fileDropZone">Drop your DICOM files here</div>
    </div>

    <output id="fileListProperties"></output>

    <p class='output'>Waiting...</p>

  </section>
</div>


<!-- google analytics -->
<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
  try {
    var pageTracker = _gat._getTracker("UA-50750505-1");
  pageTracker._trackPageview();
  } catch(err) {}
</script>

  </body>
</html>