09 - Subir imágenes - Aprende Laravel Livewire desde cero
HTML-код
- Опубликовано: 11 апр 2021
- En este capítulo, aprenderás a agregar la funcionalidad de subida de imágenes a tus componentes de Livewire.
------------------------------------------------------------------------------------------------
CURSOS
🔴 Facturacion electronica Perú: youtube.codersfree.com/larave...
🟠 Laravel avanzado: youtube.codersfree.com/larave...
🟢 Ecommerce: youtube.codersfree.com/ecommerce
🔵 Api: youtube.codersfree.com/api-re...
🟠 Plataforma de cursos: youtube.codersfree.com/plataf...
🔴 Vue e Ineria: youtube.codersfree.com/vue-3-...
🟣 Eloquent Avanzado: youtube.codersfree.com/eloque...
🟡 Pasarela de pagos: youtube.codersfree.com/pasare...
⚫ Laravel Web Socket: youtube.codersfree.com/larave...
🟣 Notificaciones: youtube.codersfree.com/notifi...
🟢 Laravel Excel: youtube.codersfree.com/larave...
🔵 Digital Ocean: youtube.codersfree.com/despli...
🟡 Laravel Voyager: youtube.codersfree.com/larave...
🟣 Datatable Livewire: youtube.codersfree.com/datata...
🟠 Tenancy for Laravel: youtube.codersfree.com/multi-...
🔵 TDD Laravel: youtube.codersfree.com/tdd-la...
⚫ Traducir páginas: youtube.codersfree.com/traduc...
🟠 Wire UI: youtube.codersfree.com/livewi...
🔴 Acortador de links: youtube.codersfree.com/acorta...
🟡 Banhammer for laravel: youtube.codersfree.com/banham...
🟢 Laravel backup: youtube.codersfree.com/larave...
🔵 Actualizar a Laravel 10: youtube.codersfree.com/actual...
-----------------------------------------------------------------------
DONACIONES
Patreon: / codersfree
PayPal: www.paypal.com/paypalme/Coder...
------------------------------------------------------------------------------------------------
Grupo Facebook: / 4314830498588670
Plataforma: codersfree.com/ 
Наука
Si faker les está dando problemas a la hora de descargar las imagenes, hagan lo siguiente.
Abrán el siguiente archivo: vendor\fakerphp\faker\src\Faker\Provider\Image.php
y a partir de la linea 106 agregen estás dos lineas de código:
curl_setopt($ch, CURLOPT_FILE, $fp); //línea existente
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);//nueva línea
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//nueva línea
$success = curl_exec($ch) && curl_getinfo($ch, CURLINFO_HTTP_CODE) === 200;//línea existente
Esto les solucionará el problema, y podrán seguir con el curso de manera normal.
me sigue tirando el mismo error que podria hacer??
@@anthonysuarez9895 Cuando la migracion no puede crear la carpeta le cambio el FILESYSTEM_DRIVER=local a FILESYSTEM_DRIVER=public en el archivo .env además de cambiarselo en el filesystems.php Espero te sirva
@@markbowhill gracias brother... ya me estaba sacando canas verdes este error...
@@maytechnologies9504 me dejas ver :'v
No funciona. Crea el archivo y luego lo elimina. No entiendo por qué.
Cómo siempre un máster.
Muchas gracias Víctor
De maravilla como siempre, mil gracias por tus aportes
Super, excelente video, muchísimas gracias Víctor Arana
Muchas gracias Victor!!! exitos!
Hola, muy buenos videos, muchas gracias de parte de todos los futuros programadores que ya apreciamos de tus aportes. Para solucionar el renderizado del input se puede basar en el valor de la variable $open y condicionar el id asi, id='{{$open ?'x' : 'xx'}}' de esta forma al abrirse la ventana el input tendrá un id='x' y al cerrarla tendrá otro id='xx', por lo que se anula el valor cargado. Saludos
Para los que aún no les sale error aun cambiando los archivos hagan lo siguiente: primero si se dan cuenta el tiene un acceso directo a la carpeta storage en public, entonces una vez que lo ejecutan y sale el error verifiquen que les haya creado la carpeta public/posts en el storage/app, una vez hecho eso en su proyecto abran el terminal y ejecuten php artisan storage:link, una vez creado el link verifiquen que no hay ningún espacio en su url --> 'image'=>"posts/". $this->faker->image("public/storage/posts",640,480,null,false), una vez hecho esto ya se cargarán las imagen, espero les sirva, saludos.
19:50 Explicación ¿Por qué Livewire no resetea el nombre del archivo seleccionado en el input file?
Los inputs del tipo file, tienen la propiedad de ser inmutables. Cuando Livewire renderiza el contenido de una vista, solo incluye aquellas cosas que han cambiado. Debido a que dichos inputs son inmutables, Livewire no los cambia (no los resetea).
20:20 Workaround: Para hacer que el nombre del archivo del input file se reinicie o resetee, hay que definir una nueva propiedad desde el método mount() en donde le asignamos un número aleatorio. Dicho valor lo asociamos al identificador del input file y que se reemplace cada vez que se resetee el formulario.
Entonces, cada vez que Livewire vea un input con un ID distinto, lo va areemplazar por otro y, por ende, va a resetear el nombre del archivo del input file.
Para los que tengan problemas en InvalidArgumentException
Cannot write to directory "public/storage/posts", modifiquen a Storage::deleteDirectory('posts');
Storage::makeDirectory('posts') a Storage::deleteDirectory('public/posts');
Storage::makeDirectory('public/posts');
michas gracias
si tienen error con las imagenes de los seeders, esto lo solucionara - php artisan storage:link
Hola!!! Tu canal es excelente, me ha ayudado mucho y te lo agradezco, tengo una pregunta, ¿tienes algún curso dónde se puedan almacenar y recuperar las imagenes en algún servidor como Cloudinary usando Livewire?
En mi caso fallo la primera vez, recuerdo que en los primeros capítulos hablo y menciono sobre la carpeta storage. Al revisar mi proyecto me di cuenta que el vinculo simbólico en la carpeta public no existia, asi que configure correctamente la variable APP_URL dentro de mi archivo .env, y luego con el comando -> php artisan storage:link , laravel creo el vinculo simbólico resolviendo el primer problema. Despues también me vi obligado a modificar el archivo que image.php de la libreria de Faker (como indica el tutor en el comentario destacado), agregando esas dos lineas extras para que definitivamente se graben los archivos.
por si te sirve de algo en el minuto 19:24 se pierde un poco el audio como que pierde la configuración tu micrófono o no se pero si cambia un poco la calidad aun así se entiende claramente, están muy buenos tus vídeos muchas gracias Saludos!!!
Hola Ivan, gracias.
Si estoy teniendo problemas con el microfono debido a que el microfono que me compre es un microfono usb condensador.
Este microfono no se conecta con una interfaz por lo que depende netamente de la tarjeta de audio.
El broblema es que yo trabajo con una laptop por lo que no es posible cambiarlo. Estoy pensando comprarme una computadora e ir armandolo con las especificaciones que necesite. Espero sea la próxima semana
Hace poco estaba siguiendo los pasos de este vídeo y obtuve un error que aparecía en la parte de ejecutar el seed en la BD. Lo pude solucionar cambiando el valor de la variable FILESYSTEM_DRIVER de local a public. Esa variable está en el archivo ".env". No funcionó lo de cambiar el archivo de la librería faker como dijo Victor, así que deshice ese cambio Espero les ayude
Gracias Diego! Justo estaba buscando más información sobre el mismo error!
gracias bro!...✌🏼
bien ahi
Muchas gracias, eso sí me funcionó.
Alguien sabe ¿Para qué cambiamos el nombre del disco de "local" a "public"?
@@latlov Según entendí, es para que las imágenes que está descargando faker se almacenen en el directorio proyecto/storage/app/public y no en proyecto/storage/app y así poder acceder a ella desde el navegador. Recuerda que el navegador solo puede acceder a la carpeta public debido a la naturaleza de Laravel. Creo que es algo así
Saludos Master, gracias a tus video cursos estoy implementado un blog en el que el blog tiene : tags , categorias e imagenes , sigo la BDD que usaste en el curso de laravel 8, por ahora no logro recuperar la relacion $post->image()->create para guardas las imagenes , como hacerlo en Livewire en el componente ? igual me ocurre con la relacion polymorfica entre los posts y los tags m-> muchos a muchos , debo usar attach , pero no lo logro ....
Hola, ya hice todo lo sugerido en los comentarios acerca de de cambiar el driver de local a public tanto en filesystems como en .env, agregué las dos líneas de código en el archivo Image.php en la carpeta vendor, hice todo y logré que ejecute el seeder pero lo que hace es crear el archivo de la imagen y luego borrarlo uno por uno hasta que la carpeta queda vacía...alguien me podría explicarme por qué hace eso? y que solución hay?
Excelente trabajo profe Victor! Le comento que tengo un error al momento de procesar las migraciones, mas precisamente cuando tiene que crear la carpeta posts. El error dice: Cannot write to directory "public/storage/posts". Para continuar con el curso cree manualmente la carpeta y luego todo funcionó correctamente. Gracias.
amigo, no se si ya lo solucionaste, pero de todas formas te intento ayudar, en mi caso, me salia ese mismo error, e investigué para solucionarlo y no encontré forma, pero estuve analizando el código y encontré que la carpeta posts se crea en otro directorio, entonces una solución facil fue cambiar en el archivo filesystem.php en la linea donde dice
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'), //Linea existente
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
cambiarlo por:
'public' => [
'driver' => 'local',
'root' => storage_path('../'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
Además de cambiar a public el FILESYSTEM_DRIVER del filesystems.php cambialo también en el .env de local a public espero te funcione, aunque ya lo debes haber resuelto
@@markbowhill esa era la solución.. muchas Gracias
@@markbowhill Exactamente...he alli el detallazo
una pregunta devs, como hago para hacer focus al cargar el modal y se quede en el campo titulo, ya le puse autofocus en el input pero no me lo respeta
Que tal me pueden ayudar como puedo utilizar la img despues de subir a la base de datos
Hola bro, como puedo reproducir un video con livewire que esta alojado en mi hosting?
Saludos
Hola , quisiera saber si haras algun curso de react o kotlin (explicas muy bien)
8:46 cómo haces para que al hacer click en ese link, te lo abra en otra pestaña del visual studio code? Cómo se llama la extensión que te permite hacer eso? Gracias.
Usando livewire se puede desabilitar un input?
Buenas , Y porque da error si se pasa de 2mb? que pasa si quiero subir una de 4mb? que tendria que hacer?
Se crea confusion en el acceso a la carpeta public/storage/posts lo que hice fue en el archivo .env colocar el FILESYSTEM_DRIVER=public y pude resolver temporalmente esto
Eso es porque en la versión de Laravel que se usa en el video la variable FILESYSTEM_DRIVER no existe en su archivo .env y por eso el sistema toma el valor del filesystems.php donde lo está editando, y por eso a el le funciona y a nosotros no ya que en nuestras versiones el cambio debe hacerse en el archivo .env y no en el filesystems.php o si quieres en ambos pero es innecesario cambiarlo en el filesystems.php ya que no lo tomará en cuenta porque tomará el del archivo .env
@@markbowhill gracias man
Hola Coders Free muchas gracias por el contenido que compartes, pero he presentado un problema en cuanto a la subida de las imágenes, no se pero cuando estas se guardan, se almacenas en la carpeta C:\xampp\htdocs\jet3\storage\app\posts y no en C:\xampp\htdocs\jet3\public\storage\posts, y como se están guardando en la carpeta que no es publica, al momento de llamar dichas imágenes no me cargan; entonces no se que me sugeriría, he intentado varias formas, pero creo que todo radica en el método storage() que se usa al momento de guardar las imágenes, pero este método no lo comprendo del todo.
Hola, supongo que para estas alturas ya lo resolviste... pero espero que sirva para quien también tenga esta duda.
Cuando editas el archivo filesystems.php ('default' => env('FILESYSTEM_DRIVER', 'public '), /*local lo cambias por public*/ ) laravel cambia la ruta de almacenamiento a la carpeta storage/app/public. Cuando usas el método storage() este apunta a esa ruta, dentro del parentesis puedes definir en que carpeta guardar los archivos extendiendo la ruta según tus necesidades (storage('proyectos/2021') == guardara el archivo en storage/app/public/proyectos/2021)
Ahora bien, para acceder a los archivos desde la aplicacion necesitas crear un link simbolico (una carpeta que sirva de acceso directo a la carpeta storage/app/public).
Suena enredado pero en realidad solo necesitas ejecutar este comando = php artisan storage:link
Esto creara el link simbolico en la carpeta public. Ahora usando el metodo asset('storage/...') accedes a storage/app/public. De ahi en adelante completas la ruta que necesites.
Espero que a alguien le sirva... Igual dejo el link de la documentación de laravel que habla sobre esto.
Saludos.
laravel.com/docs/8.x/filesystem#the-public-disk
Hola, justo después de cargar la imagen en pantalla el input image en vez de mostrarme el nombre de la imagen seleccionada me dice "ningún archivo seleccionado". Durante el proceso de carga si me muestra el nombre, alguien sabe que pueda ser?
Hola Victor, y muchissimas gracias por tus cursos de alta calidad !
Une preguntita : crees que seria posible en algun momento desarrolar una opcion que nos permitiria usar la camara del celular o de la tablet para subir una imagen ? Pienso que seria muy conveniente para muchas applicaciones y de verdad aun no tengo idea de como funccionaria autorizar el acceso a la camara (o porque no otros captores) para una applicacion Laravel.
Otra vez gracias por todo el conocimiento que compartes con nosotros !
Hola profesor saludos muy buen curso, tengo el siguiente inconveniente no se me sincronizan las imágenes que se suben a la carpeta storage, con las de la carpeta storage del directorio public, ya probé con el comando "php artisan storage:link" y no funciona, hay alguna forma de solucionarlo. agradezco su ayuda...
entendi como funciona storage, si trabjas sobre ubuntu entras en cosola a la carpeta public y ejecutas ln -s ../storage/app/public/ storage esto creara una carpeta copia de la carpeta storage por otro lado limpia el cache php artisan config:clear y en la carpeta .env cambia mejor a public y tmb colocas el nombre de la web en mi caso livewire.loc
y para cargar mas de 1 archivo como le haces?
Al momento de agregar la imagen el modal se estira demasiado hacia abajo y se pierden de vista los botos de cancelar y guardar, al intentar darle scroll down se mueve el contenido de la pagina que se visualiza detras del modal y el modal no va hacia abajo y no puedo darle click a los botones, a alguien le esta pasando lo mismo? que me pueda ayudar, de antemano gracias.
Victor, hace poco en un proyecto me encontré en la necesidad de guardar automáticamente una imagen en la bbdd *justo después* de que la imagen ha sido procesada con livewire y se encuentra en la carpeta temporal. No logré encontrar una solución optima para eso. Alguna idea de como se podría lograr eso?
Claro, podrías jugar con el ciclo de vida de livewire. Que cuando el valor de la propiedad image cambie, automáticamente está se guarde en el disco en el cual estés trabajando.
@@CodersFree algo si como updatedImage(){
image->store(....)
y la lógica
}
yo le haría así
El error ahora es que se comienzan a crear las imágenes pero al final de la migración la borra. y queda la carpeta vacía. Ya hice la corrección en el Vendor. Y sigue igual.
tengo el siguiente error The foto failed to upload. sin importar que seleccione me trae el mismo error y no me crea la carpeta tem
Yo tengo el mismo problema. No importa el tipo de archivo que intente subir ya cambie las reglas de validación y sigue igual.
@@ingleonelelizondo este problema lo solucione de manera temporal ejecutando el comando php artisan serve ensaya es un error de livewire que no lee el archivo js
Hola, de casualidad sabes por qué Storage::makeDirectory('posts') no me crea la carpeta "posts" en public/storage? Solo me la crea en storage/app, y me da el error:
InvalidArgumentException
Cannot write to directory "public/storage/posts"
Edit: comparto la solución por si le sirve a alguien:
1. Ir a config > filesystems.php
2. Donde dice : 'default' => env('FILESYSTEM_DRIVER', 'local'), cambiarlo por 'default' => env('FILESYSTEM_DRIVER', 'public'),
3. Si no es la solución correcta/ideal, favor de avisar.
Creo que solo tenías que ir al archivo .env y quitar o modificar la variable FILESYSTEM_DRIVER=local por FILESYSTEM_DRIVER=public
@@giovannirojasmorales7833 ¿Sabes para qué le cambiamos el nombre de 'local' a 'public'?
no verificaste si guardo la imagen o no ?. no me guarda la imagen y no se si ati te funciona el codigo.
Sí las guarda. En tu listado, a manera de prueba rápida simple, agrega la columna imagen y despliega el valor de $post->image.
Más adelante, coloca entonces la etiqueta html para mostrar la imagen.
Intenté con {{asset($post->image)}} , pero no se muestran las imágenes en mi listado :/