problem in resize.js function

Question

I’m having a problem not being able to send the original name of my images for the database it is stopping in my function reside.js more precisely where is this stretch _this.output(canvas, outputType, callback); and this part callback(canvas.toDataURL('image/jpeg', 0.8)); someone could help me?

html code

<form method="post" action="#" role="form">
    <div>
        <input type="text" id="nn" name="nome" placeholder="nome">
    </div><br>
        <div class="progress">
            <div id="progresso" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
                 aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
        </div>

        <div class="form-group row">

            <div class="col-xs-12">
                <input id="imagem" type="file" name="file" accept="image/*" multiple/>
            </div>
        </div>

    </form>

jquery code

// Iniciando biblioteca
        var resize = new window.resize();
        resize.init();

        // Declarando variáveis
        var imagens;
        var imagem_atual;

        // Quando carregado a página
        $(function ($) {


            // Quando selecionado as imagens
            $('#imagem').on('change', function () {

                var nommes = [].map.call(this.files, function(f){ return f.name; });
                enviar();
            });

        });

        /*
         Envia os arquivos selecionados
         */
        function enviar()
        {
            // Verificando se o navegador tem suporte aos recursos para redimensionamento
            if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
                alert('O navegador não suporta os recursos utilizados pelo aplicativo');
                return;
            }

            // Alocando imagens selecionadas
            imagens = $('#imagem')[0].files;


            // Se selecionado pelo menos uma imagem
            if (imagens.length > 0)
            {
                // Definindo progresso de carregamento
                $('#progresso').attr('aria-valuenow', 0).css('width', '0%');

                // Escondendo campo de imagem
                $('#imagem').hide();

                // Iniciando redimensionamento
                imagem_atual = 0;
                redimensionar();
            }
        }

        /*
         Redimensiona uma imagem e passa para a próxima recursivamente
         */
        function redimensionar()
        {
            // Se redimensionado todas as imagens
            if (imagem_atual > imagens.length)
            {
                // Definindo progresso de finalizado
                $('#progresso').html('Imagen(s) enviada(s) com sucesso');

                // Limpando imagens
                limpar();

                // Exibindo campo de imagem
                $('#imagem').show();

                // Finalizando
                return;
            }

            // Se não for um arquivo válido
            if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null))
            {
                // Passa para a próxima imagem
                imagem_atual++;
                redimensionar();
                return;
            }

            // Redimensionando
            resize.photo(imagens[imagem_atual], 300, 'dataURL', function (imagem) {

                // Salvando imagem no servidor
                $.post('ajax/salvar.php', {imagem: imagem, 'nome': nommes}, function() {

                    // Definindo porcentagem
                    var porcentagem = (imagem_atual + 1) / imagens.length * 100;

                    // Atualizando barra de progresso
                    $('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%');

                    // Aplica delay de 1 segundo
                    // Apenas para evitar sobrecarga de requisições
                    // e ficar visualmente melhor o progresso
                    setTimeout(function () {
                        // Passa para a próxima imagem
                        imagem_atual++;
                        redimensionar();
                    }, 1000);

                });

            });
        }

        /*
         Limpa os arquivos selecionados
         */
        function limpar()
        {
            var input = $("#imagem");
            input.replaceWith(input.val('').clone(true));
        }

resize.js function code

window.resize = (function () {

    'use strict';

    function Resize() {
        //
    }

    Resize.prototype = {

        init: function(outputQuality) {
            this.outputQuality = (outputQuality === 'undefined' ? 0.8 : outputQuality);
        },

        photo: function(file, maxSize, outputType, callback) {

            var _this = this;

            var reader = new FileReader();
            reader.onload = function (readerEvent) {
                _this.resize(readerEvent.target.result, maxSize, outputType, callback);
            }
            reader.readAsDataURL(file);

        },

        resize: function(dataURL, maxSize, outputType, callback) {

            var _this = this;

            var image = new Image();
            image.onload = function (imageEvent) {

                // Resize image
                var canvas = document.createElement('canvas'),
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > maxSize) {
                        height *= maxSize / width;
                        width = maxSize;
                    }
                } else {
                    if (height > maxSize) {
                        width *= maxSize / height;
                        height = maxSize;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);

                _this.output(canvas, outputType, callback);

            }
            image.src = dataURL;

        },

        output: function(canvas, outputType, callback) {

            switch (outputType) {

                case 'file':
                    canvas.toBlob(function (blob) {
                        callback(blob);
                    }, 'image/jpeg', 0.8);
                    break;

                case 'dataURL':
                    callback(canvas.toDataURL('image/jpeg', 0.8));
                    break;

            }

        }

    };

    return Resize;

}());

Answer 1

I think the part of the error that answers your question you didn’t get to post:

And that’s because it’s set locally in a function:

// Quando selecionado as imagens
$('#imagem').on('change', function () {
    var nommes = [].map.call(this.files, function(f){ return f.name; });
    enviar();
});

Moving it to the place where you declared other variables:

// Declarando variáveis
var imagens;
var imagem_atual;
var nommes; // deixe ela aqui!

Makes your code work normally: