Guardando imágenes en el servidor

Clase 14 de 24 • Curso de PHP: Integración con HTML

Gabriel Ignacio China Cortez

student•

Comparto código con algunas validaciones mencionadas por el buen RetaxMaster.

<?php

$basename = $_FILES["image"]["name"];
$image = $_FILES["image"]["tmp_name"];
$ruta_a_subir = "images/$basename";
$tipo_archivo = $_FILES["image"]["type"];
$error_de_carga = $_FILES["image"]["error"];
$partes_archivo = explode(".",$basename);
$extension_archivo=strtolower(end($partes_archivo));
$extensiones_permitidas=["jpg","png","svg","ico"];
/*
echo "<pre>";
var_dump($_FILES);
var_dump($extension_archivo);
echo "</pre>";
*/

//Validamos si hubo algun error al cargar el archivo
if ($error_de_carga == UPLOAD_ERR_OK)
{
    //Validamos que sea un tipo de archivo permitido
    if (in_array($extension_archivo,$extensiones_permitidas))
    {
        //Copiamos la imagen a la carpeta del servidor
        if (move_uploaded_file($image, $ruta_a_subir)){
            $mensaje = "Imagen subida correctamente";
        }else{
            $mensaje= "Huston tuvimos un problema - Verifica que tengas permisos para manipular el servidor ";
        }
    }else{
        $mensaje = "Huston tuvimos un problema - Extensión no valida <br>
                    Extensiones validas (".implode(',', $extensiones_permitidas).")";
    }
}else{
    $mensaje="¡Ups! algo salio mal - $error_de_carga";
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h3><?= $mensaje ?></h3>
    <img src="<?= $ruta_a_subir ?>" alt="<?= $basename ?>">

</body>
</html>

Aka SinssChoss

student•

Muy buen aporte!!!! :)

LESTHER XITUMUL MANUEL

student•

Awesome, también hay un error para validar si se ha superado el tamaño máximo (en bits) del archivo subido, en caso de que este umbral sea superado también marcaría un error, esto es útil cuando no queremos que se suban archivos muy pesados al server: UPLOAD_ERR_INI_SIZE

Rubén Cuello

student•

No hay caso. No me funciona. No me mueve la imagen a la carpeta y ni siquiera se si la imagen está en esa carpeta temporal ya que tampoco la puedo encontrar :Sweat

Ermilo Joel Dorantes Uc

student•

¿Cómo estás corriendo tu servidor? ¿Mac, Win, Linux?

Omar Ismael Martínez Gómez

student•

Quiero pensar que los estás corriendo sobre Linux o MacOS. A mi me pasó lo mismo debido a los permisos de la carpeta donde quería subir la imagen. Linux (y otros derivados de Unix [MacOS, Darwin, NetBSD, Solaris, etc.]) usan un sistema de permisos en sus archivos. en consola los puedes ver con un comando ls con las opciones de listado largo:

$ ls -l

Tienes que estar en la ruta donde vas a listar las propiedades de dicha carpeta.

Generalmente en UNIX (refiriéndome a todos sus derivados) el sistema de permisos se ve así:

Primer carácter para saber si es archivo, directorio o enlace. -- - Archivo -- d Directorio -- l Enlace
Tres caracteres siguientes para saber los permisos de lectura, escritura y ejecución del PROPIETARIO de la carpeta o archivo.
Tres caracteres siguientes para saber los permisos de lectura, escritura y ejecución del GRUPO de la carpeta o archivo.
Tres caracteres siguientes para saber los permisos de lectura, escritura y ejecución de OTROS USUARIOS de la carpeta o archivo.

(Yo me grabé el orden en mi cabeza con las iniciales DUGO [Directorio, User, Group, Others])

Para representar los permisos se usan las letras:

r (Read) = 4
w (Write) = 2
x (eXecute) = 1

La sumatoria de estos tres valores equivalen a 7 (todos los permisos activos) Ejemplos de ésto:

-rw-r--r--  1 1000  1000   606 Aug 21 11:52 formulario.php
drwxrwxrwx  2 1000  1000  4096 Aug 21 12:31 images
-rw-r--r--  1 1000  1000   240 Aug 21 12:28 server.php

(Así me aparece a mi [yo cambié los permisos a mano de images])

Pueden pasar:

--- Sin permisos
r-- 4, sólo lectura (r)
rw- 6, lectura y escritura (rw)
rwx 7, lectura, escritura y ejecución (rwx)
r-x 5, lectura y ejecución (rx)
--x 1, ejecución (x)

Y para terminar, si lo que quiero es cambiarle los permisos a mi directorio images para que me deje escribir en él un archivo yo lo que hice fue:

$ chmod 777 images
(si tuviera contenido el directorio y quiero también afectarlo tendría qué hacer:)
$ chmod 777 -R images

Puedes ver más referencia a esto a través del video siguiente: https://platzi.com/clases/1667-linux/22827-interaccion-con-archivos-y-permisos/

Saludos.

Eduardo Reyes

student•

😎 Yo aprendiendo a subir archivos desde el Frontend y guardarlos en el Backend.

Juan David Rueda Quiroga

student•

Guardar los archivos directamente en el servidor desde el formulario nos deja expuesto a un hackeo https://book.hacktricks.xyz/pentesting-web/file-upload

La solución sería usar servicios como Amazon S3 o Azure Storage, la otra sería guardarlo en una ruta en la que no podamos acceder directamente al archivo, a toda costa debemos evitar la carpeta pública

Henry

student•

podemos usar la función getimagesize para validar si lo que se envía es una imagen y no otro tipo de archivo, así evitamos que envíen pdf's o otro tipo de archivos que no se deberían poder enviar.

Fredy Ramirez

student•

Excelente aporte, aunque seria mejor realizar ese tipo de validaciones (con javascript) antes de que llegue al servidor, con eso podemos dar advertencias a nuestro usuario si es el caso que llega a cargar mal el archivo

Fredy Ramirez

student•

Luis Alberto Aguilar Muñoz

student•

Pasa saber si el archivo ya existe podemos usar la funcion file_exists https://www.php.net/manual/es/function.file-exists.php

if (file_exists($ruta_subir)){
        echo "El archivo ya existe";
    }else{
        move_uploaded_file($file, $ruta_subir);
    }

José Luis Luna Rubio

student•

Cuando se envian archivos al servidor, PHP lo almacenara de forma temporal en un directorio, por lo que es importante que este lo guardemos en una carpeta, de lo contrario este archivo sera eliminado, para esto lo hacemos con la funcion

<?php 
move_uploaded_file($nombreTemporal, $rutaConFileName)
?>

Elliot Aristeo Urizar Rodas

student•

Hola, tengo una dudo y aun no se como resolverla.

al subir mi imagen el tmp_name siempre me sale vacio, esto hace a que no pueda obtener el path para moverlo

array(1) {
  ["image"]=>
  array(5) {
    ["name"]=>
    string(44) "rolling_waves_by_mequinoxem_d6lc1vr-3840.png"
    ["type"]=>
    string(0) ""
    ["tmp_name"]=>
    string(0) ""
    ["error"]=>
    int(1)
    ["size"]=>
    int(0)
  }
}

Elliot Aristeo Urizar Rodas

student•

Resuelto: por alguna razon el php /etc/php/8.2/fpm/php.ini no tenia

;upload_tmp_dir = "/tmp"

LEONARDO DAVID PENUELA GUTIERREZ

student•

la ruta temporal que muestra el arreglo de la imagen, no existe en el servidor.

Alguien sabe por qué pasa esto?

LEONARDO DAVID PENUELA GUTIERREZ

student•

Como se puede manejar en lugar de una imagen, manejar una hoja de calculo? Y poder manipular o, poder tomar los datos dentro de esta hoja de calculo dentro de php?

José Herrera

student•

Y cual es el codigo para mover multiples archivos porque ese codigo de esta clase es solo para mover un solo archivo o imagen cual es el codigo para mover varias imagenes . . .

Yerson Felipe Ramirez Garnica

student•

como evitar que se sobrescriba la imagen?

Ermilo Joel Dorantes Uc

student•

Hay que validar los campos del formulario para evitar que se sobrescriba la imagen. Muchos lo hacen con JS.

Kenneth Angulo L

student•

Desde PHP puedes (cuando la imagen ya llego al server)

Validar que el arhivo no exista si existe decidir que hacer.
Validar si el archivo que viene es mas reciente
agregar un timestamp y validar que te traigas el archivo mas reciente.
Las opciones son varias para jugar con los archivos

Para efectos de los ejercicios que estamos haciendo en la clase y hacer pruebas con el mismo archivo, podemos al nombre del archivo concatenarle un timestamp, eso ocaciona que aunque subas el mismo archivo el nombre sea diferente asi:

// obtener nombre de la carpeta donde voy a guardar
// para el ejercicio uso la misma carpeta del proyecto
$savePath = time() . '-' . $fileName;

Espero este truco te sea de utilidad para las pruebas, para depurar tus proyectos.

Maricielo Anchahua Flores

student•

{
  "Debug with pre and var_dump": {
    "prefix": "pre",
    "body": [
      "echo \"<pre>\";",
      "var_dump(${1:});",
      "echo \"</pre>\";"
    ],
    "description": "Echo preformatted var_dump for debugging"
  }
}

```{  "Debug with pre and var\_dump": {    "prefix": "pre",    "body": \[      "echo \\"\<pre>\\";",      "var\_dump(${1:});",      "echo \\"\</pre>\\";"    ],    "description": "Echo preformatted var\_dump for debugging"  }}

Maricielo Anchahua Flores

student•

snippets

control + shift + p
buscar snippets
codigo

{ "Debug with pre and var_dump": { "prefix": "pre", "body": [ "echo \"<pre>\";", "var_dump(${1:});", "echo \"</pre>\";" ], "description": "Echo preformatted var_dump for debugging" }}

Isaí Sánchez Jiménez

student•

Para que no se vuelva a enviar un form y salga esa ventanita de warning debemos hacer uso del POST/ redirect/ GET pattern. Pueden googlearlo :)

,problem%20encountered%20in%20user%20agents.

Isaí Sánchez Jiménez

student•

Para que no se vuelva a enviar un form y salga esa ventanita de warning debemos hacer uso del POST/ redirect/ GET pattern. Pueden googlearlo :)

Rubén Téllez Gerardo

student•

Auxilio, PHP no puede crear el archivo temporal, aunque no arroja error al respecto. Simplemente es incapaz de crear el archivo temporal y por tanto no puede moverlo.

Jonathan Amaya Mendieta

student•

Lo ideal para cuando manejemos un sistema que permita subir imagenes o archivos, es dar un nombre temporal ya que vemos que si existe un archivo que se llame igual lo sobreescribira.

Un consejo que me dieron y lo aplico siempre en mis desarrollos es: Nunca confies en tus usuarios

Basicamemte hagamos las validaciones que sean necesarias dentro de la aplicación.

Para un futuro, las imágenes nunca se guardan en la BD, se guarda solo el nombre que las identifique y el archivo en el servidor.

LUIS MIGUEL OLARTE BELLO

student•

Estoy muy contento porque he aprendido demasiado, muchas gracias RetaxMaster

Jose Alejandro Pantoja Giraldo

student•

php es hermoso y NO ESTA MUERTO

<?php

$basename = $_FILES["image"]["name"];
$image = $_FILES["image"]["tmp_name"];
$ruta_a_subir = "images/$basename";
$tipo_archivo = $_FILES["image"]["type"];
$error_de_carga = $_FILES["image"]["error"];
$partes_archivo = explode(".",$basename);
$extension_archivo=strtolower(end($partes_archivo));
$extensiones_permitidas=["jpg","png","svg","ico"];
/*
echo "<pre>";
var_dump($_FILES);
var_dump($extension_archivo);
echo "</pre>";
*/

//Validamos si hubo algun error al cargar el archivo
if ($error_de_carga == UPLOAD_ERR_OK)
{
    //Validamos que sea un tipo de archivo permitido
    if (in_array($extension_archivo,$extensiones_permitidas))
    {
        //Copiamos la imagen a la carpeta del servidor
        if (move_uploaded_file($image, $ruta_a_subir)){
            $mensaje = "Imagen subida correctamente";
        }else{
            $mensaje= "Huston tuvimos un problema - Verifica que tengas permisos para manipular el servidor ";
        }
    }else{
        $mensaje = "Huston tuvimos un problema - Extensión no valida <br>
                    Extensiones validas (".implode(',', $extensiones_permitidas).")";
    }
}else{
    $mensaje="¡Ups! algo salio mal - $error_de_carga";
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h3><?= $mensaje ?></h3>
    <img src="<?= $ruta_a_subir ?>" alt="<?= $basename ?>">

</body>
</html>

array(1) {
  ["image"]=>
  array(5) {
    ["name"]=>
    string(44) "rolling_waves_by_mequinoxem_d6lc1vr-3840.png"
    ["type"]=>
    string(0) ""
    ["tmp_name"]=>
    string(0) ""
    ["error"]=>
    int(1)
    ["size"]=>
    int(0)
  }
}

{
  "Debug with pre and var_dump": {
    "prefix": "pre",
    "body": [
      "echo \"<pre>\";",
      "var_dump(${1:});",
      "echo \"</pre>\";"
    ],
    "description": "Echo preformatted var_dump for debugging"
  }
}

```{  "Debug with pre and var\_dump": {    "prefix": "pre",    "body": \[      "echo \\"\<pre>\\";",      "var\_dump(${1:});",      "echo \\"\</pre>\\";"    ],    "description": "Echo preformatted var\_dump for debugging"  }}

Guardando imágenes en el servidor

Introducción

¿Cómo se renderiza una página web en mi computadora?

Levantando un servidor local

¿Cómo combinar HTML con PHP?

PHP como preprocesador de HTML

Imprime texto y etiquetas HTML

Condicionales

Ciclos

¿Cómo pasar variables de PHP a JavaScript?

Evita el código espagueti

Refactorizando código espagueti

Manejo de formularios

Cómo obtener una solicitud al servidor con PHP

Envío de un formulario a través de GET

Envío de un formulario a través de POST

Envío de imágenes

Guardando imágenes en el servidor

Tipos de inputs

Otros tipos de inputs

Valida si un formulario ha sido enviado

Sanitizando datos de mi formulario

Validando datos

Proyecto: formulario de contacto

Creando el maquetado

Haciendo la lógica de recepción del formulario

Integrando PHPMailer

Implementando el servidor de correos de Gmail

Conclusión

Es tu turno de poner todo en práctica