alexpreynolds · October 25, 2022 08:12
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Client-side BED file upload test</title>
 </head>

 <body>
  <div>
    <h5>Client-side BED file upload test</h5>
    <div>
      Input should be a tab-delimited text file, which <a href="https://samtools.github.io/hts-specs/BEDv1.pdf">follows specifications for the BED format</a>.
    </div>
    <hr>
    <div>
      <form name="uploadForm">
        <div>
          <input id="uploadInput" type="file" multiple />
        </div>
      </form>
      <hr>
      <div id="uploadedInput">
        <em>No data yet uploaded</em>
      </div>
    </div>
  </div>
  
  <script type="text/javascript">
    
    let fileInput = document.getElementById('uploadInput');
    
    fileInput.onchange = () => {
        const bedObjects = [];
        const reader = new FileReader();
        
        reader.onload = (e) => {
            const data = e.target.result;
            tabDelimitedLines = data.split('\n').map((ln) => ln.split('\t'));
            tabDelimitedLines.forEach((elems) => {
                //
                // at minimum, a BED file must have three columns, so we skip
                // any lines in the input which have fewer than three columns
                //
                // these three columns are the chromosome, start, and stop/end
                // position of genomic region
                //
                // if a BED file has additional columns, those can add additional
                // descriptive information about the region, such as an identifier,
                // numerical score, or strand/orientation on the genome
                //
                if (elems.length >= 3) {
                    let bedObject = {
                        chromosome: elems[0],
                        start: parseInt(elems[1]),
                        end: parseInt(elems[2]),
                    };
                    if (elems.length >= 4) {
                        bedObject = {...bedObject, id: elems[3]};
                    }
                    if (elems.length >= 5) {
                        bedObject = {...bedObject, score: parseFloat(elems[4])};
                    }
                    if (elems.length >= 6) {
                        bedObject = {...bedObject, strand: elems[5]};
                    }
                    bedObjects.push(bedObject);
                }
            });
            //
            // do something with bedObjects, such as
            // investigate in console or update div content
            //
            console.log(`${JSON.stringify(bedObjects, null, 2)}`);
            document.getElementById("uploadedInput").innerHTML=`<pre>${JSON.stringify(bedObjects, null, 2)}</pre>`;
        }
        
        for (let file of fileInput.files) {
            reader.readAsText(file);
        }
    }
    
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Client-side BED file upload test</title>
	</head>

	<body>
	<div>
	<h5>Client-side BED file upload test</h5>
	<div>
	Input should be a tab-delimited text file, which <a href="https://samtools.github.io/hts-specs/BEDv1.pdf">follows specifications for the BED format</a>.
	</div>
	<hr>
	<div>
	<form name="uploadForm">
	<div>
	<input id="uploadInput" type="file" multiple />
	</div>
	</form>
	<hr>
	<div id="uploadedInput">
	<em>No data yet uploaded</em>
	</div>
	</div>
	</div>

	<script type="text/javascript">

	let fileInput = document.getElementById('uploadInput');

	fileInput.onchange = () => {
	const bedObjects = [];
	const reader = new FileReader();

	reader.onload = (e) => {
	const data = e.target.result;
	tabDelimitedLines = data.split('\n').map((ln) => ln.split('\t'));
	tabDelimitedLines.forEach((elems) => {
	//
	// at minimum, a BED file must have three columns, so we skip
	// any lines in the input which have fewer than three columns
	//
	// these three columns are the chromosome, start, and stop/end
	// position of genomic region
	//
	// if a BED file has additional columns, those can add additional
	// descriptive information about the region, such as an identifier,
	// numerical score, or strand/orientation on the genome
	//
	if (elems.length >= 3) {
	let bedObject = {
	chromosome: elems[0],
	start: parseInt(elems[1]),
	end: parseInt(elems[2]),
	};
	if (elems.length >= 4) {
	bedObject = {...bedObject, id: elems[3]};
	}
	if (elems.length >= 5) {
	bedObject = {...bedObject, score: parseFloat(elems[4])};
	}
	if (elems.length >= 6) {
	bedObject = {...bedObject, strand: elems[5]};
	}
	bedObjects.push(bedObject);
	}
	});
	//
	// do something with bedObjects, such as
	// investigate in console or update div content
	//
	console.log(`${JSON.stringify(bedObjects, null, 2)}`);
	document.getElementById("uploadedInput").innerHTML=`<pre>${JSON.stringify(bedObjects, null, 2)}</pre>`;
	}

	for (let file of fileInput.files) {
	reader.readAsText(file);
	}
	}

	</script>
	</body>

	</html>