Integración de la Subida de Imágenes en la Aplicación

En tu aplicación, crea una interfaz de usuario que permita a los usuarios seleccionar y cargar imágenes. Puedes usar un elemento <input type="file"> en HTML

<input type="file" class="form-control" id="image" accept="image/*">

Cuando un usuario selecciona una imagen, la aplicación debe enviarla al servidor a través de una solicitud HTTP POST. 

Puedes solicitar al  usuario demás información para completar tu base de datos, una vez confirmado el formulario se envía la información.

<script>
    $(document).ready(function() {
        $('form').submit(function(e) {
            e.preventDefault();
            var formData = new FormData($('form')[0]);
            $.ajax({
                url: '/upload_form/',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    // Maneja la respuesta del servidor si es necesario
                },
                error: function(jqXHR, textStatus, errorThrown) {
                }
            });
        });
    });
</script>

Recuerda incluir enctype="multipart/form-data".

 <form  method="POST" enctype="multipart/form-data">

Procesamiento y Almacenamiento en el Servidor

En el servidor, asegúrate de que la solicitud de carga sea manejada correctamente. Valida la imagen para asegurarte de que sea segura y cumple con tus requisitos (tipo de archivo, tamaño, etc.).

Asigna un nombre de archivo único a la imagen para evitar colisiones de nombres.

Almacena la imagen en una ubicación local en el servidor, como una carpeta designada para imágenes. Por ejemplo, esta puede ser la ruta de almacenamiento:

app.config['UPLOAD_FOLDER'] = 'static/images'

Aquí tienes un ejemplo de como se puede realizar el almacenamiento tanto de la imagen como de la ruta:

@app.route('/upload_form/', methods=['POST'])
def upload_form():
    if request.method == 'POST':
        if 'image' in request.files:
            image_file = request.files['image']
            filename = secure_filename(image_file.filename)
            image_file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            try:
                image_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
                new_image = Images(url=image_path)
                db.session.add(new_image)
                db.session.commit()
             except Exception as e:
                db.session.rollback()
                flash('Error al agregar la imagen', 'danger')
                return redirect(url_for('upload'))
        else:
            flash('Por favor, seleccione una imagen.', 'danger')
    return redirect(url_for('upload'))

Obtención de la Ruta de la Imagen desde la Base de Datos

En tu base de datos, asegúrate de tener una tabla que contenga información sobre las imágenes, incluyendo la ruta en la que están almacenadas en el servidor.

Cuando necesites mostrar una imagen específica en la aplicación, consulta la base de datos para obtener la ruta de la imagen correspondiente.

En este caso se está solicitando el url de un elemento con un id específico.

@app.route('/get_image_url/<int:imageId>', methods=['GET'])
def get_company_details(imageId):
    image = Images.query.get(imageId)
    if image:
        imageData = {
            'url': image.url
        }
        return jsonify(imageData=imageData)
    else:
        return jsonify(error='Image not found'), 404

Descarga y Almacenamiento en la Aplicación

Utiliza la ruta de la imagen obtenida de la base de datos para hacer una solicitud HTTP GET al servidor. Esto descargará la imagen.

<script>
    $(document).ready(function() {
        var imageId = $('#load-image').data('image-id');
            url: '/get_image_url/' + imageId,
            success: function(response) {
                var image_data = response.imageData;                                      
                $('#load-image').attr('src', '/' + image_data.url);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                if (jqXHR.status === 404) {
                    alert('Imagen no encontrada');
                } else {
                    alert('Error en la solicitud');
                }
            }
        });
    });
</script>

Visualización de Imágenes en la Interfaz de Usuario

Una vez obtenida la ruta la imagen se mostrará en tu interfaz.

<img id="load-image" src="">