Estou utilizando o plugin jquery.filer para enviar arquivos anexar arquivos no meu formuláro.
Escolhi esse por ter sido um plugin que consegui manipulá-lo para enviar os dados dos outros inputs juntamente com os arquivos e evitar pastas temporárias.
Funciona bem com arquivos "pequenos", mas dá falha ao enviar arquivos ligeiramente "grandes", exemplo, um de 250MB.
Failed to load resource: the server responded with a status of 404 (Not Found)
Não sei se pode ser o tipo do arquivo, no momento, estou testando com um GDB (arquivo de banco de dados do Firebird).
Claro que coloquei um breakpoint logo na primeira linha para verificar se era algum tipo de erro no método (a action) que recebe o POST, mas não chegou nele, ou seja, a action não chegou a ser executada.
Configuração do plugin:
$atendimentoForm.find("#Arquivos").filer({
limit: null,
maxSize: "102400",
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Arraste e o solte os arquivos aqui para enviá-los</h3> <span style="display:inline-block; margin: 15px 0">ou</span></div><a class="jFiler-input-choose-btn blue">Clique aqui para selecioná-los</a></div></div>',
showThumbs: true,
appendTo: null,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-item-list"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppendToEnd: false,
removeConfirmation: false,
_selectors: {
list: '.jFiler-item-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action',
}
},
addMore: true,
clipBoardPaste: true,
excludeName: null,
beforeShow: function () { return true },
onSelect: function () { },
afterShow: function () { },
onRemove: function () { },
onEmpty: function () { },
captions: {
button: "Escolher os Arquivos",
feedback: "Escolha os arquivos que deseja enviar",
feedback2: "Arquivos selecionados",
drop: "Arraste os arquivos aqui para enviar",
removeConfirmation: "Você tem certeza que deseja remover esse arquivo?",
errors: {
filesLimit: "Somente {{fi-limit}} arquivos podem ser enviados.",
filesType: "Tipo de arquivo não permitido.",
filesSize: "{{fi-name}} é muito grande! Por favor, escolha arquivos com menos de {{fi-maxSize}} GB.",
filesSizeAll: "Todos os arquivos juntos são muito grandes! Por favor, escolha um total de até {{fi-maxSize}} MB."
}
}
});
Configuração de envio:
$atendimentoForm.submit(function (event) {
event.preventDefault();
event.stopPropagation();
var $progress = $atendimentoForm.find(".progress .progress-bar");
$progress.closest(".form-group").css("display", "block");
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$progress.width(percentComplete + "%").text(percentComplete + "%");
if (percentComplete === 100) { $progress.width("100%").text("100%"); }
}
}, false);
return xhr;
},
url: "/Atendimentos/Create",
type: "POST",
data: new FormData(this),
processData: false,
contentType: false,
success: function (response) {
$progress.closest(".form-group").hide();
if (response.result) {
showMessage("Atenção", "Atendimento inserido com sucesso!", "success", function (option) {
location.href = "/Atendimentos/Edit/" + response.atendimentoId;
});
} else if (response.errors) {
showMessage("Atenção", "Não foi possível incluir o Atendimento!\n\n" + response.errors, "error");
} else {
showMessage("Atenção", "Não foi possível incluir o Atendimento!", "error");
}
}
});
});
Com esse carinha: data: new FormData(this),
eu envio Descricao, Data, Usuários
e todos os outros campos do formulário juntamente em um request
apenas.
Alguém sabe dizer se é do plugin ou do ASP.NET [MVC]?
Qual outro que não dá esse tipo de problema e permite upload de arquivos simultâneos e envio dos dados do formulário juntamente com os input[type=file]
?
EDIT
Esse foi um detalhe que esqueci de incluir:
<system.web>
<authentication mode="None" />
<globalization culture="pt-BR" uiCulture="pt-BR"
enableClientBasedCulture="true" requestEncoding="UTF-8"
responseEncoding="UTF-8" fileEncoding="UTF-8" />
<compilation debug="true" targetFramework="4.6" />
<httpRuntime targetFramework="4.6" maxRequestLength="4096000"
requestLengthDiskThreshold="4096000"/>
</system.web>