Control overwriting file when uploading to the File System with uppy Topic is solved

[justme636]

Hello there!
I'm using nuBuilder since a few weeks and I think it's an amazing software for designing database applications - especially for advanced, yet non-professional programmers. So first of all, thanks a lot to the developers for creating and providing this great (open source!) software!

At the moment, I'm trying to implement a server-side file management system. In my browse and edit form I've created an upload field with uppy. With customization of the uppy script and the NUUPLOADE script, a file gets uploaded, renamend and saved on the file system. The (new) file name is beeing retrieved after upload with a nuOnFileUploadComplete function and set with JavaScript into a form field (and saved to the database). With HTML the uploaded file can be displayed or downloaded. So far, it works like a charm.

My problem now is that an existing file gets overwritten on upload without any warning or confirmation - this is too risky. My idea was to set a "overwrite" checkbox in the browse and edit form and send this value as metadata of the uppy script to the NUUPLOADE script. The script should check if a corresponding file exists with File_exist () function and - if yes - then check whether overwrite is allowed with the value from the "overwrite" checkbox. This doesn't work, because (boolean) non-string value aren't transported via POST methods - again I've learned something.

Then I tried to create a hidden form field (only client side, not in database) with a text "allowed" / "permitted" that is set with JavaScript of the checkbox. This text value should be transported via uppy script as (hash) variable. But apparently, values must also be saved to the database first, before beeing available as hash cookies, and so this doesn't work either.

Third idea was to set a form property "fileoverwrite" with "allowed"/"permitted" via checkbox and transport this with a hash variable in the uppy script. Basically, this works but the value "allowed" is only transported after checking-unchecking-checking the checkbox - I tried this with nudebug() variable in the NUUPLOAD script (however, in form info the variable are available without double/triple clicking...) .

Now I'm wondering what to do next... does anyobody have an idea how to set an "overwrite allowed" value in the browse and edit form and transport it to the PHP script when uploading a file with uppy? Is there maybe another way to set and send overwrite permissions I haven't considered yet? Can I maybe add metadata with an additional uppy form field? In fact, I'm not really familiar with this plugin...

I'm looking forward to your ideas and support!

[kev1n]

Hi,

It's great to hear that you've had such a positive experience with nuBuilder.

The following works for me:

Add Uppy meta (Assuming there's a checkbox with id "fileoverwrite")

Code: Select all

uppy.on('file-added', (file) => {
 uppy.setMeta({
	 procedure: 'NUUPLOADFILE_TEMPLATE'
	 , session_id: window.nuSESSION
	 , fileoverwrite: nuGetValue('fileoverwrite').toString()
 })
})

in the procedure, retrieve the meta data:

Code: Select all

$overwrite = isset($_POST["fileoverwrite"]) ? $_POST["fileoverwrite"] : '';

if ($overwrite == 'true') {
 // allow overwrite
} else {
 //  disallow overwrite
}

[justme636]

Hello kev1n,

thank you for your quick reply to my post and your help!

I tried to reproduce your suggestion: I have a checkbox (without database column) with ID "fileoverwrite" and copied your code to my uppy script and NUUPLOADE script. When I add

Code: Select all

nuDebug($overwrite);

to the NUUPLOAD script and upload a file, I always get in the debug log:

Code: Select all

[0] : false

Activating the checkbox before choosing und uploading a file doesn't change this. Do you get a "true", after activating the checkbox in the form?

[kev1n]

Yes , I get a "true" when ticking the checkbox.
Can you share your Uppy JS code?

[justme636]

That was it!
I used the standard <script>-JS code in the HTML tab of the uppy field and just added fileoverwrite: nuGetValue('fileoverwrite').toString in the pre-existing uppy.setMeta:

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.setMeta({ procedure: 'NUUPLOADFILE_ZZZ', session_id: window.nuSESSION, record_id: '#RECORD_ID#', fileoverwrite: nuGetValue('fileoverwrite').toString() })
    
        uppy.on('complete', (result) => {
    
            if (window.nuOnFileUploadComplete) {
                nuOnFileUploadComplete('FS', $objId.attr('id'), result);
            }
    
        })

    }

</script>

Then I saw that you placed your code in a different section. So I removed uppy.setMeta (...) and created underneath a new section with

Code: Select all

uppy.on('file-added', (file) => {
 uppy.setMeta({
	 procedure: 'NUUPLOADFILE_ZZZ'
	 , session_id: window.nuSESSION
         , record_id: '#RECORD_ID#'
	 , fileoverwrite: nuGetValue('fileoverwrite').toString()
 })
}))

just like you did and now it works!

So for everybody who wants to do something smiliar, my JS code in the uppy field HTML tab is:

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_ZZZ'
	 , session_id: window.nuSESSION
         , record_id: '#RECORD_ID#'
	 , fileoverwrite: nuGetValue('fileoverwrite').toString()
 })
})

        uppy.on('complete', (result) => {
    
            if (window.nuOnFileUploadComplete) {
                nuOnFileUploadComplete('FS', $objId.attr('id'), result);
            }
    
        })

    }

</script>

Thank you so much, kev1in, for your help!

[kev1n]

The Uppy code was updated/improved at the beginning of January which is why your code didn't contain the

Code: Select all

uppy.on('file-added ....

part.

[justme636]

Epilog:
I noticed that the checkbox value was not sent when the checkbox has been activated after the file had already been added to the uppy field. So I went through the codes of uppy in a bit more detail. First, I copied the new default code for uppy - thank you, kev1n - and to this code I just added as a second now "upload" event below uppy.on('file-added', (file) ... the following:

Code: Select all

        uppy.on('upload', (file) => {
            uppy.setMeta({
                fileoverwrite: nuGetValue('fileoverwrite').toString()
            })
        })

This works for me now as expected. And maybe it helps anybody else, too.

[kev1n]

Thanks for sharing your findings! It is then sufficient (at least in most cases) to use the "upload" instead of "file-added" event?

[justme636]

Sure - I'm happy when my findings can help others. I learned a lot with this forum and it makes me happy to give something back.

Yes, I think the "upload" event is in general a better option for transporting form data as metadata, because with this event the metadata is set when you click the upload button. In my opinion, it is quite often that you have already picked a file, but right before the actual upload (clicking the button) you change something in the form (e.g. if you find a mistake). With "file-added" event the old value is set (when the file was picked in the uppy form field), with "upload" the current form value is set at moment of actual uploading the file.

Probably, you could also replace the "file-added" event with "upload" and add the code for metadata to be posted in the PHP code, so you would have just one event for upload template, session, metadata ..., but I always try to change as least core/template code as possible and then rather add something new than replace it. In fact, I don't know why "file-added" (and not "upload") was used as uppy event, but I suppose it was done for a reason. And finally, I'm still not an uppy expert

[kev1n]

Thank you for your explanations! In my opinion, there is no reason to keep "file-added" and it can be replaced with "upload"