Sindbad~EG File Manager

@extends('layouts.frontend')
@section('contenido')
	<div class="col-lg-12" align="center">
  		<h1 style="font-family:  Aldo the Apache;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>

	<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