configure Uppy

[johan]

I am trying to upload files to my server using object input - file server.
I now get a message upload failed and see via console error 401.

Screenshot 2025-07-02 09.35.35.png

Any idea what I am doing wrong?
Is there a manual to get started with uppy in Nubuilder ?

[kev1n]

Hi,

Are you using the default Uppy code, or have there been any modifications?
(Referring to the HTML tab of the Uppy object)

To use the Uppy object, the setup is quite straightforward:

1. Create an object with type Input.
2. In the Input tab, choose File from the "Input Type (and class)" dropdown.
3. In the Target dropdown, select File system.

To customize the default upload procedure:

- Clone the procedure called NUUPLOADFILE_TEMPLATE
(or nu_upload_file_template in newer versions of nuBuilder).

- Then update the procedure name in the HTML tab of the object, for example:

Code: Select all

procedure: 'nu_upload_file_template'

Change it to your custom procedure name, e.g.:

Code: Select all

procedure: 'nu_upload_file'

This lets you define your own logic for handling file uploads.

[johan]

Kev1n

That's what I did, but still got the 401 error.
I didn't change anything in the procedure.

Johan

[kev1n]

What's your nuBuilder version?

[johan]

V.4.5-2024.06.08.10

[kev1n]

Could you please try with a more recent version to ensure the issue isn’t related to your current nuBuilder version?

[johan]

Kev1n

I've update my nuBuilder and database to V.4.8-2025.06.07.00

Still can't upload files.

This is the error in my console

Code: Select all

uppy.min.js?ts=20250702125031:2 [Uppy] [15:03:41] TypeError: Cannot read properties of undefined (reading 'message')
    at <anonymous>:17:34
    at Array.forEach (<anonymous>)
    at nuOnFileUploadComplete (<anonymous>:16:18)
    at Function.<anonymous> (<anonymous>:36:8)
    at emitAll (uppy.min.js?ts=20250702125031:1:1483)
    at Object.emit (uppy.min.js?ts=20250702125031:1:785)
    at i.emit (uppy.min.js?ts=20250702125031:2:75026)
    at i._runUpload2 (uppy.min.js?ts=20250702125031:7:11269)

Johan

[kev1n]

What does your uppy/html code look like?

[johan]

Kev1n

This is the HTML

Code: Select all

<div id="#uppy_div#"></div>

<script>

    nuInitUppy();
    
    function nuInitUppy() {
    
    	const $objId = $('#' + '#this_object_id#');
    	const target = '#' + '#uppy_div#';
    
    	let uppy = nuUppyCreate();
    
    	uppy.use(Uppy.Dashboard, {
    			inline: true,
    			bundle: true,
    			height: $objId.nuCSSNumber('height'),
    			width: $objId.nuCSSNumber('width'),
    			target: target,
    			showProgressDetails: true,
    			replaceTargetContent: true,
    			method: 'post'
    		})
    		.use(Uppy.XHRUpload, {
    			endpoint: 'core/nuapi.php'
    		})
    
    	uppy.on('upload', (file) => {
    		uppy.setMeta({
    			procedure: 'NUUPLOADFILE_project',
    			session_id: window.nuSESSION
    		})
    	});
    
    	uppy.on('complete', (result) => {
    
    		if (window.nuOnFileUploadComplete) {
    			nuOnFileUploadComplete('FS', $objId.attr('id'), result);
    		}
    
    	})
    
    }

</script>

Johan

[kev1n]

Try using this code, yours is from an older version:

Code: Select all

<div id="#uppy_div#"></div>

<script>

nuInitUppy();

function nuInitUppy() {

	const $objId = $('#' + '#this_object_id#');
	const target = '#' + '#uppy_div#';

	let uppy = nuUppyCreate();

	uppy.use(Uppy.Dashboard, {
			inline: true,
			bundle: true,
			height: $objId.nuCSSNumber('height'),
			width: $objId.nuCSSNumber('width'),
			target: target,
			showProgressDetails: true,
			replaceTargetContent: true,
			method: 'post'
		})
		.use(Uppy.XHRUpload, {
			endpoint: 'core/nuapi.php',
			shouldRetry: (xhr) => { return false;},
			async onAfterResponse(xhr) {
			   if (xhr.status === 401) {
						const jsonData = JSON.parse(xhr.responseText);
						uppyResponseMessage = jsonData.message;
						throw new Error(uppyResponseMessage);   
			   }
            }
				   
		})

	uppy.on('upload', (file) => {
		uppy.setMeta({
			procedure: 'nu_upload_file_template',
			session_id: window.nuSESSION
		})
	});

	uppy.on('complete', (result) => {

		if (window.nuOnFileUploadComplete) {
			nuOnFileUploadComplete('FS', $objId.attr('id'), result, uppyResponseMessage);
		}

	})

}

</script>