3

Tengo un formulario HTML vinculado a una función Lambda para enviar correos electrónicos. Cuando se ejecuta el formulario, se hace una llamada a la API de la función Lambda para ejecutar el código de la misma. En mi caso, la función Lambda recibe del formulario HTML una serie de parámetros:

  • email1 (email del emisor)
  • email2 (email del receptor)
  • asunto (asunto del mail)
  • mensaje (contenido del mail)
  • archivo (un archivo, en mi caso, .xlsx, que se adjuntará al email que envíe la función)

Código del formulario HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formulario de contacto</title>
<style>
  /* Estilos para el formulario (no es importante) */
  form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
  }
  label, input, textarea {
    margin-bottom: 10px;
    font-size: 1.2em;
  }
  label {
    font-weight: bold;
  }
  input, textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  button {
    padding: 10px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #3e8e41;
  }
  /* ... */
</style>
 <h1 style="text-align: center;">Formulario de contacto</h1>

 <form id="contact-form" action="https://h447r7gyobcdtrrevx6h7qkd4u0nocwj.lambda- 
  url.eu-central-1.on.aws/" method="POST" enctype="multipart/form-data">

  <label for="email1">Correo electrónico REMITENTE:</label>
  <input type="email" id="email1" name="email1" required>

  <label for="email2">Correo electrónico DESTINATARIO:</label>
  <input type="email" id="email2" name="email2" required>

  <label for="asunto">Asunto:</label>
  <input type="text" id="asunto" name="asunto" required>

  <label for="contenido">Cuerpo del e-mail:</label>
  <textarea id="contenido" name="contenido" required></textarea>

  <label for="archivo">Subir archivo:</label>
  <input type="file" id="archivo" name="archivo">


  <button type="submit">Enviar correo</button>
</form>

<script>
  // Manejar el envío del formulario
  const form = document.getElementById('contact-form');
  form.addEventListener('submit', async (event) => {
    event.preventDefault(); // Prevenir el envío por defecto del formulario

    // Obtener los datos del formulario
    const formData = new FormData(form);
    const data = {
      email1: formData.get('email1'), // Email del emisor
      email2: formData.get('email2'), // Email del destinatario
      asunto: formData.get('asunto'), // Asunto del e-mail
      contenido: formData.get('contenido'), // Cuerpo del e-mail
      archivo: formData.get('archivo'), // Archivo subido
    };

    // Se envían los datos a la función lambda mediante una petición POST a la API Gateway
    const response = await fetch('https://9yk2y21woh.execute-api.eu-central-1.amazonaws.com/etapa/', {
      method: 'POST',
      mode: 'cors',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    });
    form.reset(); // Limpiar el formulario
  });

</script>

He revisado el código del formulario y creo que no hay nada incorrecto en lo que al envío de parámetros a la función Lambda se refiere.


Código de la función Lambda:

def lambda_handler(event, context):

    body = event['body']
    print(event)


    data = json.loads(body)

    email1 = data['email1']
    email2 = data['email2']
    asunto = data['asunto']
    contenido = data['contenido']

    archivo = data["archivo"]


    send_email(email1, email2, asunto, contenido, archivo) # Función de enviar el mail

    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Origin': '*'
        },
        'body': json.dumps({
            'Mensaje':'El correo ha sido enviado correctamente.'
        })
    }

No he puesto el código restante de la función porque funciona bien; la función envía correctamente el email. Sin embargo, la función no recibe correctamente el parámetro "archivo". El resultado de print(event) es el siguiente:

introducir la descripción de la imagen aquí

Como se ve, el parámetro "archivo" no se recibe. Se queda como un diccionario vacío. No sé donde puede estar el fallo.

Los demás parámetros sí se reciben, y al ejecutar la función Lambda se envía correctamente el email, pero no puedo adjuntar el archivo que se envía en el formulario.

1
  • 2
    Que alivio! Una pregunta bien formulada. +1
    – Candid Moe
    Commented el 27 mar. 2023 a las 10:21

1 respuesta 1

1

He revisado tu código y lo implementé para realizar mis validaciones. En mis primeras pruebas me di cuenta que estabas realizando la solicitud a la función de lambda 2 veces, la primera desde el action del formulario y la segunda desde el fetch en javascript.

Así que realicé algunas modificaciones en tu función de javascript para poder hacer la solicitud http POST de forma correcta. Te dejo el código a continuación:

function enviarDatos() {
  // Obtener los datos del formulario
  var email1 = document.getElementById("email1").value;
  var email2 = document.getElementById("email2").value;
  var asunto = document.getElementById("asunto").value;
  var contenido = document.getElementById("contenido").value;
  var archivo = document.getElementById("archivo").value;

  // Se envían los datos a la función lambda mediante una solicitud POST
  fetch("https://taf3g44pjv6jutxymnngu7guiy0hxwky.lambda-url.us-west-2.on.aws", {
      method: "POST",
      body: JSON.stringify({
        email1: email1,
        email2: email2,
        asunto: asunto,
        contenido: contenido,
        archivo: archivo
      })
    })
    .then((response) => response.json())
    .then((json) => console.log(json));
}
/* Estilos para el formulario (no es importante) */

form {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: 0 auto;
}

label,
input,
textarea {
  margin-bottom: 10px;
  font-size: 1.2em;
}

label {
  font-weight: bold;
}

input,
textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}
<h1 style="text-align: center;">Formulario de contacto</h1>

<form id="contact-form" action="#" onsubmit="return enviarDatos()" method="POST" enctype="multipart/form-data">

  <label for="email1">Correo electrónico REMITENTE:</label>
  <input type="email" id="email1" name="email1" required>

  <label for="email2">Correo electrónico DESTINATARIO:</label>
  <input type="email" id="email2" name="email2" required>

  <label for="asunto">Asunto:</label>
  <input type="text" id="asunto" name="asunto" required>

  <label for="contenido">Cuerpo del e-mail:</label>
  <textarea id="contenido" name="contenido" required></textarea>

  <label for="archivo">Subir archivo:</label>
  <input type="file" id="archivo" name="archivo">

  <button type="submit">Enviar correo</button>
</form>

Del lado de AWS también creé mi propia función de lambda, el código es el siguiente:

import json

def lambda_handler(event, context):
    # Imprimimos el 'event' para validar el contenido en la solicitud
    print(event)
    
    # En caso de que el 'event' NO contenga un body
    try:
        # String body data
        string_body = event['body']
        
        # Converitmos de string a json object
        json_body = json.loads(string_body)
        
        # Asignamos el contenido de los objetos a variables
        email1 = json_body['email1']
        email2 = json_body['email2']
        asunto = json_body['asunto']
        contenido = json_body['contenido']
        archivo = json_body['archivo']
    
        # Imprimimos las variables en consola para validar que contengan la info
        print("email1: " + email1)
        print("email2: " + email2)
        print("asunto: " + asunto)
        print("contenido: " + contenido)
        print("archivo: " + archivo)
        
        # Función para enviar el correo electrónico
        # send_email(email1, email2, asunto, contenido, archivo)
        
        # Regresamos un código 200
        return {
            'statusCode': 200,
            'body': json.dumps({
                'Mensaje':'El correo ha sido enviado correctamente.'
            })
        }
    except:
        # Para cualquier error, regresamos un código 400
        return {
            'statusCode': 400,
            'body': json.dumps({
                'Mensaje':'Ha ocurrido un error'
            })
        }

Dejaré la función pública y disponible para que puedas probar el funcionamiento y me tomé la libertad de crear un dashboard público para que también puedas ver el resultado de los datos que captura la función de lambda una vez que son enviados desde el formulario. Puedes acceder desde la siguiente liga:

https://cloudwatch.amazonaws.com/dashboard

Realicé una prueba desde el formulario:

Funcion de lambda

Y este fue el resultado:

Dashboard de la funcion de lambda

Como puedes ver en la última imagen, toda la información introducida en el formulario fue capturada correctamente por la función de lambda.

NOTA: Dejaré el dashboard y la función de lambda funcionando solo por 2 semanas, pasado ese tiempo ambos recursos serán eliminados.

1
  • 1
    Buenas Roberto! Muchas gracias por tu tiempo. Conseguí solucionar el problema, realmente lo pude hacer sin utilizar JavaScript en el código del formulario. A pesar de ello, tengo en cuenta tu respuesta para futuras necesidades. ¡Muchas gracias!
    – DavDEV_02
    Commented el 2 jun. 2023 a las 6:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.