Ajax Save function that works for general form submissions (even image uploads)

ajax-save.js

function ajaxSave(method, url, formId, callback) {
  
  // Form data...well...it's our form data 🤷🏼‍♂️
  let formData = new FormData(document.getElementById(formId));
  
  // Instantiate the XMLHttpRequest object and open it
  let ajax     = new XMLHttpRequest();
  
  // @method = POST/GET; @url = 🌐; @async = true/false
  ajax.open(method, url, true);
  
  // This is particullary needed for Laravel apps. 
  // Otherwise it will point the request to the API routes, and return 302 errors
  // 🇧🇷Esse cabeçalho é importante para apps Laravel. 
  // Sem isso, o Laravel irá redirecionar a chamada para as rotas de API, e retornará erros 302
  ajax.setRequestHeader('Accept', 'application/json');
  
  // Laravel specific
  ajax.setRequestHeader('X-CSRF-Token', document.querySelector('meta[name=csrf-token]').getAttribute('content'));
  
  // We expect JSON responses
  ajax.responseType = 'json';
  
  // This is executed when the servers RETURNS a response (BAD or NOT). You could also do something like:
  // ajax.addEventListener("load", yourFunction);
  // 🇧🇷Esse método é executado quando o servidor da uma resposta (boa ou rium). Você também poderia fazer assim:
  // ajax.addEventListener("load", yourFunction);
  ajax.onload = function () {
    
    // This is a custom function to change my submit button icon & enable it for clicking
    // 🇧🇷É uma função que uso para voltar o botão de envio ao estado "normal" (com o ícone original e habilitado para cliques)
    unsetButtonLoadingState(formId);
    
    // So, if we got a success status (you could also check the ajax.statusText)
    if (ajax.status === 200) {
          
          // Get the response in JSON object format. We will get data like {'alert_type':'success','message':'blah',...}
          // 🇧🇷Obteremos os dados em um objeto JSON {'alert_type':'success','message':'blah',...}
          let data = ajax.response;
          
          // Execute an eventual callback on success (optional & passed as a 4th param in our function)
          // 🇧🇷 Executa uma função específica caso necessário (opcional e pode ser passada como 4o parâmetro na nossa função)
          if (callback) callback(data);
            
          /*
          * Sometimes we need to reload the caller page
          * 🇧🇷As vezes precisamos recarregar a página de origem da chamada
          * Alert component: Sweet Alert
          */
          if (data.reload === true) {
                swal({
                    title            : "",
                    type             : data.alert_type,
                    html             : data.message,
                    showCloseButton  : false,
                    showCancelButton : false,
                    confirmButtonText: 'OK'
                }).then(function () {
                    if (data.reload_url) {
                        location.replace(data.reload_url);
                    } else {
                        location.reload();
                    }
                });
            } else {
              // If we don't need a reload, just pop a notification
              // Se não precisamos recarregar a página, apenas mostra uma notificação
              // Notification component: Bootstrap Notify
              notify('', data.message, '100000', data.alert_type, 'bottom', 'left');
            }
        } else {
          // Parse the custom error return
          // 🇧🇷Verifica os erros personalizados que o app retornou
          // Format: {'error':'exception message'}
          let error = JSON.parse(JSON.stringify(ajax.response.error));
          error = (error.length === 0) ? "Erro não identificado. Entre em contato com o responsável pelo sistema." : error;
          swal("Erro(s) encontrado(s):", error, "error");
        }
    };
  
  // 🙌
  ajax.send(formData);
  
  // Custom function to show a loading status and lock the submit button (disable it)
  // 🇧🇷Função personalizada para mostrar um status de carregamento no botão de envio e desabilitá-lo para cliques
  setButtonLoadingState(formId);
}