Ejemplo de subida de archivos

Clase 43 de 53 • Curso de Introducción a PHP 2018

Clase anteriorSiguiente clase

Resumen

Al subir archivos debemos tener muchos puntos de seguridad en cuenta, pues exponemos el acceso al servidor.

Primero prepararemos el form colocando la propiedad: enctype='multipart/form-data

Después desde el código PHP obtendremos el archivo con la variable super global $_FILES.

Alejandro Tangarife Rivas

student•

Hola, les voy a dejar aquí mi código dinámico (el reto), para que lo puedan ver y utilizar de ejemplo o 'guía' y se les pueda facilitar de una buena manera el entendimiento del ejercicio ;) . Index.twig

&lt;ul&gt;
     {% for job in jobs %}
           &lt;ul class=&quot;work-exp-box&quot;&gt;
                 &lt;li class=&quot;row&quot;&gt;&lt;h4&gt; {{ job.carrer }} &lt;/h4&gt;&lt;/li&gt;
                 &lt;p&gt;{{ job.description }}&lt;/p&gt;
           &lt;/ul&gt;


	// esto es un if para reconocer si, hay o no hay imagen en la DB.
          {% if job.fileName == '' %}
                &lt;h5&gt;No image founded :/&lt;/h5&gt;
              {% else %}
                &lt;img src=&quot;uploads/{{ job.fileName }}&quot; alt=&quot;image&quot; style=&quot;width:120px; heigh:90px;&quot;&gt;
          {% endif %}
                                
     {% endfor %}
&lt;/ul&gt;

JobsController.php

try {

                        $jobValidator -&gt; assert($pd);

                        $files = $request -&gt; getUploadedFiles();
                        $image = $files['image'];

                        if($image -&gt; getError() == UPLOAD_ERR_OK) {
                            $fileName = $image -&gt; getClientFilename();
                            $image -&gt; moveTo(&quot;uploads/$fileName&quot;);
                        }
                        
                        #pd es POSDATA.
                        $pd = $request -&gt; getParsedBody();
                        $job = new Job();
                        $job -&gt; carrer = $pd['carrer'];
                        $job -&gt; months = $pd['months'];
                        $job -&gt; description = $pd['description'];
                        $job -&gt; fileName = $fileName;
                        $job -&gt; save();

                        $responseMessage = $success;

                      } catch (\Exception $exception) {
                          $responseMessage = $exception -&gt; getMessage();
                      }

// El 'return' no cambia

En el código de las imágenes reconoce la imagen y si no hay, coloca un mensaje, por el contrario coloca la imágen. Espero, los pueda ayudar :D

SEBASTIAN HERNANDEZ CARO

student•

Muchas gracias, me fue de gran ayuda!!!

Juan Francisco

student•

pongo exactamente lo mismo y cuando inspecciono en chrome me aparece la ruta adecuada en el src de la imagen, **pero la imagen no aparece **

Bryan de jesus marcos quino

student•

Para los que llegamos a este video y nos confundimos , más abajo esta el de validaciones para después ver este y no existan esas dudas.

Carlos Isaac Rosales Castellanos

student•

Muy bien! El reto de agregar la ruta de la imagen lo hice de la siguiente manera!

El getAddJobAction quedó de esta forma:

public function getAddJobAction($request)
    {
        $responseMessage = null;
        if ($request->getMethod() == 'POST') {
            $postData = $request->getParsedBody();
            $jobValidator = v::key('title', v::stringType()->notEmpty())
                ->key('description', v::stringType()->notEmpty());

            try {
                $jobValidator->assert($postData);

                $files = $request->getUploadedFiles();
                $img = $files['img'];
                $route = "noImg";
                if($img->getError() == UPLOAD_ERR_OK) {
                    $fileName = $img->getClientFilename();
                    $img->moveTo("uploads/$fileName");
                    $route = "uploads/$fileName";
                }

                $job = new Job();
                $job->title = $postData['title'];
                $job->description = $postData['description'];
                $visible = false;
                if ($postData['visible'] != "0") $visible = true;
                $job->visible = $visible;
                $job->months = $postData['months'];
                $job->img = $route;
                $job->save();

                $responseMessage = 'Saved';
            } catch (\Exception $e) { 
                $responseMessage = $e->getMessage();
            }
        }
        return $this->renderHTML('addJob.twig', [
            'responseMessage' => $responseMessage
            ]);
        // include '..\views\addJob.php';
    }

nótese que lo nuevo es que, agregue una variable "$route" para guardar la ruta de la imagen, esta se inicializa por defecto en "noImg" en caso de que no haya una imagen guardada, acto seguido en caso de que SI haya una imagen, cambio la ruta dependiendo del nombre del archivo, y más adelante guardo la ruta en el atributo img de $job, así quedó la tabla en la DB:

y de esta forma quedó en el archivo .twig principal, la ruta de la imagen:

{% for job in jobs %}
                        <li class="work-position">
                            <h5>{{job.title}}</h5>
                            <p>{{job.description}}
                            </p>
                            <p>{{job.getDurationAsString()}}</p>
                            <strong>Achievements:</strong>
                            <ul>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                                <li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
                            </ul>
                            <img src="{{ job.img }}" alt="">
                        </li>
                    {% endfor %}

Johan Mora

student•

Solas

Nube Formacion

student•

Agregar el atributo imagen

1-Creamos el atributo en la base de datos 2-Lo guardamos en la base de datos a través del controlador

 $job->image=$fileName;

3-Lo agregamos a la vista.

{% if job.image %}
                  <img src={{"upload/"~job.image }} style="width=200px" />
{% endif %}

Concateno la direccion con ~ por si cambia la ruta
agrego un condicional para evaluar si el campo tiene imagen asignada

fermin martin

student•

Muy bien explicado

Manuel Alejandro Hermoso

student•

buen aporte!

Luis Fernando Zarazua Aguilar

student•

Es muy sencillo utilizar los archivos con una función directa, sin tener que crear tantos objetos para poder manipular un solo archivo, me pareció muy bien lograda la forma de lectura de archivos para esta aplicación.

$files = $request-&gt;getUploadedFiles();
                    $logo = $files['logo'];

                    if ($logo-&gt;getError() == UPLOAD_ERR_OK) {
                        $filename = $logo-&gt;getClientFilename();
                        $logo-&gt;moveTo(&quot;../public/uploads/$filename&quot;);
                    }```

Brayhan Alejandro Gabriel Guerrero

student•

Parece ser que no se subio una clase de validadores usando la libreria respect/validation…

Bryan de jesus marcos quino

student•

si eso pense cuando vi codigo que no reconocía de la clase anterior 😦

Daniel Melchor

student•

Hola buenas tardes a todos, para cumplir el reto realice lo siguiente

agregar campo para almacenar el nombre de la imagen

![](

en el archivo jobsController asocie al campo de logo la ruta concatenada con el nombre del archivo

class JobsController extends BaseController{
		public function getAddJobAction($request){
			
			$responseMessage = null;

			if ($request->getMethod() == 'POST') {
				$postData = $request->getParsedBody();
				$jobValidator = v::key('title', v::stringType()->notEmpty())
                  ->key('description', v::stringType()->notEmpty());

				try {
					$jobValidator->assert($postData);
					$postData = $request->getParsedBody();
					$files = $request->getuploadedfiles();
					$logo = $files['logo'];
					if ($logo->getError() == UPLOAD_ERR_OK) {
						$filename = $logo->getClientFileName();
						$logo->moveTo("uploads/$filename");
					}
					$job = new job();
					$job->title = $postData['title'];
					$job->description = $postData['description'];
					$job->logo = 'public/uploads/' . $filename;
					$job->save();
					$responseMessage = 'Saved';
				} catch (\Exception $e) {
					$responseMessage = $e->getMessage();
				}
				
				
			}
			return $this->renderHTML('addJob.twig',[
				'responseMessage' => $responseMessage]);
		}
	}```

3. en el archivo index.php agregue el llamado a la imagen

<ul> {% for job in jobs %} <li class="work-position"> <h5>{{ job.title }}</h5> <p> {{ job.description}}</p> <img src = "{{job.logo}}" width="100px" height="100px"> </li> {% endfor %} </ul>```

Saludos

Enrique Garcia Stave

student•

Tuve muchos problemas en esta parte del curso, precisamente porque estoy trabajando con Internet Information Services, y al parecer no tenia permiso con la carpeta temp de WINDOWS. Afortunadamente pude arreglar el problema. Apenas pueda publico la solucion.

Rodolfo Sáenz

student•

En el controller:

$job = new Job();
$job->title = $postData['title'];
$job->description = $postData['description'];

if($logo->getError() == UPLOAD_ERR_OK) {
	$fileName = $logo->getClientFilename();
	$logo->moveTo("uploads/$fileName");
	$job->filename = "uploads/$fileName";
}

$job->save();

En la vista:

<ul>
	 {% for job in jobs %}
<li class="work-position">
		<h5>{{ job.title }}</h5>
		<p>{{ job.description }}</p>
		<p><img src"{{ job.filename }}" \></p>
	</li>
	{% endfor %}
</ul>

Irma Davila

student•

Lo logré. Tuve problemas por que no me acordaba que debía modificar en el modelo de datos en BaseElement.

Se agrega campo a la base de datos, le puse nombre “logo” tipo TEXT
Se modifica la clase BaseElement del Models, específicamente el constructor para considerar el nuevo campo logo:

class BaseElement implements Printable{
    protected $title;
    public $description;
    public $ruta;
    public $visible=true;
    public $months;

    public function __construct($title, $description,$ruta){
        $this->setTitle($title);
        $this->description = $description;
        $this->logo = $ruta;
    }

Luego en JobsController se agregar linea para asignar la ruta a una variable $ruta.

                if($logo->getError()== UPLOAD_ERR_OK){
                    $fileName = $logo->getClientFileName();
                    $logo->moveTo("uploads/$fileName"); 
                    $ruta = "uploads/$fileName";    
                }

Y se agrega la ruta al campo logo de la clase job:

                $job = new Job();
                $job->title =  $postData['title'];
                $job->description = $postData['description'];
                $job->logo = $ruta;
                $job->save();

Finalmente para visualizar la imagen en la página principal:

            {% for job in jobs %}
              <li class="work-position">
                <h5> {{ job.title|e }} </h5>
                <p> {{ job.description}} </p>
                <img src= {{job.logo}} >
              </li>
            {% endfor %}```

Eduardo Vega

student•

el chmod sirvio en git bash

Elvis Moreira

student•

Hay que tener muchos puntos de seguridad

Se prepara el form colocando la propiedad : entype='multipart/form-data'

Las supergloblal $_FILES es donde llegan todos los archivos

Se crea la siguiente línea para recibir el archivo

$files=$request->getUpload(); y luego extraemos el nombre del archivo que estamos subiendo así:

$logo=$files['logo']; Revisar la documentación de PSR7 para ver los métodos de subida de archivo bajo este estándar

Se revisa si la subida del archivo tiene algún error de la siguiente manera y mover el archivo a un directorio

if($logo->getError()==UPLOAD_ERR_OK) { $fileName= $logo->getClientFilename(); $logo->moveTo("uploads/$fileName"); }

Se mueve el archivo porque al realizarse la subida no está en el mismo directorio en el que se está trabajando

Edwin Marte

student•

Para subir la imagen & guardarla en mi caso, guarde en la base de datos el nombre de la image. La ruta la guarde en una variable dentro del indexController.php & al final uní ambas.

return $this-&gt;renderHTML('index.twig',[
  			'jobs' =&gt; $jobs,
  			'projects' =&gt; $projects,
  			'uploadRoute' =&gt; 'public/uploads/'
  		]);```

Index.Twign


Esto pensando en un caso donde quisiera mover de directorio las imagenes en un futuro.

Edward Suarez

student•

Esto es en el index.twig documentación del if en twig

<ul>

            {% for job in jobs %}
             <li class="work-position">
             <h5>{{ job.title }}</h5>
             <p>{{ job.description}}</p>
             <p>{{ job.months}}</p>
             {% if job.fileName == 0 %}
                <p> No file found :c </p>
             {% else %}
                <img src="uploads/{{ job.fileName }}" alt="{{ job.fileName }}" width="120" height="90"> 
             {% endif %}
             </li>
            {% endfor %}  
          </ul>```

El job controller

	$job = new Job();
            $job->title = $postData['title'];
            $job->description = $postData['description'];
            $job->months = $postData['months'];
            $job->visible = true;
            $job->fileName = $fileName;
            $job->save();```

y también en la base de datos tienen que crear un campo llamado fileName de tipo texto

Agustin Garcia

student•

Hola disculpa pero no entendi porque pusiste asi , me funciono pero esa parte no a quedado muy clara si me podrias explicar.Te lo agradeceria

<imgsrc="uploads/{{ job.fileName }}

Jesus Gallardo

student•

Help me !!!

No consigo como darle permisos a mi carpeta upload

Estoy en Windows 7

Javier Leonardo Diaz Avila

student•

Añadí a la base de datos "jobs" la cadena de texto "filename" ya que estamos usando Eloquent y no basta con añadir la variable a la clase "Job"

Controlador

                $files = $request-&gt;getUploadedFiles();
                $logo = $files['logo'];
                $dirFileName = &quot;uploads/none.jpg&quot;;

                if($logo-&gt;getError() == UPLOAD_ERR_OK){

                    $fileName = $logo-&gt;getClientFileName();
                    $dirFileName = &quot;uploads/$fileName&quot;;
                    $logo-&gt;moveTo($dirFileName);
                }
                
                $job = new Job();
                $job-&gt;title = $postData['title'];
                $job-&gt;description = $postData['description'];
                $job-&gt;filename = $dirFileName;
                $job-&gt;save();

Vistas

            {% for job in jobs %}
              &lt;li class=&quot;work-position&quot;&gt;
                &lt;img src={{ job.filename }} alt=&quot;Logo empleo&quot; width=&quot;128px&quot;&gt;&lt;/img&gt;
                &lt;h5&gt;{{ job.title }}&lt;/h5&gt;
                &lt;p&gt;{{ job.description }}&lt;/p&gt;
              &lt;/li&gt;
            {% endfor %}

Daniel Ramírez Mendoza

student•

JobsController:

try {
	$jobValidator->assert($postData);
	$postData = $request->getParsedBody();

	$files = $request->getUploadedFiles();
	$logo = $files['logo'];

	if ($logo->getError() == UPLOAD_ERR_OK) {
		$fileName = $logo->getClientFilename();
		$routeFileName = "uploads/$fileName";
		$logo->moveTo($routeFileName);
	}
	$job = new Job();
	$job->title = $postData['title'];
	$job->description = $postData['description'];
	$job->file = $routeFileName;
	$job->save();

	$responseMessage = 'Saved';
} catch (\Exception $e) {
	$responseMessage = $e->getMessage();
}

index.twig:

{% for job in jobs %}
	<li class="work-position">
       	<h5>{{ job.title }}</h5>
        <p>{{ job.description }}</p>
        <img src="{{ job.file }}">
	</li>
{% endfor %}

Mariana Valencia Gallego

student•

Esta clase me gustó muchísimo!

Luis Fernando Manzano

student•

Si tienen el proyecto dentro de una carpeta htdocs, recuerden colocar el ../ antes de uploads. He tenido muchos errores con las rutas en este curso

Ericka Yánez Cedeño

student•

Reto listo 😀✅

Para que en los otros "jobs" que no tienen imagen no aparezca el icono ?, coloque en index.twig un if

  {% if job.nombreArchivo %}
              <p> <img src="public\upload\{{job.nombreArchivo}}"/> 		   
               </p>
 {% endif %}

En este caso mi campo en bd es "nombreArchivo" y mi carpeta es "upload", habría que adecuarlo al proyecto que cada uno maneja.

Ejemplo de subida de archivos

Introducción a PHP

¡Actualizamos este curso!

Lo que aprenderás sobre PHP

¿Qué es PHP?

Setup y Herramientas

Conceptos Básicos de PHP

Sintaxis de PHP

Revisando el template que usaremos

Variables tipos de datos y cadenas

Tipos de Datos en PHP

Arreglos

Condicionales y Ciclos

Ejercicios Arreglos

While vs. Do While

Operadores, Condicionales, Continue y Break

Operadores

Ejercicios Operadores

Funciones

Agregando archivos externos

Programación Orientada a Objetos

Programación Orientada a Objetos

Constructor y Métodos

Herencia

Herencia y polimorfismo

Interfaces

Namespaces

Herramientas para Proyectos PHP

PSR y PHPFIG

Composer

Bases de Datos

Introducción a las Bases de Datos

ORM

Formularios

Eloquent

Listar registros de la base de datos con Eloquent

Insertar datos en MySql con PHP

Estructura/Arquitectura de una applicacion web

Front Controller

PSR7

Router

MVC, Creando Controllers

MVC Reestructurando Vistas y Controladores

MVC Controller de la entidad Job

Template engines

Template engines

Twig

Templates con Twig

Extendiendo Templates con Twig

Validaciones

Validaciones

Subida de archivos

Ejemplo de subida de archivos

Tips de seguridad para subir archivos en PHP

Autenticación de usuarios y manejo de sesiones

Reto. Creación de usuarios

Autenticando usuarios

Formulario de Login

Manejo de sesiones

Liberación de código/release

Variables de entorno

Deploy en Heroku

Instalación de pgAdmin

Creando la base de datos en Heroku

Conclusiones del curso