16. Subir imagenes al servidor


8 comentarios

Inicia sesión para comentar

Comentarios:

  • Cristian Gallardo

    Cristian Gallardo hace 7 meses

    Y existe alguna forma para que se pueda carga imagenes al editor y despues subirlas

    • Victor Arana Flores hace 7 meses

      Hola Cristian, así es. Si quieres puedes llevar mi curso de Laravel avanzado, ahi enseño como hacerlo.

  • Humberto García

    Humberto García hace 9 meses

    Para los que tengan problema con el tema del input porque no cambiar la imagen dinamicamente, solo tienen que colocar el atributo defer en la etiqueta <script></script> que envualve su codigo js, defer lo que hace es hacer que ese determinado script cargue de ultimo, osea despues de que carga todo el html y todo el css y los otros js, el carga de ultimo. Aqui mi codigo. <script defer>

                $(document).ready(function() {

                    $("#name").stringToSlug({

                        setEvents: 'keyup keydown blur',

                        getPut: '#slug',

                        space: '-',

                    });


     

                    ClassicEditor

                                    .create( document.querySelector( '#extract' ) )

                                    .then( editor => {

                                            console.log( editor );

                                    } )

                                    .catch( error => {

                                            console.error( error );

                                    } );

                    ClassicEditor

                                    .create( document.querySelector( '#body' ) )

                                    .then( editor => {

                                            console.log( editor );

                                    } )

                                    .catch( error => {

                                            console.error( error );

                                    } );


     

                })      

               

                // Cambiar la imagen

                document.getElementById("file").addEventListener('change', cambiar);


     

                function cambiar(event) {

                    var file = event.target.files[0];


     

                    var reader = new FileReader();

                    reader.onload = function(e){

                        document.getElementById("picture").setAttribute('src', e.target.result);

                    }


     

                    reader.readAsDataURL(file);

                }

            </script>

  • Carlos

    Carlos hace 10 meses

    saludos victor tengo el codigo  para cambiar imagen pero lo la cambia
    document.getElementById("file").addEventListener('change',cambiarImagen);

            function cambiarImagen(event){

              alert("llego");

              var file = event.target.files[0];

           

              var reader = new FileReader();

              reader.onload = (event)=>{

                document.getElementById("picture").setAttribute('src',event.target.result);

                         };

              reader.readAsDataURL(file);

  • Jon Apiscope

    Jon Apiscope hace 1 año

    buenas, excelente curso ya lo culmine, pero cuando subo a un host el proyecto las imágenes que ingreso no me cargan, solo las que que están por default, si me puedes apoyar te lo agradezco.

    • Victor Arana Flores hace 1 año

      Hola Jon. Te invito a dejar tu duda en el grupo Coders Free de Facebook.

  • Gustavo

    Gustavo hace 1 año

    Hola a todos, me surgio un problema y es en la parte del video en el minuto 12:47, si pongo
     .image-wrapper img{ 
           position: absolute; 
           object-fit: cover; 
            width: 100%; 
            height: 100%; 

    la imagen no se muestra, en cambio si lo hago asi si que aparece 
    .image-wrapper img{ 
            position: relative; 
            object-fit: cover; 
            width: 100%; 
            height: 100%; 

    Alguien me puede explicar porque? 
    Gracias, por cierto los videos son fabulosos

    Encontré este comentario en YouTube Y me pasa exactamente igual.

    • Victor Arana Flores hace 1 año

      Tailwind a agregado más utilidades, ahora puedes hacerlo de esta forma.

      <img class="aspect-[16/9] object-cover object-center">

    • Gustavo hace 1 año

      Gracias

  • Gabriel Griffin

    Gabriel Griffin hace 1 año

    me da problemas cuando guardo el post con la imagen. me manda el siguiente error POST http://blog.test/admin/posts 500 (Internal Server Error)

  • Martin Pereira

    Martin Pereira hace 2 años

    Hola se puede implementar Dropzone? quiero subir mas de una imagen y solo me repite primera imagen cargada en la vista, pero no la base de datos.

    • Victor Arana Flores hace 2 años

      Hola Martín, claro que se puede implementar dropzone

  • Jaime

    Jaime hace 2 años

    Para los que no le actualice la imagen, validen que el script esté así:
    var reader = new FileReader();

     

    con la palabra new