Hallo,
ich bräuchte mal wieder Hilfe. Meine Seite ist ohne Server, daher arbeite ich nur mit HTML und Javascript.
Mein Ziel: ich möchte Dateien per Drag and Drop hinzufügen und zum Download anbieten. Anschließend diese Seite speichern und per Mail verschicken. Zu Beginn mein Code:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="download.js></script>
<script id="savedFiles"></script>
</head>
<body>
<div id="dropzone">Drop additional files here</div><output id="list"></output>
<button onclick="test()">Download</button>
<button onClick="save();">Save</button>
<a href="mailto:test@example.com?attach=[pfad]">Mail</a>
</body>
<script>
var files = [];
function save() {
var savedFiles = [];
for (var i = 0; i<files.length; i++){
savedFiles[i] = new Object();
savedFiles[i] = files[i];
}
$("#savedFiles").text("var savedFiles = " + JSON.stringify(savedFiles)) + ";";
var thehtml = $("html");
var doc = '<!doctype html><html>' + thehtml.html() + '</html>';
download(doc, "test.html", "text/html");
}
function read() {
for (var i = 0; i<savedFiles.length; i++){
files[i] = savedFiles[i];
}
alert(savedFiles[0].name);
}
function test(){
for (var i = 0; i<files.length;i++){
download(files[i], files[i].name, files[i].type);
}
}
if(typeof(savedFiles[0]) != "undefined"){
read();
}
function dateiauswahl(evt) {
evt.stopPropagation();
evt.preventDefault();
if (files.length == 0){
files[0]=evt.dataTransfer.files[0];
}else{
files[files.length] = evt.dataTransfer.files[0];
}
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li>', escape(f.name), '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
// Initialisiere Drag&Drop EventListener
var dropZone = document.getElementById('dropzone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', dateiauswahl, false);
</script>
<style>
#dropzone {
width:5em;
height:5em;
border:1px solid black;
}
</style>
</body>
</html>
Alles anzeigen
Download.js habe ich von hier: https://github.com/rndme/download
Das Hochladen und Downloaden funktioniert. Meine Problem: wenn ich nun den Save Button betätige, speichert es die Files nicht. Ich habe es mit selbst angelegten Objekteigenschaften getestet und dort funktioniert das Speichern, sprich hiermit:
var files = [];
files[0] = new Object();
files[0].name = "test";
Bei hochgeladenen Dateien jedoch nicht, dementsprechend kann ich sie dann auch nicht mehr über den Download-Button herunterladen.
Fällt jemandem ein wo mein Problem liegt und ob es dafür überhaupt eine Lösung gibt?
Mein Zweites Problem ist, dass ich gerne über den mailto Link das Dokument, das über den Save-Button gespeichert wird an die Mail anhängen würde, aber ich muss bei attach= einen festen Pfad angeben. Ich habe keine Idee wie ich das Lösen kann, außer vom Benutzer den Pfad manuell eingeben zu lassen, aber das finde ich etwas unschön.
PS: wie man sehen kann teste ich mit alert(savedFiles[0].name); ob der Name übernommen wird
Falls jemand eine Idee hat wie meine Probleme lösbar sind wäre ich für die Hilfe sehr dankbar.
MFG
