Upload file object does not show Topic is solved

[nadir]

Hello,

I am trying to add an input object of type file. When I set the target to "File System" on the Input tab, the upload field does not show. I get the following error in developers console:

Code: Select all

Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': Invalid or unexpected token
    at m (jquery-3.7.1.min.js?ts=1:2:880)
    at $e (jquery-3.7.1.min.js?ts=1:2:46274)
    at ce.fn.init.append (jquery-3.7.1.min.js?ts=1:2:47633)
    at ce.fn.init.<anonymous> (jquery-3.7.1.min.js?ts=1:2:48729)
    at M (jquery-3.7.1.min.js?ts=1:2:29497)
    at ce.fn.init.html (jquery-3.7.1.min.js?ts=1:2:48405)
    at nuINPUTfileFileSystem (nuform.js?ts=20250424065604:1179:27)
    at Object.nuINPUT (nuform.js?ts=20250424065604:1497:3)
    at nuBuildEditObjects (nuform.js?ts=20250424065604:948:37)
    at nuBuildForm (nuform.js?ts=20250424065604:116:3)

Thanks,
Nadir Latif

[kev1n]

Hi Nadir,

I've tested the same setup on my end but wasn't able to replicate the issue — the file upload input appears as expected when the target is set to “File System”.
To help troubleshoot further, could you please upload a short video showing the steps you're taking? That would really help us pinpoint what might be going wrong.

[nadir]

Hi Kevin,

Please see the attached video. The file upload box does not show when the target is set to "File System"

DCC - User Home - Google Chrome 2025-04-24 14-35-55.mp4

[kev1n]

Could you upload a sample database or a dump of your database so I can take a closer look at the issue?

[nadir]

Please see attached database dump

attendance.zip

[kev1n]

Looks like there's an extra line break in the code. Try removing it—see the screenshot below.

file.PNG

[nadir]

I removed the line break and that fixed the problem. I can now see the file upload box.

But now when I upload a file it gives an error. Please see attached screenshot.

screenshot.png

It seems to be a permissions error. The document root is F:/Xampp/htdocs. I am on Windows 10. I gave full permissions to the current user to the document root, but it did not help.

[kev1n]

By default, the NUUPLOADFILE_TEMPLATE procedure (template) is used to handle file uploads.

If you need to upload file types that aren't supported by default, you can clone this Procedure and save it under a new name.
-> see screenshot below (1)

This also gives you the flexibility to execute custom code after the file has been uploaded — for example, you can automatically process a .csv file, extract data from an Excel sheet, or trigger other logic based on the uploaded file.

For example, rename NUUPLOADFILE_TEMPLATE to something like upload_attendance. (enter in the Code field)
-> see screenshot below (2)

Then, adjust the $allowedTypes array to include any additional MIME types you need — for example, to support Excel files (.xls, .xlsx), update the array as follows:

-> see screenshot below (3)

Code: Select all

// Allowed file types
$allowedTypes = [
    'image/png',
    'image/jpeg',
    'application/pdf',
    'application/vnd.ms-excel', // for .xls
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // for .xlsx
    'text/plain',
    'text/csv'
];

procedure.jpg

Finally, go to the file object → HTML tab, and update the procedure name there to match the new one:

Screenshot 2025-04-24 132440.png

[nadir]

I cloned the NUUPLOADFILE_TEMPLATE to a new one called NUUPLOADFILE_TEMPLATE_ATTENDANCE. I then set the new template name in the HTML tab. That fixed the problem. The file upload is working now. Thanks for your help.