Welcome to the nuBuilder forums!

Please register and login to view forums and other content only available to registered users.

[Added] uppy - File Uploader

Information about updates, news, Code Library
Post Reply
admin
Site Admin
Posts: 2771
Joined: Mon Jun 15, 2009 2:23 am
nuBuilder Version: 4.5

[Added] uppy - File Uploader

Unread post by admin »

Files can now be uploaded to the File System too thanks to uppy.

file.png
file.png (10.07 KiB) Viewed 4258 times
upload_1.png
upload_1.png (4.35 KiB) Viewed 4258 times
upload_2.png
upload_2.png (4.45 KiB) Viewed 4258 times
kev1n
nuBuilder Team
Posts: 3734
Joined: Sun Oct 14, 2018 6:43 pm
nuBuilder Version: 4.5
Has thanked: 2 times
Been thanked: 9 times
Contact:

Re: [Added] uppy - File Uploader

Unread post by kev1n »

When selecting "File System" from the "Target" dropdown (see screenshot above), nuBuilder adds some default JavaScript code in the HTML field to initialize uppy.

On the server side, the uploading is handled by a procedure called "NUUPLOADFILE_TEMPLATE".
To implement your own logic, clone that procedure, rename it and replace "NUUPLOADFILE_TEMPLATE" in the JS code with the Procedure name.
uppy_procedure.png
uppy_procedure.png (26.44 KiB) Viewed 4247 times
admin
Site Admin
Posts: 2771
Joined: Mon Jun 15, 2009 2:23 am
nuBuilder Version: 4.5

Re: [Added] uppy - File Uploader

Unread post by admin »

The upload code has been further optimised. One (important) change is the file type checking part.

Using FILEINFO_MIME_TYPE to verify the file type is generally considered more reliable than checking the file extension alone.

Since file extensions are not always a reliable indicator of a file's type, it's possible for a file to have an incorrect or misleading extension, or for multiple file types to share the same extension.

Some file types, such as JPEG and PNG images, can be easily manipulated to include malicious code. By only checking the file extension, it would be possible for an attacker to upload a file with a trusted extension that actually contains malicious code.

On the other hand, FILEINFO_MIME_TYPE checks the actual contents of the file to determine its MIME type. This is a more reliable way to verify the file type, as it is less susceptible to manipulation or spoofing.

The procedure NUUPLOADFILE_TEMPLATE:

Code: Select all

// Allowed file extensions
$allowed = array('png', 'jpg', 'jpeg', 'bmp', 'pdf', 'xlsx', 'xls', 'csv', 'txt', 'docx', 'pptx');

// Maximum file size
$maxfilesize = 5 * 1024 * 1024; // (5 MB)

$filename = nuSanitizeFilename(basename($_FILES['file']['name']));
$target_dir = $_SERVER['DOCUMENT_ROOT']. '/';
$target_file = $target_dir . $filename;

$error = nuTranslate('Sorry, there was an error uploading your file.');

$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
if (!in_array($ext, $allowed)) {
    $data = ['error' => $error,
        'message' => nuTranslate('Invalid file type')];
    $result = json_encode($data);
    return;
}

$filesize = $_FILES["file"]["size"];

if ($filesize > $maxfilesize) {
    $data = ['error' => $error,
        'message' => nuTranslate('File size exceeded')];
    $result = json_encode($data);
    return;
}

try {
    if (move_uploaded_file($_FILES['file']['tmp_name'], $target_file)) {
        $data = ['url' => $target_file,
            'file' => $filename,
            'message' => 'The file ' . $filename . ' has been uploaded.'];
        http_response_code(201);
        $result = json_encode($data);
    } else {
        throw new Exception(nuTranslate('Unable to move the uploaded file to its final location:') . $target_file);
    }

} catch (\Throwable $th) {
    $data = ['message' => $error,
        'error' => $th->getMessage()];
    $result = json_encode($data);
}
The error handling in https://github.com/nuBuilder/nuBuilder-4.5/blob/master/core/nuupload.php has also been improved.


New Uppy JavaScript code:

Code: Select all

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

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

</script>
kev1n
nuBuilder Team
Posts: 3734
Joined: Sun Oct 14, 2018 6:43 pm
nuBuilder Version: 4.5
Has thanked: 2 times
Been thanked: 9 times
Contact:

Re: [Added] uppy - File Uploader

Unread post by kev1n »

Added language support (Use the user's language):

In your current code, swap out this line:

Code: Select all

let uppy = new Uppy.Core();
( In newer versions, it's Uppy.Uppy() )

With

Code: Select all

let uppy = nuUppyCreate();
Also, the updated nuform.js
and uppy files in /core/libs/uppy from Github are required.
Post Reply