Tweet
Anzeigen von Anhängen mit der HTTP API
Hallo Volk,
ich versuch nun seit zwei Tagen mich durch die API zu fressen um E-Mails anzuzeigen. Bisher nutze ich den Code von: http://oxpedia.org/wiki/index.php?ti...P_API_Examples welcher auch gut Funktioniert. Nun lass ich nur eine E-Mail anzeigen und zwar hiermit:
was ebenfalls ohne Probleme läuft, jedoch will ich nun auch die Anhänge anzeigen lassen und nutze dafür den GET /ajax/attahment?action=get Befehl. Dieser klappt auch (Firebug spuckt als Antwort im Header die richtige Datei aus) jedoch will ich diese nun anzeigen lassen auch als Link, eventuell mit Download (wenn möglich). Nun wüsst ich gern ob dies überhaupt möglich ist mit dem Befehl und weiterhin wie ich am besten nun an die Daten genau komme. Ich will keine Fertigen lösungen, nur Hinweise, Tips oder Tricks. Sonst lern ich ja nichts dabei. Finde es halt nur schwer in sowas als Nicht-Kenner der Sprache dort reinzuarbeiten.
Mit freundlichen Grüßen,
Tim
ich versuch nun seit zwei Tagen mich durch die API zu fressen um E-Mails anzuzeigen. Bisher nutze ich den Code von: http://oxpedia.org/wiki/index.php?ti...P_API_Examples welcher auch gut Funktioniert. Nun lass ich nur eine E-Mail anzeigen und zwar hiermit:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mail Example</title>
<style type="text/css">
body {
padding: 10px;
}
.inbox {
width: 400px;
overflow: visible;
}
.mail {
position: relative;
border-bottom: 1px solid #ccc;
white-space: nowrap;
font-size: 10pt;
line-height: 1.3333em;
height: 200px;
width:500px;
}
.mail > div {
position: absolute;
top: 0.75em;
right: 1em;
bottom: 0.75em;
left: 1em;
}
.mail:hover {
background-color: #f5f5f5;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
.from {
position: absolute;
top: 0;
width: 60%;
font-size: 12pt;
}
.date {
position: absolute;
top: 0;
left: 60%;
width: 40%;
text-align: right;
color: #06c;
font-size: 9pt;
}
.subject {
position: absolute;
top: 1.6em;
width: 100%;
font-size: 9pt;
}
.teaser {
position: absolute;
top: 3em;
height: 2em;
line-height: 1em;
color: #555;
font-weight: normal;
white-space: normal;
}
.teaser > span {
font-size: 9pt;
}
.unread {
font-weight: bold;
}
div.from
{
display:none;
height:20px;
}
.msg
{
margin-top:10px;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
var ajaxRoot = "/ajax", // should always be this one
client = "111.222.333.444", // must match UI (affects cookie handling)
session = ""; // we get this with first autologin request
// set default content type - we speak JSON all the time
$.ajaxSetup({ dataType: "json" });
function drawLoginButton() {
$("#inbox").hide();
$("#form").show();
}
function getInbox() {
$.ajax
({
// get all mails in INBOX (id & folder_id only; do not fetch mail headers -> slow!)
// folder is "default0/INBOX". assumption: IMAP path prefix is "/"
type: "GET",
url: ajaxRoot + "/mail?" + $.param
({
action: "GET", id: 6,
folder: "default0/INBOX", session: session
})
})
.done(function (response) {
// API error, e.g. session not found?
if (response.error) {
drawLoginButton();
} else {
$("#form").hide();
// continue
// response.data contains array of id/folder_id pairs.
// we convert this to key/value objects because it's easier to write and
// debug code that way (obj.folder_id instead of obj[1]).
//document.write("<div class=from>" + response.data["from"][0] + "</div>");
//document.write("<div class=border>" + response.data.attachments[0].content + "</div>");
$("#from").show();
$("#msg").show();
document.getElementById("from").innerHTML = response.data["to"][0];
document.getElementById("msg").innerHTML = response.data.attachments[0].content;
}
})
.error(drawLoginButton); // general network error
$.ajax
({
// get all mails in INBOX (id & folder_id only; do not fetch mail headers -> slow!)
// folder is "default0/INBOX". assumption: IMAP path prefix is "/"
type: "GET",
url: ajaxRoot + "/mail?" + $.param
({
action: "attachment", id: 6,
folder: "default0/INBOX", session: session,
attachment: "1.2", save: 0
})
})
.done(function (response) {
// API error, e.g. session not found?
if (response.error) {
drawLoginButton();
} else {
document.getElementById("attachment").innerHTML = response.data;
}
});
}
function autoLogin() {
// auto login to get session id -- must be activated on server!
$.ajax({
url: ajaxRoot + "/login?" + $.param({
action: "autologin", client: client
})
})
.done(function (response) {
if (response.error) {
drawLoginButton();
} else {
// remember session id
session = response.session;
// get inbox
getInbox();
}
});
}
function login() {
// Two steps:
// Step #1: Login with username & password
// Step #2: Pull special persistence cookie that allows auto-login
$.ajax({
type: "POST",
url: ajaxRoot + "/login?" + $.param({
action: "login",
client: client
}),
data: $.param({
password: $("#password").val(),
name: $("#name").val()
}),
})
.done(function (response) {
if (response.session) {
// store cookie for future autologin requests
$.ajax({
type: "GET",
url: ajaxRoot + "/login?" + $.param({
action: "store",
session: (session = response.session)
})
})
.done(getInbox(1))
}
});
return false;
}
function logout() {
$.ajax({
type: "GET",
url: ajaxRoot + "/login?" + $.param({
action: "logout",
client: client,
session: session
})
})
.done(function () {
session = "";
drawLoginButton();
});
return false;
}
$("#form").submit(login);
autoLogin();
});
</script>
</head>
<body>
<div id="form" style="display: none">
<form action="" name="OX6.UI">
<input type="text" id="name" name="name" value=""/><br/>
<input type="password" id="password" name="password" value=""/><br/>
<input type="submit" value="Login"/>
</form>
</div>
<div id="inbox"></div>
<div class="from" id="from"> </div>
<div class="msg" id="msg"> </div>
<div class="attachment" id="attachment"></div>
</body>
</html>
Mit freundlichen Grüßen,
Tim