2
I’m using the plugin jquery.filer to send files to attach files in my form.
I chose this because it was a plugin that managed to manipulate it to send the data of the other inputs along with the files and avoid temporary folders.
Works well with "small files", but fails to send slightly "large" files, for example a 250MB.
Failed to load Resource: the server responded with a status of 404 (Not Found)
I don’t know if it can be the file type, at the moment I’m testing with a GDB (database file of the Firebird).
Of course I put a breakpoint right in the first line to check if it was some kind of error in the method (the action) that receives the POST, but did not reach it, that is, the action was not executed.
Plugin configuration:
$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."
}
}
});
Upload configuration:
$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 that little guy: data: new FormData(this), i send Descricao, Data, Usuários and all other form fields together in one request only.
Can anyone tell if it’s from the plugin or ASP.NET [MVC]?
Which one does not give this type of problem and allows simultaneous file uploading and sending the form data along with the input[type=file]?
EDIT
That 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>
solved with requestLimits maxAllowedContentLength, in system.webserver and security.
– JamesTK