[Added] uppy - File Uploader

[admin]

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

file.png (10.07 KiB) Viewed 7168 times

upload_1.png (4.35 KiB) Viewed 7168 times

upload_2.png (4.45 KiB) Viewed 7168 times

[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 (26.44 KiB) Viewed 7157 times

[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]

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.