Para ello tenía 2 opciones:
- Crear un campo tipo BLOB en la Base de Datos MariaDB, y subir la información binaria del archivo de imagen.
- Almacenar en un campo de texto en la Base de Datos, el nombre del fichero que contiene la carátula. Aparte, en un directorio del servidor, almacenaremos los distintos ficheros para cada una de las películas guardadas.
Después de leer en varios foros, a efectos de eficiencia en la carga de información, así como de integridad en la Base de Datos y minimizado de posibles futuros problemas, me decido por esta última forma.
Pasos a seguir para ello:
- En nuestro formulario de entrada, contamos con un campo de «type=’file’», y con el «accept=’.jpg,.png,.jpeg,.gif,.bmp,.tif,.tiff|image/*’» para poder aceptar todos los formatos de imagen. Dicho campo tiene su «name=’caratula’» y un eventlistener para detectar cambios en el mismo: «(change)=’nuevoFichero($event)’». De esta forma, detectaremos cuando hay un cambio en el fichero de la carátula que queremos cargar.
- El quid está en dicha función, dado que se encargará de pasar el fichero a nuestra petición HTTP asíncrona (AJAX), a través de la estructura de datos de Angular llamada formData. Preparación del paso del fichero al HttpRequest:
- La función nuevoFichero recibe el evento, y de ahí podemos extraer el archivo de imagen y su nombre (event.target.files[0] y event.target.files[0].name)
- Creamos un formData de esta forma: const formularioData = new FormData();
- Le añadimos el fichero y su nombre: formularioData.append(«caratula»,event.target.files[0],event.target.files[0].name);
- Una vez generada la petición HttpRequest, abierta en modo «POST» y apuntando al PHP que hace la copia del archivo al servidor, le pasaremos el fichero empaquetado en el formData: peticion_http.open(formularioData);
- Importante: NO tenemos que establecer ningún «header» en la llamada del HttpRequest, dado que ello IMPIDE la carga correcta del fichero en el servidor.
