Skip to content

Commit 08c8328

Browse files
molidevmolidev
committed
Verificación fichero + conversiones WebP y PNG
- Optimización AJAX - Habilitamos/deshabilitamos botones durante la carga - Se mantiene el TimeOut de 15 segundos que hace el reset de los elementos.
1 parent ec19d1f commit 08c8328

11 files changed

+177
-67
lines changed

‎__pycache__/app.cpython-312.pyc

-290 Bytes
Binary file not shown.

‎__pycache__/utilities.cpython-312.pyc

60 Bytes
Binary file not shown.

‎app.py

+15-31
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
from flask import Flask, jsonify, request, send_from_directory, render_template, redirect, url_for
22
import os
3-
from reportlab.lib.pagesizes import letter
4-
from reportlab.pdfgen import canvas
5-
from PIL import Image
6-
73
import utilities as util
84

95
app = Flask(__name__)
@@ -18,16 +14,15 @@ def index():
1814

1915
@app.route('/uploads/<filename>')
2016
def uploaded_file(filename):
21-
#return send_from_directory(UPLOAD_FOLDER, filename) (con esto veríamos el fichero)
22-
return send_from_directory(UPLOAD_FOLDER, filename, as_attachment=True) #descarga..
17+
return send_from_directory(UPLOAD_FOLDER, filename, as_attachment=True)
2318

2419
#------------Compresor de vídeo--------------------
2520
@app.route('/compresor_video', methods=['GET', 'POST'])
2621
def compresor_video():
2722
if request.method == 'POST':
2823
file = request.files.get('file')
2924
if file:
30-
compressed_filename = util.upload_to_server(file, 0)
25+
compressed_filename = util.upload_to_server(file, 0, "mp4")
3126
if compressed_filename:
3227
file_url = url_for('uploaded_file', filename=compressed_filename)
3328
return jsonify({'fileUrl': file_url})
@@ -39,7 +34,7 @@ def pdf_a_word():
3934
if request.method == 'POST':
4035
file = request.files.get('file')
4136
if file:
42-
word_filename = util.upload_to_server(file, 1)
37+
word_filename = util.upload_to_server(file, 1, "word")
4338
if word_filename:
4439
file_url = url_for('uploaded_file', filename=word_filename)
4540
return jsonify({'fileUrl': file_url})
@@ -51,34 +46,23 @@ def jpg_a_webp():
5146
if request.method == 'POST':
5247
file = request.files.get('file')
5348
if file:
54-
webp_filename = util.upload_to_server(file, 2)
49+
webp_filename = util.upload_to_server(file, 2, "webp")
5550
if webp_filename:
5651
file_url = url_for('uploaded_file', filename=webp_filename)
5752
return jsonify({'fileUrl': file_url})
5853
return render_template('jpg_webp.html')
5954

60-
#------------JPG a PDF--------------------
61-
def jpg_to_pdf(jpg_paths, output_path):
62-
c = canvas.Canvas(output_path, pagesize=letter)
63-
64-
for jpg_path in jpg_paths:
65-
img = Image.open(jpg_path)
66-
width, height = letter
67-
img_width, img_height = img.size
68-
69-
# Ajustar la imagen al tamaño de la página
70-
aspect_ratio = img_width / img_height
71-
if img_width > img_height:
72-
img_width = width
73-
img_height = width / aspect_ratio
74-
else:
75-
img_height = height
76-
img_width = height * aspect_ratio
77-
78-
c.drawImage(jpg_path, 0, 0, width=img_width, height=img_height)
79-
c.showPage()
80-
81-
c.save()
55+
#------------Jpg a png--------------------
56+
@app.route('/jpg_a_png', methods=['GET', 'POST'])
57+
def jpg_a_png():
58+
if request.method == 'POST':
59+
file = request.files.get('file')
60+
if file:
61+
png_filename = util.upload_to_server(file, 3, "png")
62+
if png_filename:
63+
file_url = url_for('uploaded_file', filename=png_filename)
64+
return jsonify({'fileUrl': file_url})
65+
return render_template('jpg_png.html')
8266

8367
if __name__ == "__main__":
8468
if not os.path.exists(UPLOAD_FOLDER):

‎static/js/progressBar.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
$(document).ready(function() {
2+
3+
$('#fileInput').change(function() {
4+
if ($(this).val()) {
5+
$('#submitBtn').prop('disabled', false);
6+
} else {
7+
$('#submitBtn').prop('disabled', true);
8+
}
9+
});
10+
211
$('form').on('submit', function(event) {
312
event.preventDefault();
413

@@ -29,13 +38,12 @@ $(document).ready(function() {
2938
$('#downloadButton').show().click(function() {
3039
window.location.href = response.fileUrl;
3140
});
32-
41+
$('#submitBtn').prop('disabled', true);
3342
$('#downloadButton')
3443
.show()
3544
.prop('disabled', false)
3645
.click(function() {
3746
window.location.href = response.fileUrl;
38-
3947
//Tienes 15 segundos para la descarga y luego hacemos reset
4048
setTimeout(function() {
4149
$('#progressBar').css('width', '0%').attr('aria-valuenow', 0);

‎static/resources/jpg_png.png

863 KB
Loading

‎templates/compresor_video.html

+7-4
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,16 @@
3030
<a class="nav-link" href="http://127.0.0.1:5000">Inicio</a>
3131
</li>
3232
<li class="nav-item">
33-
<a class="nav-link active" aria-current="page" href="#!">Compresor de Vídeo</a>
33+
<a class="nav-link active" aria-current="page" href="http://127.0.0.1:5000/compresor_video">Compresor de Vídeo</a>
3434
</li>
3535
<li class="nav-item">
3636
<a class="nav-link" href="http://127.0.0.1:5000/pdf_a_word">PDF a Word</a>
3737
</li>
3838
<li class="nav-item">
39-
<a class="nav-link" href="#">Blog</a>
39+
<a class="nav-link" href="http://127.0.0.1:5000/jpg_a_webp">JPG a WebP</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link" href="http://127.0.0.1:5000/jpg_a_png">JPG a PNG</a>
4043
</li>
4144
</ul>
4245
</div>
@@ -74,10 +77,10 @@ <h1 class="fw-bolder">Compresor de vídeo</h1>
7477
<div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
7578
</div>
7679
</div>
77-
<input type="file" name="file" id="fileInput" class="d-none">
80+
<input type="file" name="file" id="fileInput" class="d-none" accept=".mp4">
7881
<br>
7982
<div class="d-flex justify-content-center">
80-
<button type="submit" class="btn btn-primary mr-2 w-50">Subir</button>
83+
<button id="submitBtn" type="submit" class="btn btn-primary mr-2 w-50">Subir</button>
8184
<button id="downloadButton" class="btn btn-success w-50" disabled>Descargar archivo</button>
8285
</div>
8386
</form>

‎templates/index.html

+21-13
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,19 @@
2727
<div class="collapse navbar-collapse" id="navbarSupportedContent">
2828
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
2929
<li class="nav-item">
30-
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
30+
<a class="nav-link active" aria-current="page" href="http://127.0.0.1:5000">Inicio</a>
3131
</li>
3232
<li class="nav-item">
33-
<a class="nav-link" href="#!">About</a>
33+
<a class="nav-link" href="http://127.0.0.1:5000/compresor_video">Compresor de Vídeo</a>
3434
</li>
3535
<li class="nav-item">
36-
<a class="nav-link" href="#!">Contact</a>
36+
<a class="nav-link" href="http://127.0.0.1:5000/pdf_a_word">PDF a Word</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link" href="http://127.0.0.1:5000/jpg_a_webp">JPG a WebP</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link" href="http://127.0.0.1:5000/jpg_a_png">JPG a PNG</a>
3743
</li>
3844
</ul>
3945
</div>
@@ -59,7 +65,7 @@ <h1 class="fw-bolder">Bienvenido a FileTransformer</h1>
5965
<img class="card-img-top rounded" src="/static/resources/compresor_video.png" alt="Imagen de un compresor de vídeo"/>
6066
<div class="card-body">
6167
<h2 class="card-title h4">Compresor de vídeo</h2>
62-
<p class="card-text text-justify">Ahorra espacio comprimiendo tus vídeos de una forma sencilla.</p>
68+
<p class="card-text text-justify"><b>Ahorra espacio</b> comprimiendo tus vídeos de una forma sencilla.</p>
6369
</div>
6470
</a>
6571
</div>
@@ -71,7 +77,7 @@ <h2 class="card-title h4">Compresor de vídeo</h2>
7177
<img class="card-img-top rounded" src="/static/resources/pdf_word.png" alt="Imagen de conversión de pdf a word"/>
7278
<div class="card-body">
7379
<h2 class="card-title h4">PDF a Word</h2>
74-
<p class="card-text text-justify">Mediante esta herramienta podrás convertir tu pdf a formato word.</p>
80+
<p class="card-text text-justify">Mediante esta herramienta podrás convertir tu <b>pdf</b> a formato <b>word</b>.</p>
7581
</div>
7682
</a>
7783
</div>
@@ -83,22 +89,24 @@ <h2 class="card-title h4">PDF a Word</h2>
8389
<img class="card-img-top rounded" src="/static/resources/jpg_webp.png" alt="Imagen de conversión de jpg a webp"/>
8490
<div class="card-body">
8591
<h2 class="card-title h4">JPG a WebP</h2>
86-
<p class="card-text text-justify">Permite realizar la conversión de una imagen JPG a WebP</p>
92+
<p class="card-text text-justify">Permite realizar la conversión de una imagen <b>JPG</b> a <b>WebP</b>.</p>
8793
</div>
8894
</a>
8995
</div>
9096
</div>
9197

9298
<div class="col-lg-3 col-md-6">
9399
<div class="card mb-4">
94-
<a href="#!"><img class="card-img-top" src="https://dummyimage.com/700x350/dee2e6/6c757d.jpg" alt="..." /></a>
95-
<div class="card-body">
96-
<h2 class="card-title h4">Conversor de vídeo</h2>
97-
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla.</p>
98-
<a class="btn btn-primary" href="#!">Read more →</a>
99-
</div>
100-
</div>
100+
<a class="card_mod" href="jpg_a_png">
101+
<img class="card-img-top rounded" src="/static/resources/jpg_png.png" alt="Imagen de conversión de jpg a png"/>
102+
<div class="card-body">
103+
<h2 class="card-title h4">JPG a png</h2>
104+
<p class="card-text text-justify">Permite realizar la conversión de una imagen <b>JPG</b> a <b>PNG</b></p>
105+
</div>
106+
</a>
107+
</div>
101108
</div>
109+
102110
</div>
103111
</div>
104112
</div>

‎templates/jpg_png.html

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>JPG a PNG</title>
8+
9+
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
10+
<link href="../static/css/dragula.min.css" rel="stylesheet">
11+
<link href="../static/css/styles_bootstrap.css" rel="stylesheet">
12+
13+
<link rel="stylesheet" href="../static/css/fontawesome.min.css">
14+
<link rel="stylesheet" href="../static/css/brands.min.css">
15+
<link rel="stylesheet" href="../static/css/solid.min.css">
16+
17+
<link href="../static/css/styles.css" rel="stylesheet">
18+
<script src="../static/js/dragula.min.js"></script>
19+
</head>
20+
<body>
21+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
22+
<div class="container">
23+
<a class="navbar-brand" href="http://localhost:5000">FileTransformer</a>
24+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
25+
<span class="navbar-toggler-icon"></span>
26+
</button>
27+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
28+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
29+
<li class="nav-item">
30+
<a class="nav-link" href="http://127.0.0.1:5000">Inicio</a>
31+
</li>
32+
<li class="nav-item">
33+
<a class="nav-link" href="http://127.0.0.1:5000/compresor_video">Compresor de Vídeo</a>
34+
</li>
35+
<li class="nav-item">
36+
<a class="nav-link" href="http://127.0.0.1:5000/pdf_a_word">PDF a Word</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link" href="http://127.0.0.1:5000/jpg_a_webp">JPG a WebP</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link active" aria-current="page" href="http://127.0.0.1:5000/jpg_a_png">JPG a PNG</a>
43+
</li>
44+
</ul>
45+
</div>
46+
</div>
47+
</nav>
48+
49+
<header class="py-5 bg-light border-bottom mb-4">
50+
<div class="container">
51+
<div class="text-center my-5">
52+
<h1 class="fw-bolder">JPG a PNG</h1>
53+
<p class="lead mb-0">Optimiza el espacio disminuyendo la calidad.</p>
54+
<input id="urlField" value="/jpg_a_png" style="display: none;">
55+
</div>
56+
</div>
57+
</header>
58+
59+
<div class="container mt-4">
60+
<div class="row justify-content-center">
61+
<div class="col-md-8 text-center">
62+
<img class="img-fluid rounded imgLogoFuncion" src="/static/resources/jpg_png.png" alt="Imagen de jpg a png">
63+
<div class="espacio10"></div>
64+
<div class="p-4 border bg-white rounded text-justify">
65+
Mediante el uso de la librería <b>PIL</b> se convierte la imagen <b>JPG</b> a formato <b>PNG</b> disminuyendo el peso reduciendo la calidad.
66+
</div>
67+
<div class="espacio10"></div>
68+
<form method="post" enctype="multipart/form-data" class="border p-4 mb-3 rounded">
69+
<div id="dropzone" class="border p-4 text-center bg-light mb-3 rounded">
70+
<b>Arrastra el fichero o haz click aquí</b>
71+
</div>
72+
<div class="d-flex justify-content-center align-items-center mb-3">
73+
<div class="mr-2">
74+
<strong>Progreso de conversión :</strong>
75+
</div>
76+
<div class="progress" id="progressContainer">
77+
<div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
78+
</div>
79+
</div>
80+
<input type="file" name="file" id="fileInput" class="d-none" accept=".jpg">
81+
<br>
82+
<div class="d-flex justify-content-center">
83+
<button id="submitBtn" type="submit" class="btn btn-primary mr-2 w-50" disabled>Subir</button>
84+
<button id="downloadButton" class="btn btn-success w-50" disabled>Descargar archivo</button>
85+
</div>
86+
</form>
87+
</div>
88+
</div>
89+
<div class="espacio20"></div>
90+
</div>
91+
92+
93+
<footer class="py-5 bg-dark">
94+
<div class="container"><p class="m-0 text-center text-white">Copyright &copy; 2024 FileTransformer</p></div>
95+
</footer>
96+
97+
<script src="../static/js/jquery.min.js"></script>
98+
<script src="../static/js/bootstrap.bundle.min.js"></script>
99+
<script src="../static/js/dragula_arrastrar.js"></script>
100+
<script src="../static/js/progressBar.js"></script>
101+
</body>
102+
</html>
103+

‎templates/jpg_webp.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@
3636
<a class="nav-link" href="http://127.0.0.1:5000/pdf_a_word">PDF a Word</a>
3737
</li>
3838
<li class="nav-item">
39-
<a class="nav-link active" aria-current="page" href="http://127.0.0.1:5000/jpg_a_wep">JPG a WebP</a>
39+
<a class="nav-link active" aria-current="page" href="http://127.0.0.1:5000/jpg_a_webp">JPG a WebP</a>
4040
</li>
4141
<li class="nav-item">
42-
<a class="nav-link" href="#">Blog</a>
42+
<a class="nav-link" href="http://127.0.0.1:5000/jpg_a_png">JPG a PNG</a>
4343
</li>
4444
</ul>
4545
</div>
@@ -77,10 +77,10 @@ <h1 class="fw-bolder">JPG a WebP</h1>
7777
<div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
7878
</div>
7979
</div>
80-
<input type="file" name="file" id="fileInput" class="d-none">
80+
<input type="file" name="file" id="fileInput" class="d-none" accept=".jpg">
8181
<br>
8282
<div class="d-flex justify-content-center">
83-
<button type="submit" class="btn btn-primary mr-2 w-50">Subir</button>
83+
<button id="submitBtn" type="submit" class="btn btn-primary mr-2 w-50">Subir</button>
8484
<button id="downloadButton" class="btn btn-success w-50" disabled>Descargar archivo</button>
8585
</div>
8686
</form>

0 commit comments

Comments
 (0)