Campo input file separado do "multiple file upload" dando prob

[Maykel-ctba 233]

Fala galera!

 

Tenho em meu sistema, uma página de cadastro usando o jQuery File Upload.

Porém, surgiu a necessidade da inserção de mais um campo de file upload separado (já que o multiple é restrito a imagens) para arquivos PDF, file input comum, sem necessidade de ser múltiplo.

 

Porém, toda vez que seleciono um arquivo (flArquivo), o script múltiplo é acionado (tenta inserir o arquivo que selecionei no campo novo).

 

Como posso "isolar" um do outro?

 

Form:

<form class="form-horizontal validar fileupload" action="?action=cadastrar&submit=true" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-sm-2 control-label">Arquivo para download</label>
        <div class="col-sm-10">
            <input name="flArquivo" type="file" class="filestyle" data-icon="false" data-classbutton="btn btn-default" data-classinput="form-control inline v-middle input-s" />
            
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Upload de imagens</label>
        <div class="col-sm-10">
            <div id="upload-multiplo">
                <div class="row fileupload-buttonbar">
                    <div class="col-lg-7">
                        <span class="btn btn-success fileinput-button">
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>Adicionar...</span>
                            <input type="file" name="files[]" multiple>
                        </span>
                        <span class="fileupload-process"></span>
                    </div>
                    <div class="col-lg-5 fileupload-progress fade">
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                        </div>
                        <div class="progress-extended"> </div>
                    </div>
                </div>
                <table role="presentation" class="table table-striped sortable">
                    <thead>
                        <tr>
                            <th>Imagem</th>
                            <th>Legenda</th>
                            <th>Área de corte</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody class="files"></tbody>
                </table>
                <script id="template-upload" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { %}
                        <tr class="template-upload fade">
                            <td>
                                <span class="preview"></span>
                            </td>
                            <td>
                                <p class="name">{%=file.name%}</p>
                                <strong class="error text-danger"></strong>
                            </td>
                            <td>
                                <p class="size">Processando...</p>
                                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                            </td>
                            <td>
                                {% if (!i && !o.options.autoUpload) { %}
                                    <button class="btn btn-primary start" disabled>
                                        <i class="icon-plus-sign"></i>
                                        <span>Iniciar</span>
                                    </button>
                                {% } %}
                                {% if (!i) { %}
                                    <button class="btn btn-warning cancel">
                                        <i class="icon-ban-circle"></i>
                                        <span>Cancelar</span>
                                    </button>
                                {% } %}
                            </td>
                        </tr>
                    {% } %}
                </script>
                <script id="template-download" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { %}
                        <tr class="template-download fade">
                            <td style="display:none;">
                                <input type="checkbox" checked name="cbImagem[]" value="{%=file.name%}" />
                                <input type="hidden" name="hdOrdem[]" value="{%=file.ordem%}" />
                            </td>
                            <td width="8%">
                                <span class="preview">
                                    {% if (file.thumbnailUrl) { %}
                                        <a class="fancybox" rel="gallery1" href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                                    {% } %}
                                </span>
                            </td>
                            <td width="52%">
                                <input type="text" placeholder="Digite uma legenda" class="form-control" name="txLegenda[]" value="{%=file.legenda%}" />
                            </td>
                            <td width="32%">
                                {% if (file.crop) { %}
                                    <input type="hidden" class="hdCrop" value="{%=file.crop%}" />
                                {% } %}
                                <select name="slCrop[]" style="width:100%" class="form-control">
                                    <option value="top-left">top-left</option><option value="top">top</option><option value="top-right">top-right</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="bottom-left">bottom-left</option><option value="bottom">bottom</option><option value="bottom-right">bottom-right</option>
                                </select>
                                {% if (file.error) { %}
                                    <div><span class="label label-danger">Erro</span> {%=file.error%}</div>
                                {% } %}
                            </td>
                            <td width="8%">
                                {% if (file.deleteUrl) { %}
                                    <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                                        <i class="icon-trash"></i>
                                        <span>Remover</span>
                                    </button>
                                {% } else { %}
                                    <button class="btn btn-warning cancel">
                                        <i class="glyphicon glyphicon-ban-circle"></i>
                                        <span>Cancelar</span>
                                    </button>
                                {% } %}
                            </td>
                        </tr>
                    {% } %}
                </script>
            </div>										
        </div>
    </div>
    <div class="line line-dashed b-b line-lg pull-in"></div>
    <div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
            <button class="btn btn-primary" type="submit">Gravar</button>
        </div>
    </div>
</form>

Javascript:

// * Multiple upload
if($('.fileupload').exists())
{
	$('.fileupload').fileupload({
		url: '/common/lib/multiple-upload/',
		autoUpload: true
	});
	$(".sortable tbody").sortable({
		update: function(){
			var itens = $(this).sortable("toArray");
		}
	});
}

[Snowden 94]

acredito que usando ID conseguirá obter o resultado esperado

$('#arquivos').fileupload({..

$('#imagens').fileupload({..

[Maykel-ctba 233]

Oi @Hugo,

 

Mas esse ID não precisa ser do formulário?

O formulário tem a classe alí especificada. Se eu mudar, não vai dar na mesma, já que tanto o script de upload múltiplo quanto o input simples estão no mesmo form?

[Snowden 94]

atribua o ID no input file não no form

[Maykel-ctba 233]

Até onde sei, @hugo, ao menos seguindo o tutorial, não posso mexer no input original (detalhe: o input tem name="files[]")

 

Será que se eu colocar o .fileupload numa div em volta apenas do script, funcionará?

[Snowden 94]

veja o exemplo da API: https://github.com/blueimp/jQuery-File-Upload/wiki/API#data-attributes

[Maykel-ctba 233]

Hummmmmm!!!! Yummy!

 

Vou testar aqui!

[Maykel-ctba 233]

Valeu @Hugo, essa leitura me abriu a mente ;-)