file upload to an specific url/address

Questions related to using nuBuilder Forte.

Re: file upload to an specific url/address

Postby toms » Tue Apr 24, 2018 3:51 am

Create e.g. a varchar(1000) field. Then create a html object that displays a link to your file on the server
<a href="path_to_server/#myfilename#" download="path_to_server/#myfilename#">Download</a>

In the Browse Form, you can transform the file to a download link with js:

Code: Select all
if (nuFormType() == 'browse') {
    $('[data-nu-column="2"]').each(function (index) { // change: file is in this column
        var cellId = $(this).attr('id');
        var cellValue = $('#' + cellId).html();
        if (cellValue != '') {
           var filePath = "https://path_to_server/" + cellValue; // change: path to the file         
         $('#' + cellId).html('<a href="'+filePath+'" download>Download</a>');
         $(this).attr('onclick', '');
        }
    });
}
toms
 

Re: file upload to an specific url/address

Postby omid020 » Tue Apr 24, 2018 7:49 pm

Thank you!
It seems everything works nice just I don't know how load file name into download (file name) column;

Where should I use this code? :

Code: Select all
success: function (res) {
         ....
   if(result.res === true){
      ...
$('#myfilename').val(result.data[0]).change();
...
}


And what do those dots do in the code?
omid020
 
Posts: 21
Joined: Mon Apr 16, 2018 4:42 pm

Re: file upload to an specific url/address

Postby toms » Tue Apr 24, 2018 10:46 pm

The dots were just to indicate where to add the line of code.

My success part look something like this. I simplified it because I allow just one file to be uploaded.

Replace #filename with your fieldname.

Code: Select all
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>';
                                    $('#filename').val(result.data[0]).change();
                                    $('#result').html('<strong>File uploaded:</strong>'+buf);
                                } else {
                                    $('#result').html(result.data);
                                }
                                // reset formdata
                                formdata = false;
                                formdata = new FormData();
                            }
toms
 

Re: file upload to an specific url/address

Postby omid020 » Wed Apr 25, 2018 12:33 pm

I tried to merge above code with previous code of process_file.php but it seems there is an error on first line of this code ( or line 26 of below code):
Code: Select all
<?php
// here we should add all validity checks on $_GET and $_POST
// before processing the files
$res = array();
foreach ($_FILES["files"]["error"] as $key => $error)
{
    if ($error == UPLOAD_ERR_OK)
    {
        $name = $_FILES["files"]["name"][$key];
        if(file_exists('uploads/'.$name))
        {
            unlink('uploads/'.$name);
        }
        move_uploaded_file( $_FILES["files"]["tmp_name"][$key], "uploads/" . $name);
        $res[] = $name;
    }
    else
    {
        echo json_encode(array('res'=>FALSE,'data'=>'Error uploading '.$name));
        exit(1);
    }
}
echo json_encode(array('res'=>TRUE,'data'=>$res));
exit(0);

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>';
                                        $('file_name').val(result.data[0]).change();
                                        $('#result').html('<strong>File uploaded:</strong>'+buf);
                                    } else {
                                        $('#result').html(result.data);
                                    }
                                    // reset formdata
                                    formdata = false;
                                    formdata = new FormData();
                        }


Did I use code in right place?
omid020
 
Posts: 21
Joined: Mon Apr 16, 2018 4:42 pm

Re: file upload to an specific url/address

Postby toms » Wed Apr 25, 2018 2:24 pm

It's goes in the javascript code. There's already a success function. Just replace that existing one.
toms
 

Re: file upload to an specific url/address

Postby omid020 » Wed Apr 25, 2018 5:14 pm

toms wrote:It's goes in the javascript code. There's already a success function. Just replace that existing one.


I placed this code in JavaScript box of Custom Code but still return nothing as file name in browsed form.
This is whole scripts of form:
Code: Select all
$('#process_product_id').find('option[value=""]').remove();

if (nuFormType() == 'browse') {
    $('[data-nu-column="4"]').each(function (index) { // change: file is in this column
        var cellId = $(this).attr('id');
        var cellValue = $('#' + cellId).html();
        if (cellValue != '') {
           var filePath = "https://otoraby.com/pk/uploads/" + cellValue; // change: path to the file         
         $('#' + cellId).html('<a href="'+filePath+'" download>Download</a>');
         $(this).attr('onclick', '');
        }
    });
}


$.ajax({

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();
                                    $('#result').html('<strong>File uploaded:</strong>'+buf);
                                } else {
                                    $('#result').html(result.data);
                                }
                                // reset formdata
                                formdata = false;
                                formdata = new FormData();
                            }

     });
omid020
 
Posts: 21
Joined: Mon Apr 16, 2018 4:42 pm

Re: file upload to an specific url/address

Postby toms » Wed Apr 25, 2018 5:46 pm

Your browse should look like this without the code (with the file name in one column)

before.png
before.png (6.57 KiB) Viewed 1186 times


After adding the code, the filename is transformed into a download href link.

after.png
after.png (5.88 KiB) Viewed 1186 times



I noticed that you are missing a # :

Instead of
Code: Select all
$('process_file').val(result.data[0]).change();


Write:
Code: Select all
$('#process_file').val(result.data[0]).change();
toms
 

Re: file upload to an specific url/address

Postby omid020 » Wed Apr 25, 2018 6:59 pm

I have modified # in code but no difference!

I have a field (process_file) which should obtain file name as string but after uloading file or saving process form which handle uploading operation, no value adds to process_file field.
Now when I manually give a value to process_file field via phpMyAdmin the output is exactly similar to your table:
Image
and it seems process_file field does not receive any value through process form.
omid020
 
Posts: 21
Joined: Mon Apr 16, 2018 4:42 pm

Re: file upload to an specific url/address

Postby toms » Wed Apr 25, 2018 7:26 pm

Can you post your entire javascript code?
toms
 

Re: file upload to an specific url/address

Postby omid020 » Wed Apr 25, 2018 8:43 pm

toms wrote:Can you post your entire javascript code?

Code: Select all
$('#process_product_id').find('option[value=""]').remove();

if (nuFormType() == 'browse') {
    $('[data-nu-column="4"]').each(function (index) { // change: file is in this column
        var cellId = $(this).attr('id');
        var cellValue = $('#' + cellId).html();
        if (cellValue != '') {
           var filePath = "https://otoraby.com/pk/uploads/" + cellValue; // change: path to the file         
         $('#' + cellId).html('<a href="'+filePath+'" download>Download</a>');
         $(this).attr('onclick', '');
        }
    });
}


$.ajax({

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();
                                    $('#result').html('<strong>File uploaded:</strong>'+buf);
                                } else {
                                    $('#result').html(result.data);
                                }
                                // reset formdata
                                formdata = false;
                                formdata = new FormData();
                            }

     });
omid020
 
Posts: 21
Joined: Mon Apr 16, 2018 4:42 pm

PreviousNext

Return to General



cron