Upload File - Subform - Download Link Breaks After Saving

[skyline101]

Hi

I have applied the code related to Uploading a File on a Subform from the 4.5 Code Library https://github.com/nuBuilder/nuBuilder- ... /README.md.

Everything works, the file uploads and the file name gets underlined and can be downloaded. The download link breaks and the underlining disappears as soon as the record on the Browse and Edit Form is saved. (see before and after saved pics). I applied the code as is and do not have any PHP Custom Code on BS or AS.

How can I restore the downloading capabilities or possibly add an Input button to allow the download of the pdf file?

These are the functions related to the pdf downloading

Code: Select all

function createDownloadLink(field, folder, fileId, fileName) {
    $('#' + field)
        .css({
            "text-decoration": "underline"
        })
        .css('cursor', 'pointer')
        .off('click')
        .attr({
            fileName: fileName,
            fileId: fileId,
            folder: folder
        })
        .attr('readonly', 'readonly')
        .click(function(event) {
            downloadFile($(this).attr('folder') + $(this).attr('fileid') + '_' + $(this).attr('fileName'), $(this).attr('fileName'));
        });
}
function addDownloadLinks(subform) {
  
    var sf = nuSubformObject(subform);

	var cName = sf.fields.indexOf(idFileName);
    var cId = sf.fields.indexOf(idFileId);

    for (var i = 0; i < sf.rows.length; i++) {

            var fileId = sf.rows[i][cId];
			var fileName = sf.rows[i][cName];

			if (fileName !== '') {
				createDownloadLink(idSubForm + nuPad3(i) + idFileName, uploadFolder, fileId, fileName);
			}
    }
}
function downloadFile(url, filename) {
    var a = document.createElement("a");
    a.href = url;
    a.setAttribute("download", filename);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

if(nuFormType() == 'edit') {
    addDownloadLinks(idSubForm);
} else
{
    
    if (typeof nuStopBrowserResize == 'function') { 
        nuStopBrowserResize();
    }
}

:

Thanks for any help you can provide.

[kev1n]

Does the variable idSubForm contain the ID of your subform?

Code: Select all

var idSubForm = 'your_subform_object_id_here';

[skyline101]

Hi Kevin

Yes, I did enter the subform's id and the other variables located at the top:

Code: Select all

var uploadFolder = 'libs/upload/documents/';
var idFileName = 'ilk_filesfile_name';
var idFileId = 'ilk_file_id';
var idSubForm = '60f9d5008b34ec0';

.

In fact, I also tried it out by leaving empty the var idSubForm = '';. The script allowed me to upload the file, right after I saved the record, the link became disable and it is not longer possible to click on the file's name to download. In other words, I obtained exactly the same result, as shown in my graphics, with or without the subform id.

[kev1n]

Is this really this ID you see here?

[skyline101]

Hi Kevin

I was using the subform ID.

I just tried the Object ID and I still get exactly the same result.

[kev1n]

Can you show your complete Custom Code and a screenshot of the subform object properties?

[skyline101]

Hi Kevin

The custom code for the main form is:

Code: Select all

// *****************************************

var uploadFolder = 'libs/upload/documents/';
var idFileName = 'ilk_filesfile_name';
var idFileId = 'ilk_file_id';
var idSubForm = 'isv_interfaces_sub';

// *****************************************

var idRowFileName;
var idRowFileId;

function uploadFile(event) {
    var td = $(event.target);
    var t = td.attr('data-nu-prefix');

    idRowFileName = t + idFileName;
    idRowFileId = t + idFileId;

    $("#fileToUpload").click();

}

function createDownloadLink(field, folder, fileId, fileName) {

    $('#' + field)
        .css({
            "text-decoration": "underline"
        })
        .css('cursor', 'pointer')
        .off('click')
        .attr({
            fileName: fileName,
            fileId: fileId,
            folder: folder
        })
        .attr('readonly', 'readonly')
        .click(function(event) {
            downloadFile($(this).attr('folder') + $(this).attr('fileid') + '_' + $(this).attr('fileName'), $(this).attr('fileName'));
        });
}


function addDownloadLinks(subform) {
   
    var sf = nuSubformObject(subform);

	var cName = sf.fields.indexOf(idFileName);
    var cId = sf.fields.indexOf(idFileId);

    for (var i = 0; i < sf.rows.length; i++) {

            var fileId = sf.rows[i][cId];
			var fileName = sf.rows[i][cName];

			if (fileName !== '') {
				createDownloadLink(idSubForm + nuPad3(i) + idFileName, uploadFolder, fileId, fileName);
			}
    }
}


function downloadFile(url, filename) {
    var a = document.createElement("a");
    a.href = url;
    a.setAttribute("download", filename);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

if(nuFormType() == 'edit') {
    addDownloadLinks();
} else
{
    
    if (typeof nuStopBrowserResize == 'function') { 
        nuStopBrowserResize();
    }

}

For the HTML Object "sample-upload":

Code: Select all

<script type="text/javascript">

function setUploadStatus(id, classname, icon, status) {

    var msg = '<div class="' + classname + '"><i class="' + icon + '"></i>' + status + '</div>';
    $('#' + id).html(msg);

}

function setSubGridFileInfo(filename, fileid) {
     $('#' + idRowFileName).val(filename).change();
     $('#' + idRowFileId).val(fileid).change();  
}


$(document).ready(function(e) {

    $('#fileToUpload').on('change', function(event) {

        var file = $(this)[0].files[0];

        var formdata = new FormData();
        formdata.append('file', file);
        formdata.append('record_id', nuCurrentProperties().record_id);

        setUploadStatus('sample_msg', 'alert alert-info', 'fa fa-spin fa-spinner', nuTranslate('Uploading...'));

        $.ajax({
            type: "POST",
            url: "libs/upload/upload.php",
            data: formdata,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {

                var result = JSON.parse(data);
                if (result.error !== '') {
                    var err = "";
                    switch (result.error) {
                        case "INVALID_FILE_TYPE":
                            err = "The file type is not allowed.";
                            break;
                        case "ERROR_MOVING_FILE":
                            err = "The file cannot be moved to the destination directory.";
                            break;
                        case "FILE_TOO_LARGE":
                            err = "Error: File size is larger than the allowed limit.";
                            break;
                        default:
                            err = result.error;
                    }
                    setUploadStatus('sample_msg', 'alert alert-info', 'fa fa-exclamation-triangle', nuTranslate("Upload Failed:") + ' ' + nuTranslate(err));

                } else {

                        setSubGridFileInfo(result.file_name, result.file_id);
                        createDownloadLink(idRowFileName, uploadFolder, result.file_id, result.file_name);
                        setUploadStatus('sample_msg', 'alert alert-success', 'fa fa-thumbs-up', nuTranslate('File uploaded successfully.'));

                }
                $("#upload-form")[0].reset();

            },
            error: function(data) {
                setUploadStatus('sample_msg', 'alert alert-info', 'fa fa-exclamation-triangle', nuTranslate('Upload failed.'));
            }
        });
    });
});

</script>

<form id="upload-form" action="libs/upload/upload.php" method="post" enctype="multipart/form-data">   
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" name="submit" value="Upload">
</form>

Below are the screenshots for the Main Form's Object's and the Subform's Objects.

[kev1n]

In the original code, it's:

Code: Select all

if(nuFormType() == 'edit') {
    addDownloadLinks(idSubForm);
} else
{
   
    if (typeof nuStopBrowserResize == 'function') { 
        nuStopBrowserResize();
    }

}

and your code:

Code: Select all

if(nuFormType() == 'edit') {
    addDownloadLinks();
} else
{
   
    if (typeof nuStopBrowserResize == 'function') {
        nuStopBrowserResize();
    }

[skyline101]

Hi Kevin

I most likely entered, incorrectly, the actual idSubForm number in there and since it did not work I deleted it and
completely forgot to leave the code the way it was.

It is working. Thank you very much .

[nikola]

HI Kevin
Uploading files to the server (on button click) for my projects is a must.
I read articles from: https://github.com/nuBuilder/nuBuilder-4.5-Code-Library
1. Edit Screen: Upload a File to the Server on Button Click
2. Uploading a File on button click in a Subform
From start, I have problem: “Upload Failed”.
Same nubuilder simple, test applications are designed, from scratch, precisely, on three different computers.
I have used XAMPP, Windows 7, Windows 8.1 and Windows server 2012. Error is the same “Upload Failed”.
Have you any recommandation?
Thank you in advance.