Show uploaded image in HTML box

[hiramalik]

Hi
I have came accross a video while exploring nuBuilder https://www.youtube.com/watch?v=xhb9PJHimdw
In this video a button is made to show uploaded image in HTML box. Can anyone please explain the procedure? As I am new to the programming and have a limited knowledge of the process.
Any help would be highly appreciated.
Kind Regards
Hira Malik

[admin]

Hira,

I have attached a database that you can load to show how to display a file.

file_demo.zip

This is the Javascript code on the Form...

Code: Select all

if(nuFormType() == 'edit'){
    nuShowFile();
}

function nuBeforeSave(){

    var f   = $('#cro_security_sheet_file').val();

    if(f != ''){
        $('#cro_security_sheet').val(f).change();
    }
    
    return true;

}

function nuShowFile(){

    var j   = $('#cro_security_sheet').val();
    nuEmbedObject(j, 'view_image', 600,600);
    	
}

Steven

[kev1n]

Hi,

The demo fails to display the image on the Browse Screen.

Here's an updated sample (i.a. with auto-resizing the image), based on Steven's sample.

https://github.com/smalos/nuBuilder4-Co ... _image.zip

The sample can be imported directly into an existing nuBuilder database - there's no need to set up a new one.
The dump contains a form, its objects and table. No existing data will be overwritten/modified or deleted!

How to import the file:

1. Log into phpMyAdmin (In nuBuilder, go to the tab "Builders" and click on the "Database" button)
2. In phpMyAdmin, Click "Import" in the top menu
3. Under File to Import, click "Browse" and select the sql file to import.
4. Click "Go" at the bottom right to import the database file.
5. When the database has been imported successfully, you should see a message at the top of the page similar to: "Import has been successfully finished".
6. Log out from nuBuilder and then log in again for the changes to take effect.

[hiramalik]

Thank you so much Kev1n

[kev1n]

I just fixed the link to the demo in my previous post. It was broken.