-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (123 loc) · 6.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>*.msg Reader</title>
<script src="dist/bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<style>
#dropZone {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: background-color 0.3s ease;
}
#dropZone.dragover {
background-color: #f0f0f0;
}
</style>
</head>
<body class="bg-gray-100 p-5">
<div class="max-w-3xl mx-auto bg-white shadow-lg rounded-lg">
<div class="p-4 border-b border-gray-200">
<h1 class="text-xl font-semibold text-gray-800">*.msg Reader</h1>
<input type="file" id="fileInput" class="mt-4 p-2 border border-gray-300 rounded hidden">
<div id="dropZone" class="mt-4 p-4 text-gray-600">
Drop the *.msg file here or click to select a file
</div>
</div>
<div id="emailViewer" class="p-4">
</div>
</div>
<script>
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const emailViewer = document.getElementById('emailViewer');
function handleFile(file) {
const reader = new FileReader();
reader.onload = function (e) {
const fileBuffer = e.target.result;
const msgInfo = window.extractMsg(fileBuffer);
console.log(msgInfo);
const toRecipients = msgInfo.recipients.filter(recipient => recipient.recipType === 'to').map(recipient => `${recipient.name} <${recipient.email}>`).join(', ');
const ccRecipients = msgInfo.recipients.filter(recipient => recipient.recipType === 'cc').map(recipient => `${recipient.name} <${recipient.email}>`).join(', ');
const emailHeader = `
<div class="mb-4">
<div class="text-gray-600"><strong>From:</strong> ${msgInfo.senderName} <${msgInfo.senderEmail}></div>
${toRecipients ? `<div class="text-gray-600"><strong>To:</strong> ${toRecipients}</div>` : ''}
${ccRecipients ? `<div class="text-gray-600"><strong>CC:</strong> ${ccRecipients}</div>` : ''}
<div class="text-gray-600"><strong>Subject:</strong> ${msgInfo.subject}</div>
<div class="text-gray-500 text-sm mt-2">${new Date(msgInfo.messageDeliveryTime).toLocaleString()}</div>
</div>
`;
const emailBody = `
<div class="prose max-w-none">${msgInfo.bodyContentHTML || msgInfo.bodyContent || '<p>(No content)</p>'}</div>
`;
let emailAttachments = '';
if (msgInfo.attachments && msgInfo.attachments.length > 0) {
emailAttachments = '<div class="mt-6"><strong>Attachments:</strong><div class="mt-2 space-y-2">';
msgInfo.attachments.forEach((attachment, index) => {
if (attachment.attachMimeTag && attachment.attachMimeTag.startsWith('image/')) {
emailAttachments += `
<div class="flex items-center space-x-2">
<a href="${attachment.contentBase64}" download="${attachment.fileName}" style="text-decoration:none;">
<div class="flex items-center space-x-2 rounded border p-1">
<div class="border rounded w-12 h-12 flex-shrink-0">
<img src="${attachment.contentBase64}" alt="Attachment ${index + 1}" class="w-12 h-12 object-cover">
</div>
<div class="no-underline">
<p class="no-underline text-sm text-gray-800">${attachment.fileName}</p>
<p class="no-underline text-xs text-gray-400">${attachment.attachMimeTag} - ${attachment.contentLength} bytes</p>
</div>
</div>
</a>
</div>
`;
} else {
emailAttachments += `
<a href="${attachment.contentBase64}" download="${attachment.fileName}" class="text-sm text-gray-600 no-underline">${attachment.fileName}</a>
<div class="rounded border">
<p class="text-xs text-gray-500">${attachment.attachMimeTag} - ${attachment.contentLength} bytes</p>
</div>
</a>
`;
}
});
emailAttachments += '</div></div>';
}
emailViewer.innerHTML = emailHeader + emailBody + emailAttachments;
};
reader.readAsArrayBuffer(file);
}
// Load file via file selection
fileInput.addEventListener('change', function (event) {
const file = event.target.files[0];
if (file) {
handleFile(file);
}
});
// Drag-and-drop events for the drop zone
dropZone.addEventListener('dragover', function (event) {
event.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', function (event) {
event.preventDefault();
dropZone.classList.remove('dragover');
});
dropZone.addEventListener('drop', function (event) {
event.preventDefault();
dropZone.classList.remove('dragover');
const file = event.dataTransfer.files[0];
if (file) {
handleFile(file);
}
});
dropZone.addEventListener('click', function () {
fileInput.click();
});
</script>
</body>
</html>