This commit is contained in:
fingadumbledore 2023-01-30 11:22:13 +01:00
parent bd9fa674cf
commit 7f523b74fa
2 changed files with 80 additions and 69 deletions

View File

@ -1,24 +1,25 @@
from flask import Flask, request, send_from_directory, render_template
from flask import Flask, request, jsonify, send_from_directory
import os
app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
@app.route('/')
def index():
return render_template('index.html')
return send_from_directory('.', 'index.html')
@app.route('/upload', methods=['POST'])
def upload_file():
file = request.files['file']
file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))
return 'Datei hochgeladen'
file = request.files['file']
file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))
return jsonify({'message': 'File uploaded successfully'})
@app.route('/download/<filename>', methods=['GET'])
def download_file(filename):
return send_from_directory(app.config['UPLOAD_FOLDER'], filename, as_attachment=True)
@app.route('/download')
def download_file():
return send_from_directory(app.config['UPLOAD_FOLDER'], 'download.txt', as_attachment=True)
if __name__ == '__main__':
app.run()
app.run()

View File

@ -1,66 +1,76 @@
<html>
<head>
<script>
function uploadFile() {
const input = document.createElement('input');
input.type = 'file';
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
input.onchange = function() {
const file = this.files[0];
.btn {
border-radius: 5px;
padding: 10px 20px;
background-color: lightblue;
color: white;
text-align: center;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Dateien hoch- und herunterladen</h1>
<form>
<input type="file" id="file" />
<br />
<button class="btn" id="upload-btn">Hochladen</button>
<br />
<button class="btn" id="download-btn">Herunterladen</button>
</form>
</div>
const formData = new FormData();
formData.append('file', file);
<script>
const fileInput = document.getElementById('file');
const uploadBtn = document.getElementById('upload-btn');
const downloadBtn = document.getElementById('download-btn');
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(response => {
console.log(response);
alert('Datei hochgeladen');
})
.catch(error => {
console.error(error);
alert('Fehler beim Hochladen der Datei');
uploadBtn.addEventListener('click', function() {
// Code hier, um die Datei hochzuladen
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
});
};
input.click();
}
function downloadFile(filename) {
fetch(`/download/${filename}`, {
method: 'GET',
headers: {
'Content-Type': 'application/octet-stream'
},
responseType: 'blob'
})
.then(response => response.blob())
.then(blob => {
const a = document.createElement('a');
a.style.display = 'none';
document.body.appendChild(a);
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error(error);
alert('Fehler beim Herunterladen der Datei');
});
}
</script>
</head>
<body>
<h1>Datei-Upload und -Download</h1>
<button onclick="uploadFile()">Datei hochladen</button>
<button onclick="downloadFile()">Datei herunterladen</button>
</body>
downloadBtn.addEventListener('click', function() {
// Code hier, um die Datei herunterzuladen
fetch('/download')
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'download.txt';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error(error);
});
});
</script>
</body>
</html>