Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

Uppy procedure & form data

Questions related to customising nuBuilder Forte with JavaScript or PHP.
vario
Posts: 153
Joined: Mon Dec 05, 2011 12:23 pm
Location: Newton Abbot, UK
Has thanked: 1 time
Been thanked: 1 time

Uppy procedure & form data

Unread post by vario »

Can someone help jump start my Uppy procedure?

I want to use nuRunQuery and do some database manipulation within the procedure named in uppy.setMeta, making use of some of the form data. I'd like to use #RECORD_ID# and other field values.
How best to achieve this?

Neil.
kev1n
nuBuilder Team
Posts: 4305
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:

Re: Uppy procedure & form data

Unread post by kev1n »

Hi Neil,

When should the manipulation take place? When a file is being uploaded?
vario
Posts: 153
Joined: Mon Dec 05, 2011 12:23 pm
Location: Newton Abbot, UK
Has thanked: 1 time
Been thanked: 1 time

Re: Uppy procedure & form data

Unread post by vario »

I'm trying to see if Uppy will replace existing code from nuBuilder4-Code-Library (edit_upload_file).
Currently I upload data from another system by using "Add" from a browse screen which creates a record containing the date of the upload, and from this new record the file is uploaded and I do some data manipulation on the uploaded rows in "After Save" PHP.
What I had hoped was I could just have a form which uploads data without having to create a record for the sake of having somewhere to put the upload button.
I tried putting the AS code into the procedure name in setMeta but didn't work as form hash variable was not substituted.
Last edited by vario on Mon Sep 05, 2022 9:58 am, edited 1 time in total.
kev1n
nuBuilder Team
Posts: 4305
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:

Re: Uppy procedure & form data

Unread post by kev1n »

The upload object can also be placed on a Launch Screen and does not necessarily have to be on an Edit Screen/record.

The uploaded file can be manipulated in a "upload procedure" as described here:
viewtopic.php?p=27106#p27106
vario
Posts: 153
Joined: Mon Dec 05, 2011 12:23 pm
Location: Newton Abbot, UK
Has thanked: 1 time
Been thanked: 1 time

Re: Uppy procedure & form data

Unread post by vario »

Do you mean the edit_upload_file button can be placed on a Launch screen, or the Uppy object?
kev1n
nuBuilder Team
Posts: 4305
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:

Re: Uppy procedure & form data

Unread post by kev1n »

Both can be placed on a Launch screen.
vario
Posts: 153
Joined: Mon Dec 05, 2011 12:23 pm
Location: Newton Abbot, UK
Has thanked: 1 time
Been thanked: 1 time

Re: Uppy procedure & form data

Unread post by vario »

I have the file upload and procedure call working, but how to pass form values into the PHP procedure specified in setMeta ? I've tried using nuHash() but it has no value inside the procedure. There's alot of documentation for Uppy but I don;t know my way around it yet, I guess there must be a way to do it so can someone help?
kev1n
nuBuilder Team
Posts: 4305
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:

Re: Uppy procedure & form data

Unread post by kev1n »

Here's an example how to use the setMeta() method and to retrieved the passed data in PHP

Uppy JS:

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: 'your_procedure_name', record_id: '#RECORD_ID#', file_date : file_date.value})
        })
        
        uppy.on('complete', (result) => {

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

    }
    
</script>
PHP:

Code: Select all

require_once ('nusecurity.php');

// Allowed file extensions
$allowed = array('pdf', 'docx');

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

$filename = nuSanitizeFilename(basename($_FILES['file']['name']));

$record_id = isset($_POST["record_id"]) ? $_POST["record_id"] : '';
$file_date = isset($_POST["file_date"]) ? $_POST["file_date"] : '';

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

$file = $file_date ."_" . $record_id. "." . $ext;

$target_file = $target_dir . $file;
$filesize = $_FILES["file"]["size"];

$error = nuTranslate('Sorry, there was an error uploading your file.');
if ($filesize > $maxfilesize) {
    $data = ['error' => $error,
        'message' => 'File size exceeded'];
    $result = json_encode($data);
}

try {
    if (move_uploaded_file($_FILES['file']['tmp_name'], $target_file)) {
        $data = ['url' => $target_file,
            'file' => $file,
            'message' => 'The file ' . $file . ' has been uploaded.'];
        http_response_code(201);
        $result = json_encode($data);
    } else {
        throw new Exception('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);
}
vario
Posts: 153
Joined: Mon Dec 05, 2011 12:23 pm
Location: Newton Abbot, UK
Has thanked: 1 time
Been thanked: 1 time

Re: Uppy procedure & form data

Unread post by vario »

I still can't get form field value to the procedure - I've tried the following in the setMeta statement

Code: Select all

cprid: $('#cpr_id').val()
and

Code: Select all

cprid: document.getElementById('cpr_id').value
but no value is available at the procedure.
kev1n
nuBuilder Team
Posts: 4305
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 445 times
Contact:

Re: Uppy procedure & form data

Unread post by kev1n »

I'm not sure what's going wrong without seeing the full code.
Post Reply