Parsley validation file image doesn't work

Question

I'm a few days to research some ways to make the image validation is done through a plugin parsley but is not working. I have followed this example https://jsfiddle.net/02vjbLrs/16 . It works everything but the image validation. Some help?

{!! Form::open(array('url' => 'backend/portfolio', 'id' => 'form', 'name' => 'InserirPortfolio', 'role' => 'form', 'files'=> true, 'class' => 'form-signin', 'data-validate' => 'parsley'))!!}

<div class="row" style="margin-bottom: 20px;">
    <div class="col-md-3 col-lg-3">
        {!! Form::label('titulo', 'Titulo', ['class' => 'label_perfil']) !!}
    </div>
    <div class="col-md-9 col-lg-9">
        {!! Form::text('titulo', null, [
            'class'                         => 'form-control input-md', 
            'placeholder'                   => 'Titulo', 
            'data-required'                 => 'true',
            'data-required-message'         => 'O campo Titulo é obrigatório',
            'pattern'                       => '^[A-Za-zãÃáÁàÀêÊéÉèÈíÍìÌôÔõÕóÓòÒúÚùÙûÛçÇ ]*$',
            'data-pattern-message'          => 'Só se aceita letras',
            'data-minlength'                => '3',
            'data-minlength-message'        => 'O titulo tem de ter 3 caracteres obrigatórios',
            'data-maxlength'                => '20',
            'data-maxlength-message'        => 'O titulo não pode conter mais de 20 caracteres',
            ]) 
         !!}
    </div>
</div>
<div class="row" style="margin-bottom: 20px;">
    <div class="col-md-3 col-lg-3">
        {!! Form::label('ano', 'Ano', ['class' => 'label_perfil']) !!}
    </div>
    <div class="col-md-9 col-lg-9">
        {!! Form::text('ano', null, [
            'class'                         => 'form-control input-md', 
            'placeholder'                   => 'Ano',
            'data-required'                 => 'true',
            'data-required-message'         => 'O campo Ano é obrigatório',                                     
            'pattern'                       => '^[0-9]{4}$',
            'pattern-message'               => 'Só se aceita números',
        ]) !!}
    </div>
</div>                          
<div class="row" style="margin-bottom: 20px;">
    <div class="col-md-3 col-lg-3">
        {!! Form::label('genero', 'Categoria', ['class' => 'label_perfil']) !!}
    </div>
    <div class="col-md-9 col-lg-9">
        {!! Form::select('genero', ['Design' => 'Design', 'Web Design' => 'Web Design', 'Audiovisual' => 'Audiovisual', 'Branding' => 'Branding'], null, [
            'class'                         => 'form-control input-md',
            'data-required'                 => 'true',
            'data-required-message'         => 'O campo Categoria é obrigatório',                                       
        ]) !!}
    </div>
</div>
<div class="row" style="margin-bottom: 20px;">
    <div class="col-md-3 col-lg-3">
        {!! Form::label('descricao', 'Descrição', ['class' => 'label_perfil']) !!}
    </div>
    <div class="col-md-9 col-lg-9">
        {!! Form::textarea('descricao', null, [
            'class'                         => 'form-control input-md', 
            'style'                         => 'height: 100px; resize: none;', 
            'placeholder'                   => 'Descrição',
            'data-required'                 => 'true',
            'data-required-message'         => 'O campo Descrição é obrigatório',                                           
            'pattern'                       => '^[0-9A-Za-zãÃáÁàÀêÊéÉèÈíÍìÌôÔõÕóÓòÒúÚùÙûÛçÇ. ]*$',
            'data-pattern-message'          => 'Está algo errado',
            'data-minlength'                => '10',
            'data-minlength-message'        => 'A descrição tem de ter 10 caracteres obrigatórios',
            'data-maxlength'                => '200',
            'data-maxlength-message'        => 'A descrição não pode conter mais de 200 caracteres',                                        

        ]) !!}
    </div>
</div>                          
<div class="row" style="margin-bottom: 20px;">
    <div class="col-md-3 col-lg-3">
        {!! Form::label('imagens', 'Imagem', ['class' => 'label_perfil']) !!}
    </div>
    <div class="col-md-9 col-lg-9">
        {!! Form::file('imagens[]',[
            'class'     =>      'input-file',
            'multiple' => true,
            'required' => 'required',
            'data-parsley-filemaxmegabytes' => '2',
            'data-parsley-trigger' => 'change',
            'data-parsley-filemimetypes' => 'image/jpeg, image/png'
        ]) !!}
    </div>
</div>   


</div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
    {!! Form::submit('Acrescentar portfolio', ['class' => 'btn btn-primary']) !!}
  </div>
{!! Form::close() !!}

<script type="text/javascript">
    var app = app || {};

    // Utils
    (function ($, app) {
        'use strict';

        app.utils = {};

        app.utils.formDataSuppoerted = (function () {
            return !!('FormData' in window);
        }());

    }(jQuery, app));

    // Parsley validators
    (function ($, app) {
        'use strict';

        window.Parsley
            .addValidator('filemaxmegabytes', {
                requirementType: 'string',
                validateString: function (value, requirement, parsleyInstance) {

                    if (!app.utils.formDataSuppoerted) {
                        return true;
                    }

                    var file = parsleyInstance.$element[0].files;
                    var maxBytes = requirement * 1048576;

                    if (file.length == 0) {
                        return true;
                    }

                    return file.length === 1 && file[0].size <= maxBytes;

                },
                messages: {
                    en: 'File is to big'
                }
            })
            .addValidator('filemimetypes', {
                requirementType: 'string',
                validateString: function (value, requirement, parsleyInstance) {

                    if (!app.utils.formDataSuppoerted) {
                        return true;
                    }

                    var file = parsleyInstance.$element[0].files;

                    if (file.length == 0) {
                        return true;
                    }

                    var allowedMimeTypes = requirement.replace(/\s/g, "").split(',');
                    return allowedMimeTypes.indexOf(file[0].type) !== -1;

                },
                messages: {
                    en: 'File mime type not allowed'
                }
            });

    }(jQuery, app));


    // Parsley Init
    (function ($, app) {
        'use strict';

        $('#form').parsley();

    }(jQuery, app));

</script>

Answer 1

Part of this problem may be w/ jsfiddle. I changed your parsley javascript to rc4, and added method='post' to your fiddle and got the same response as a parsley problem i had the other day...

Parsley form will not validate

I ended up putting it on codepen, and was able to work on it / fix it there...

I would have put this as a comment, but i don't have the points...