file upload to an specific url/address

[toms]

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', '');
        }
    });
}

[omid020]

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?

[toms]

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();
                            }

[omid020]

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?

[toms]

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

[omid020]

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();
                            }

     });

[toms]

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

before.png

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

after.png

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();

[omid020]

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:

and it seems process_file field does not receive any value through process form.

[toms]

Can you post your entire JavaScript code?

[omid020]

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();
                            }

     });