CARPETA - ES6 - API FETCH GUARDAR FOTOS EN CARPETA CON NOMBRE Y APELLIDO INSERT MYSQL PDO PHP

 

ES6 API fetch guardar fotos en carpeta con nombre y apellido insert mysql pdo php

Para guardar una foto en una carpeta con nombre y apellido utilizando fetch en ES6 y luego guardar su nombre en una base de datos MySQL mediante PDO en PHP, necesitarás enviar el archivo de la foto al servidor y guardarlo en la carpeta correspondiente. Luego, puedes enviar la solicitud fetch con el nombre del archivo en el cuerpo de la solicitud.

 

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

 

javascript

Copy code

const idInput = document.querySelector('#id');

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

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

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

 

const saveButton = document.querySelector('#save-button');

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

  const id = idInput.value;

  const firstName = firstNameInput.value;

  const lastName = lastNameInput.value;

  const file = fileInput.files[0];

 

  const formData = new FormData();

  formData.append('id', id);

  formData.append('firstName', firstName);

  formData.append('lastName', lastName);

  formData.append('file', file, `${firstName}_${lastName}.jpg`);

 

  fetch('/save.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 saving the file:', error);

  });

});

En el ejemplo anterior, se obtienen los valores de los campos de ID, nombre y apellido y del archivo de entrada. Se crea un objeto FormData y se agregan los valores al objeto, junto con el archivo. El nombre del archivo se establece utilizando las variables firstName y lastName. Se envía una solicitud fetch con el método POST y el objeto FormData como cuerpo de la solicitud. 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 save.php, puedes utilizar PDO para conectarte a la base de datos y guardar el nombre del archivo en la base de datos, y luego guardar el archivo en la carpeta correspondiente. 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);

 

  $id = $_POST['id'];

  $firstName = $_POST['firstName'];

  $lastName = $_POST['lastName'];

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

 

  $stmt = $conn->prepare("INSERT INTO myTable (id, firstName, lastName, file) VALUES (:id, :firstName, :lastName, :file)");

  $stmt->bindParam(':id', $id);

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

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

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

  $stmt->execute();

 

  $target_dir = "uploads/";

  $target_file = $target_dir . basename($_FILES["file"]["name"]);

  move_uploaded_file($_FILES["file"]["tmp_name"], $target_file);

 

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

  echo json_encode($result);

}

catch(PDOException $e) {