Sindbad~EG File Manager

@extends('layouts.frontend')
@section('contenido')
	<style>
        body { 
			background: url(/frontend/aventura.jpg) no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
    </style>
	<livewire:navbar></livewire:navbar>
		
	<div class="container">
	  	<div class="row justify-content-center align-items-center minh-100">
	    	<div class="col-lg-12" align="center">
	      		<h1 style="font-family:  Uni Sans Heavy;font-size: 7vw;">Mi Perfil</h1>
			</div>
			
			<div class="col-lg-12" align="center" style="background-color: rgb(255,255,255,0.7)">
	      		
				{!! Form::model(Auth::user(),['method'=>'PATCH','route'=>['perfilupdate',Auth::id()],'files'=>'true']) !!}
	            	{{Form::token()}}
                    <div class="form-group" align="center"><br>
                        <label><b>Foto Perfil:</b></label><br>
                        <small>Se solicita una imagen cuadrada</small><br>
                        <output id="list">
                            @if (Auth::user()->foto)
                                <img src="{{asset('images/perfil/'.Auth::user()->foto)}}" class="img-responsive" alt="" style="width: 200px;border-radius: 50%" />
                            @else
                                <img src="{{asset('images/perfil/default.png')}}" class="img-responsive" alt="" style="width: 200px;border-radius: 50%" />
                            @endif
                        </output><br>
                        <div class="btn btn-basic" onclick="getFile()">
                            <img src="{{asset('imgsystem/flechita.svg')}}" alt=""> <span>Cambiar Imagen&hellip;</span>
                        </div>
                        <div style='height: 0px;width: 0px; overflow:hidden;'>
                            <input id="files" type="file" value="upload" name="foto" onchange="sub(this)" accept="image/jpeg, image/png, image/bmp" />
                        </div>
                        @error('foto')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
		            <div class="card-footer" align="right">
		                <button type="submit" class="btn btn-success"><i class="fas fa-save"></i> Guardar Cambios</button>
		            </div>
	            {!!Form::close()!!}

			</div>

			<livewire:cambiarpass></livewire:cambiarpass>


	  	</div>
	</div>

	<script>
    	function archivo(evt) {
	        var files = evt.target.files; // FileList object
	             
	        // Obtenemos la imagen del campo "file".
	        for (var i = 0, f; f = files[i]; i++) {
	            //Solo admitimos imágenes.
	            if (!f.type.match('image.*')) {
	                continue;
	            }
	             
	            var reader = new FileReader();
	             
	            reader.onload = (function(theFile) {
	                return function(e) {
	                    // Insertamos la imagen
	                    document.getElementById("list").innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
	                };
	            })(f);
	             
	            reader.readAsDataURL(f);
	        }
	    }
	             
	    document.getElementById('files').addEventListener('change', archivo, false);

	    function getFile() {
	        document.getElementById("files").click();
	    }

	        function sub(obj) {
	        var file = obj.value;
	        var fileName = file.split("\\");
	        //document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
	        event.preventDefault();
	    }
    </script>

@stop