File upload on grid subform
Posted: Wed May 22, 2019 10:59 pm
Hello all of you and thank you for the grat work you are doing.
I'm new on nuBuilder and am trying to build a form thet contains different subforms.
One of the subforms (grid mode) has an upload to server (with scripts from https://forums.nubuilder.cloud/viewtopic. ... d&start=20 )
When i use the browse mode of the subform the download link shows ok, when i use the form in edit mode (single record) it works fine, but when this form becomes a subform in grid mode tha upload file seems to upload the file on the first record of the subform and doesn't upload at all on other rows/records , but in both cases it does not change the value of the "process_file" field that is needed to store file name on the db.
I supose this happens because of the structure of subforms which is different than browse or edit form.
Can you please help me.
here is the html (i think it's the problem) i'm using:
I'm new on nuBuilder and am trying to build a form thet contains different subforms.
One of the subforms (grid mode) has an upload to server (with scripts from https://forums.nubuilder.cloud/viewtopic. ... d&start=20 )
When i use the browse mode of the subform the download link shows ok, when i use the form in edit mode (single record) it works fine, but when this form becomes a subform in grid mode tha upload file seems to upload the file on the first record of the subform and doesn't upload at all on other rows/records , but in both cases it does not change the value of the "process_file" field that is needed to store file name on the db.
I supose this happens because of the structure of subforms which is different than browse or edit form.
Can you please help me.
here is the html (i think it's the problem) i'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
function TransferCompleteCallback(content){
// we might want to use the transferred content directly
// for example to render an uploaded image
}
$( document ).ready(function() {
var input = document.getElementById('input_files');
var formdata = false;
if (window.FormData) {
formdata = new FormData();
$("#btn_submit").hide();
$("#loading_spinner").hide();
}
$('#input_files').on('change',function(event){
var i = 0, len = this.files.length, img, reader, file;
//console.log('Number of files to upload: '+len);
$('#result').html('');
$('#input_files').prop('disabled',true);
$("#loading_spinner").show();
for ( ; i < len; i++ ) {
file = this.files;
//console.log(file);
if(!!file.name.match(/.*\.pdf$/ || /.*\.PDF$/)){
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
TransferCompleteCallback(e.target.result);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("files[]", file);
}
} else {
$("#loading_spinner").hide();
$('#input_files').val('').prop('disabled',false);
alert(file.name+' is not a PDF');
}
}
if (formdata) {
$.ajax({
url: "./process_files.php",
type: "POST",
data: formdata,
processData: false,
contentType: false, // this is important!!!
success: function (res) {
var result = JSON.parse(res);
$("#loading_spinner").hide();
$('#input_files').val('').prop('disabled',false);
if(result.res === true){
var buf = '<ul class="list-group">';
buf+='<li class="list-group-item">'+result.data[0]+'</li>';
$('#process_file').val(result.data[0]).change(); // add to field - just 1 file
$('#result').html('<strong>File uploaded:</strong>'+buf);
} else {
$('#result').html(result.data);
}
// reset formdata
formdata = false;
formdata = new FormData();
},
error: function(jqXHR, textStatus, errorThrown) {
alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
},
});
}
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel panel-default">
<div class="panel-body">
<form method="post" enctype="multipart/form-data" action="./process_files.php">
<input type="file" name="files[]" id="input_files" multiple />
<button type="submit" id="btn_submit" class="form-control">Carica</button>
</form>
<div id="loading_spinner"><i class="fa fa-spinner fa-pulse"></i> Uploading</div>
<div id="result" style="float: left;"></div>
</div>
</div>
</div>
</div>
</body>
</html>