I'm using the jquery.filer plugin to send files to attach files to my form.
I chose this because it was a plugin that I was able to manipulate it to send the data of the other inputs along with the files and to avoid temporary folders.
Works well with "small" files, but fails to send slightly "large" files, eg a 250MB .
Failed to load resource: the server responded with a status of 404 (Not Found)
I do not know if it can be the type of the file, at the moment, I am testing with a GDB (Firebird database file).
Of course, I put a breakpoint on the first line to check if it was some kind of error in the method that gets POST but did not get it, that is, the action was not executed.
PluginConfiguration:
$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."
}
}
});
Shipping Setup:
$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");
}
}
});
});
With this little face: data: new FormData(this), I send Descricao, Data, Usuários and all other fields of the form together in a request only.
Does anyone know if it's plugin or ASP.NET [MVC]?
What other that does not give this type of problem and allows simultaneous upload and submission of form data along with input[type=file] ?
EDIT
This was a detail I forgot to include:
<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>