16. Subir imagenes al servidor

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

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>

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);

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.

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.

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)

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.

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

con la palabra new