Subir avatar mejorado

[Miguel92 525]

En este caso se usará CDN para que sea mejor

1 - En tema/templates/modules/m.cuenta_sidebar.tpl y reemplazamos todo por esto

<div class="sidebar-tabs clearbeta">
   <h3>Mi Avatar</h3>
   <div class="avatar-big-cont">
      <div style="display: none" class="avatar-loading"></div>
      <img width="120" height="120" alt="" src="{$tsConfig.url}/files/avatar/{if $tsPerfil.p_avatar}{$tsPerfil.user_id}_120{else}avatar{/if}.jpg?t={$smarty.now}" class="avatar-big" id="avatar-img"/>
   </div>
   <ul class="change-avatar" id="change">
      <li class="local-file" id="pc" style="width: 50%;text-align:center;"><span>Local</span></li>
      <li class="url-file" id="url" style="width: 50%;text-align:center;"><span>Url</span></li>
   </ul>
   <div class="clearfix"></div>
   <a href="javascript:avatar.subir()" class="avatar-next edit" >Editar</a>
</div>
<div class="clearfix"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/croppr.min.css" integrity="sha256-Bbkel8+0sOmrvX75oDwNElgbmrAP+Pw+XXKKUwoKiVE=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/croppr.min.js" integrity="sha256-VPADQYvd0gjLaeduvmP9/UZAdNW3D2sJieeJ3a3PX64=" crossorigin="anonymous"></script>

<script src="{$tsConfig.js}/subir-avatar.js?{$smarty.now}"></script>

2 - Creamos un archivo llamado "subir-avatar.js" y lo agregamos en tema/js

const next = $(".avatar-next");
const sizeImg = 120;

function cambiarFile(){
   const input = $('#file-avatar')[0];
   if(input.files && input.files[0]) {
       let name_file = decodeURIComponent(input.files[0].name);
      document.querySelector(".drop-message").innerHTML = name_file;
      next.removeClass('btn-disabled')
   }   
}
$("#url-avatar").on('keyup', () => {
   if($("#url-avatar").val().length > 5) next.removeClass('btn-disabled')
})
$("#change > li, #change > li span").on('click', event => {
    const block = $("#change")
    block.attr('class', '')
    var tipo = event.target.textContent
    if(tipo === 'Local') {
        block.html(`<div id="drop-region">
         <input type="file" name="local" id="file-avatar" onchange="return cambiarFile();" class="browse"/>
         <div class="drop-message">
            Arrastra y suelta la imagen o haz clic para subir
         </div>
      </div>`)
    } else {
        block.html(`<div style="margin: 0 auto 10px auto;">
         <input type="text" name="url" autocomplete="off" id="url-avatar" placeholder="Url de la imagen" class="browse form-control"/>
      </div>`)
    }
})

var avatar = {
    uid: false,
    key: false,
   ext: false,
    informacion: '',
    current: false,
    success: false,
    subir: async () => {
        $(".avatar-loading").show().css('display', 'flex');
        inputs = [].slice.call(document.querySelectorAll(".browse"))
        inputs.forEach(input => {
            const datoUrl = new FormData();
            datoUrl.append('url', (input.name == 'url') ? input.value : input.files[0])
            
            if(!empty(input.value)) {
                fetch(global_data.url + '/upload-avatar.php', {
                    method: 'POST',
                    body: datoUrl
                })
                .then(response => response.json())
                .then(blobData => {
                   avatar.subida_exitosa(blobData)
                });
            }
        })
    },
    subida_exitosa: rsp => {
        if (rsp.error == 'success') avatar.success = true;
        else if (rsp.msg) {
         avatar.key = rsp.key;
         avatar.ext = rsp.ext;
         avatar.cortar(rsp.msg);
        } else cuenta.enviar_alerta(rsp.error, 0);
        $(".avatar-loading").hide();
    },
    cortar: img => {
        img = img + '?t=' + new Date();
        mydialog.show(true);
        mydialog.title("Cortar avatar");
        mydialog.body(`<img class="avatar-cortar" src="${img}" />`);
        mydialog.buttons(true, true, 'Cortar', "avatar.guardar()", true, false, true, 'Cancelar', 'close', true, true);
        /*mydialog.buttons([
            {mostrar: true, texto: 'Cortar', accion: `avatar.guardar()`, activo: true}, 
            {mostrar: true, texto: 'Cancelar', accion: 'cerrar', activo: true}
        ]);*/
        mydialog.center();
        $("#avatar-img, #avatar-menu").attr("src", img).on('load', () => {
            var croppr = new Croppr('.avatar-cortar', {
               aspectRatio: 1, // Mantemos el tamanio cuadrado 1:1
                maxSize: { 
                    width: sizeImg, // Tamano por defecto
                    height: sizeImg // Tamano por defecto
                }, 
                // Enviamos las coordenadas para cortar la imagen
                // Tiene la funcion onCropEnd ya que es como va a quedar
                onCropEnd: data => avatar.informacion = data,
            });
        });
    },
    recargar: () => $("#avatar-img").attr("src", avatar.current + '?r' + new Date()),
    guardar: () => {
        if (empty(avatar.informacion)) 
            cuenta.enviar_alerta('Debes seleccionar una parte de la foto', 0);
        else {
            const coordenadas = new FormData();
            coordenadas.append('key', avatar.key)
            coordenadas.append('ext', avatar.ext)
            coordenadas.append('x', avatar.informacion.x)
            coordenadas.append('y', avatar.informacion.y)
            coordenadas.append('w', avatar.informacion.width)
            coordenadas.append('h', avatar.informacion.height)
            fetch(global_data.url + '/upload-crop.php', {
                method: 'POST',
                body: coordenadas
            })
            .then(response => response.json()) 
            .then(blobData => {
               if(blobData.error == "success") {
                   mydialog.body("Tu avatar se ha creado correctamente, ahora espera que recargue la página");
                   setTimeout(() => location.reload(), 1200);
                   mydialog.buttons(false)
               }
            });
        }
    }
}

3 - Luego en tema/js/cuenta.js buscar¿

var avatar = { .....

y borran todo hasta el final del archivo

4 - Luego van a inc/php/ajax.upload.php y lo reemplazan por esto

<?php if ( ! defined('TS_HEADER')) exit('No se permite el acceso directo al script');
/**
 * Controlador AJAX
 *
 * @name    ajax.upload.php
 * @author  PHPost Team
*/
/**********************************\

*    (VARIABLES POR DEFAULT)        *

\*********************************/

    // NIVELES DE ACCESO Y PLANTILLAS DE CADA ACCIÓN
    $files = array(
      'upload-avatar' => array('n' => 2, 'p' => ''),
      'upload-crop' => array('n' => 2, 'p' => ''),
        'upload-images' => array('n' => 2, 'p' => ''),
    );

/**********************************\

* (VARIABLES LOCALES ESTE ARCHIVO)    *

\*********************************/

    // REDEFINIR VARIABLES
    $tsPage = 'php_files/p.upload.'.$files[$action]['p'];
    $tsLevel = $files[$action]['n'];
    $tsAjax = empty($files[$action]['p']) ? 1 : 0;

/**********************************\

*    (INSTRUCCIONES DE CODIGO)        *

\*********************************/
    
    // DEPENDE EL NIVEL
    $tsLevelMsg = $tsCore->setLevel($tsLevel, true);
    if($tsLevelMsg != 1) { echo '0: '.$tsLevelMsg['mensaje']; die();}
    // CLASE
    require('../class/c.upload.php');
    $tsUpload = new tsUpload();
    // CODIGO
    switch($action){
      case 'upload-avatar':
         // <--
         $tsUpload->image_scale = true;
         $tsUpload->image_size['w'] = 640;
         $tsUpload->image_size['h'] = 480;
         //
         $tsUpload->file_url = $_POST['url'];
         //
         $result = $tsUpload->newUpload(3);
         echo json_encode($result);
         // -->
      break;
      case 'upload-crop':
         // <--
         echo json_encode($tsUpload->cropAvatar($tsUser->uid));
            // PARA EL PERFIL
            db_exec(array(__FILE__, __LINE__), 'query', 'UPDATE u_perfil SET p_avatar = 1 WHERE user_id = ' . $tsUser->uid);
          // -->
      break;
        case 'upload-images':
         echo json_encode($tsUpload->newUpload(1));
        break;
    } 

Eso es todo...