I’m new to HTML, CSS and JavaScript. I’m doing a website where the user uploads an image in a drag and drop container. I want to read the uploaded JPG file using Flask once a POST request have been summited, how can I do it? For now I’m confused how the file is uploaded and how can I process it in Flask.
I’m using the method readAsDataURL, is it good practice? Since I want to display it but then I want to read the image as JPG or JPEG. Also, if I try to download it, it is saved as jfif, how does this happen?
Here’s the js script where the image is uploaded:
dragArea.addEventListener('drop', (event)=>{
event.preventDefault(); // Prevent to load the page from the submit button
file = event.dataTransfer.files[0]; // Get the file uploaded
displayFile();
});
// Savve and display image after it is dropped
function displayFile() {
let fileType = file.type;
let validExtensions = ['image/jpeg', 'image/jpg', 'image/png'];
if (validExtensions.includes(fileType)){
let fileReader = new FileReader();
fileReader.onload = () =>{
let fileURL = fileReader.result;
//console.log(fileURL);
let imgTag = `<img src = ${fileURL}>`;
dragArea.innerHTML = imgTag;
dragArea.classList.add('active2');
};
fileReader.readAsDataURL(file);
}
else{
alert('This file is not an image');
dragArea.classList.remove('active');
}
}
Here’s the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="staticstyles.css"/>
</head>
<body>
<div class="body2">
<div class="container">
<h3>Upload your file</h3>
<div class="drag-area">
<div class="icon">
<i class="fas fa-images"></i>
</div>
<span class="header2">Drag and drop</span>
<span class="header2">or <span class="button">browse</span></span>
<input type="file" id = "opener"hidden/>
<span class="support">Supports: JPEG, JPG</span>
</div>
</div>
<div class="form-container">
<form action="/" method="post" enctype="multipart/form-data">
<div class="input-form">
<input autocomplete="off" min="1" max="10" name="amount-colors" placeholder="Amount of colors" type="number">
</div>
<div>
<button type="submit" class="button-form">Upload</button>
</div>
</form>
</div>
</div>
<script src="/static/script.js"></script>
</body>
</html>
I was thinking something to do in the app.py script something like this:
What are the good practices? I’ve seen ways to do it with the library PIL, but I don’t know which way suits better.
from flask import Flask, flash, jsonify, redirect, render_template, request, session
import os
app = Flask(__name__)
@app.route('/', methods = ['POST', 'GET'])
def index():
if request.method == "GET":
return render_template('index.html')
elif request.method == "POST":
# Get the amount of colors
k = request.form.get("amount-k")
# Load up the image
# This part will get the JPEG that the user uploaded
# Do algorithm
# Pass the JPG or JPEG
# Return
return render_template("layout.html")
if __name__ == '__main__':
app.debug = True
app.run(host = '0.0.0.0', port = 5000)
Any help or documentation is appreciated