/csv-markdown-file-preview v2
<!DOCTYPE html>
<html>
<head>
<title>Live File Combiner</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.2/papaparse.min.js"></script>
</head>
<body>
<h1>Upload your files</h1>
<input type="file" id="fileInput" multiple>
<div id="output"></div>
<script>
const output = document.getElementById('output');
document.getElementById('fileInput').addEventListener('change', async (event) => {
output.innerHTML = '';
const files = event.target.files;
for (const file of files) {
const ext = file.name.split('.').pop().toLowerCase();
if (ext === 'md') {
const text = await file.text();
const html = marked.parse(text);
output.innerHTML += `<div>${html}</div>`;
}
if (ext === 'csv') {
const text = await file.text();
const { data } = Papa.parse(text);
let table = '<table border="1">';
data.forEach(row => {
table += '<tr>' + row.map(cell => `<td>${cell}</td>`).join('') + '</tr>';
});
table += '</table>';
output.innerHTML += table;
}
if (['png','jpg','jpeg','gif'].includes(ext)) {
const url = URL.createObjectURL(file);
output.innerHTML += `<img src="${url}" style="max-width:300px;margin:10px;">`;
}
}
});
</script>
</body>
</html>