Page 1 of 4

configure Uppy

Posted: Wed Jul 02, 2025 9:38 am
by 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 ?

Re: configure Uppy

Posted: Wed Jul 02, 2025 9:45 am
by 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.

Re: configure Uppy

Posted: Wed Jul 02, 2025 11:19 am
by johan
Kev1n

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

Johan

Re: configure Uppy

Posted: Wed Jul 02, 2025 11:28 am
by kev1n
What's your nuBuilder version?

Re: configure Uppy

Posted: Wed Jul 02, 2025 11:39 am
by johan
V.4.5-2024.06.08.10

Re: configure Uppy

Posted: Wed Jul 02, 2025 11:42 am
by kev1n
Could you please try with a more recent version to ensure the issue isn’t related to your current nuBuilder version?

Re: configure Uppy

Posted: Wed Jul 02, 2025 3:08 pm
by 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

Re: configure Uppy

Posted: Wed Jul 02, 2025 3:11 pm
by kev1n
What does your uppy/html code look like?

Re: configure Uppy

Posted: Wed Jul 02, 2025 3:51 pm
by 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

Re: configure Uppy

Posted: Wed Jul 02, 2025 3:57 pm
by 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>