File upload on grid subform

Questions related to using nuBuilder Forte.

File upload on grid subform

Postby saimir » Thu May 23, 2019 6:29 am

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 viewtopic.php?f=19&t=9475&hilit=upload&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[i];
//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>
saimir
 
Posts: 3
Joined: Thu May 23, 2019 6:18 am

Re: File upload on grid subform

Postby Janusz » Sat May 25, 2019 6:42 pm

Hi,
Maybe to give you at least some clue how to approach - as I am not so much deeply experienced with the case you are descirbing and not using such option from subform - so:

when you are on the subform try to refer to the fields with nuSubform... functions.
https://wiki.nubuilder.net/nubuilderfor ... Javascript

In my case I use files download with code from the following example (from mobile it starts camera, from PC you can upload files):
https://www.codepool.biz/take-a-photo-a ... html5.html

and with extended possibility to link any number of files to one record with additional description if needed.
so added some code which adds uploaded files/photos to a separate table and later I can easilly link that table with any other data.
Code: Select all
     
......
function uploadComplete(evt) {

        /* This event is raised when the server send back a response */

var par=$('#par_sample_id_number').val();
var req=$('#par_req_nr').val();
var fot=$('#pic_cam1').val();
var memo=$('#pic_memo1').val();
var kto=getUser();


var q = "INSERT INTO fotos (fot_part_nr,fot_picture,fot_req_nr,fot_memo,fot_created_by) VALUES ('"+ par +"','"+ fot +"','"+ req +"','"+ memo +"','"+ kto +"')";
nuSetProperty('INSERT_INTO_FOTOS', q);
nuRunPHPHidden('INSERT_INTO_FOTOS', 1);
      }
.....

and delete can be done with php Before Delete
Code: Select all
$f=nuHash();
$f=$f['fot_picture'];
$f="./uploads/".$f;

if (file_exists($f)) {
        unlink($f);
    } else {
        // File not found.
    }

To summarise: all files in my case are placed in one folder on the server with unique names and these names are added to the specific table where I have a link between the file name and part id.

On the form I am not placing the link (beacause can be plenty of them) but just a button which opens another form with the complete list of photos assigned to a specific record.

So not exactly the same case you are referning but maybe can be helpfull.
Janusz
 
Posts: 175
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland

Re: File upload on grid subform

Postby saimir » Sun Jun 23, 2019 7:14 am

Thank you Janusz for the reply.
i tried but i didn't get it work.
Creating another table makes it more difficult to me and ads further steps to the procedure.
I just would like to have the possibility to use an upload button on each row of a grid subform and at the moment the script only works on the edit form (just one record).
Maybe it would work if the javascript had some code that tells to be run only on that row of the subform and loop, but i can't find such string on the subform functions.
Does anybody know a way for doing this?
Thanks
saimir
 
Posts: 3
Joined: Thu May 23, 2019 6:18 am

Re: File upload on grid subform

Postby admin » Sun Jun 23, 2019 8:12 am

samir,

I have it working.

The Input:File Object should be all you need to populate the hidden textarea. (it populates the hidden fieldname with a JSON string that will be saved.

Even though once it is saved it says No file chosen.

eg.

ca1.JPG
ca1.JPG (60.04 KiB) Viewed 135 times


Steven
admin
Site Admin
 
Posts: 3079
Joined: Mon Jun 15, 2009 9:53 am

Re: File upload on grid subform

Postby saimir » Mon Jun 24, 2019 5:57 am

Thank you Steven for the reply,
i see you are using the default file field and i am using an upload file to server script that needs just to write the file name on a field.
As i can see even your solution seems to have problems since the description is not on the DB.
I tried to create another edit form with only the upload part for that record and still didn't get it work.
The main subform is like this:
pic1.jpg
pic1.jpg (53.55 KiB) Viewed 132 times


The upload only subform that refers to the same table is:
only upload form.jpg
only upload form.jpg (9.18 KiB) Viewed 132 times


The settings of the button thet calls the upload form is:
run form.jpg
run form.jpg (45.19 KiB) Viewed 132 times


The problem is that the button only calls the first record if i filter with #RECORD_ID#, it's obvious that for the subform row i need smth like #subform_record_id#... do you know any filter that can tell the script the id of the current subform istance (row in grid mode)?
Thank you very much
saimir
 
Posts: 3
Joined: Thu May 23, 2019 6:18 am

Re: File upload on grid subform

Postby Janusz » Mon Jun 24, 2019 2:52 pm

Hi,
for the subforms please find enclosed short example - how to idenify the raws in the subform.
maybe it can help somehow

Every raw in the subform is linked to mysql table and has an ID from the table
and has let's call it subf_raw on the form.

So starting with short example - I will place following code in the button (assigned to every raw on the subform)
Code: Select all
var a=nuSubformValue(this, 'his_data');
var b=nuSubformRowId(this);
var c = subf_raw('kon_historia_subform', 'Historia_id','his_opis',b); 
alert('subf date field: '+a+';  rowID of the DB table: '+b+';  subform raw ID:  '+c);

where:
a - value of the current field named 'his_data' - in the actual subform raw - just to read the value
b- mysql ID record # (I use INT instead of typical notation as ex. "5a3e518de1c9d39")
c - subform raw, where: 'kon_historia_subform' is a subform name; 'Historia_id' to identify/search actual raw; and 'his_opis' - to show later how to change field value.
and belowe the function on the main JS custome code (it's a main form not subform).
(I am reading the mysql ID id_nr, and later searching in the subform the raw which is matching that value in field_1, and if found setting some text on field_2)
Code: Select all
function subf_raw(subform, field_1, field_2,id_nr) {
    var sf = nuSubformObject(subform);
    var c = sf.fields.indexOf(field_1);
        for(var r = 0; r < sf.rows.length; r++) {   
        if (sf.rows[r][c] == id_nr) {         
$('#' + subform + nuPad3(r) + field_2).val('test on subform');
        return r;
        }
    }   
}

and short movie how it works:
https://drive.google.com/open?id=1mnd2w ... lIGHS1PCIh
it's just a quick ad hoc example - so in you case you need to modify it appropriatelly.
Janusz
 
Posts: 175
Joined: Fri Dec 28, 2018 10:11 pm
Location: Krakow, Poland

Re: File upload on grid subform

Postby admin » Sun Jul 07, 2019 8:07 am

samiar,

You will probably need to loop through the subform's Object using nuSubformObject() in PHP After Save and add your files that way.

nuSubformObject() is also a Javascript function...

nuSubformObject.JPG
nuSubformObject.JPG (68.88 KiB) Viewed 61 times



Steven
admin
Site Admin
 
Posts: 3079
Joined: Mon Jun 15, 2009 9:53 am


Return to General