INSERT - ES6 - API FETCH ENVIAR UN ARCHIVO ADJUNTO CON NOMBRE Y APELLIDO INSERT MYSQL PDO PHP

 

ES6 - API fetch enviar un archivo adjunto con nombre y apellido insert mysql pdo php

Para enviar un archivo adjunto con nombre y apellido utilizando fetch en ES6 y luego insertarlo en una base de datos MySQL mediante PDO en PHP, necesitarás crear una instancia de FormData y agregar los datos del archivo y los nombres y apellidos a ella utilizando el método append. Luego, puedes enviar la instancia de FormData a través de la solicitud fetch con el tipo de contenido "multipart/form-data".

 

Aquí hay un ejemplo de cómo podrías hacerlo:

 

javascript

Copy code

const firstNameInput = document.querySelector('#first-name');

const lastNameInput = document.querySelector('#last-name');

const fileInput = document.querySelector('#file-input');

 

const submitButton = document.querySelector('#submit-button');

submitButton.addEventListener('click', () => {

  const firstName = firstNameInput.value;

  const lastName = lastNameInput.value;

  const file = fileInput.files[0];

 

  const formData = new FormData();

  formData.append('file', file);

  formData.append('first-name', firstName);

  formData.append('last-name', lastName);

 

  fetch('/upload.php', {

    method: 'POST',

    body: formData

  })

  .then(response => {

    if (!response.ok) {

      throw new Error('Network response was not ok');

    }

    return response.json();

  })

  .then(data => {

    console.log(data);

  })

  .catch(error => {

    console.error('There was an error uploading the file:', error);

  });

});

En el ejemplo anterior, se obtienen los valores de los campos de nombre y apellido y del archivo de entrada. Se crea una instancia de FormData y se agregan los valores de los campos de nombre y apellido y del archivo de entrada utilizando el método append. Luego, se envía la instancia de FormData a través de la solicitud fetch en el cuerpo de la solicitud con el tipo de contenido "multipart/form-data". La respuesta de la solicitud se convierte a JSON utilizando el método json, y se imprime en la consola. Si hay algún error al enviar la solicitud, se maneja en el bloque catch.

 

En la página PHP upload.php, puedes utilizar PDO para conectarte a la base de datos y realizar una inserción de datos. Aquí hay un ejemplo de cómo podrías hacerlo:

 

php

Copy code

<?php

$servername = "localhost";

$username = "username";

$password = "password";

$dbname = "myDBPDO";

 

try {

  $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);

  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

 

  $firstName = $_POST['first-name'];

  $lastName = $_POST['last-name'];

  $file = $_FILES['file']['name'];

 

  $stmt = $conn->prepare("INSERT INTO myTable (first_name, last_name, file_name) VALUES (:first_name, :last_name, :file_name)");

  $stmt->bindParam(':first_name', $firstName);

  $stmt->bindParam(':last_name', $lastName);

  $stmt->bindParam(':file_name', $file);

  $stmt->execute();

 

  $result = array('success' => true);

  echo json_encode($result);

}

catch(PDOException $e) {

  $result = array('success' => false, 'error' => $e->getMessage());

  echo json_encode($result);

}

 

$conn = null;

?>

En el código PHP anterior, se realiza una conexión PDO a la base de datos y se insertan los valores de nombre y apellido y el nombre del archivo en una tabla de la base de datos. Luego, se devuelve una respuesta