Upload photo

[azaleas]

How can I create a photo uploading mechanism, when I can upload a photo, and once it's uploaded it gets to be shown instantly on a same page? Like in most social network web sites?

[Dave]

Hi Azaleas,

Create a folder under your web root called, for example, /uploads.

Create an ebase table called, say, images, with columns img_name and img_path. Add an image column control and set it's URL to be &&images-img_path, i.e. so that its URL value will be substituted with the current row value of the images-img_path column as the table loads.

Specify your /uploads folder as the destination when you issue the upload command.

After completing each upload insert a row into the images table using the $FILE_NAME and $FILE_NAME_USER system variables to set the images-img_name and images-img_path values.

Your code will look something like:

Code: Select all

// set upload options: images only and upload to a folder under the web root (called uploads)
var opts = new UploadOptions();
opts.acceptedMimeTypes = [ "image/*" ];    
opts.directory = "C:/ebaseXi_V53/UfsServer/tomcat/webapps/ufs/uploads";                                   
opts.fileTypes = [ "png", "gif", "jpg"];

// begin the upload
form.uploadFileFromBrowser(opts);            

// add the uploaded image path to our table
tables.IMAGES.insertRow();
tables.IMAGES.IMG_PATH.value="uploads/"+system.variables.$FILE_NAME.value.replace(/^.*[\\\/]/, '');
tables.IMAGES.IMG_NAME.value=system.variables.$FILE_NAME_USER.value;

Here is a simple example:
http://portal.ebasetech.com/cp/ufsmain?formid=UPL

You can download an export of it here:
www.ebaseftp.com/download/samples/upl.zip

Regards,
Dave

[azaleas]

Thanks for the solution. One more question though.

How can I change the name of the file? Upload function uses $FILE_USER_NEW to create the name of the file when saving, so is there a way to interact with the name?

[Jon]

You can use FileServices.moveFile() to rename the file after the upload e.g.

Code: Select all

form.uploadFileFromBrowser(opts);
var fname = system.variables.$FILE_NAME.value;
if (fname)
{
  FileServices.moveFile&#40;fname, <new_file_path>&#41;;
&#125;

[azaleas]

1) I have created a Database table to keep the information about uploaded profile photo. With the solution provided photos can be uploaded, but there's no control on duplication. So I made a quick search logic (using fetch with where clause on ID), which keeps my database from duplicates. But the photos are still uploaded to the folder? So, even though I have 2 entries in my DB, i have 10 uploaded photos.

2) The solution provided inserts the files, but what if I want to simply update the photo, not insert it? I have already inserted the photo to DB, with all the relevant data, now all I need is to update the photo. I tried to use deleterow() insertrow() combination but I get an error saying the row is invalid (-1).

3) I need to show only one picture at a time, depending on a user. So I think repeater would be the solution here?

[Jon]

I'm afraid I didn't understand all your question. But in answer to the last part, you can display a variable image as part of a table as shown in this example:

Table: CONTACTS has a column CONTACTS-PHOTO - a typical value might be photos/image1234.gif
Table Control: TABLE1 displays table CONTACTS and has an Image Column Control where the URL property is set to &&CONTACTS-PHOTO (this is then substituted at runtime with the appropriate value from the table)

This would also work in the same way for a Repeater Control except you would use an Image Control instead of an Image Column Control.

To make this work, the photos directory must be inside the Ebase webapp i.e. the ufs folder e.g. ufs/photos.

[azaleas]

Sorry Jon, basically this is what I want to achieve:

Upload button will first check if the photo should be updated or inserted. If it should be inserted then the solution provided by Dave kicks in. But if I need to update the photo of existing user, then the prev photo gets deleted both from db (here, only the information about the photo is changed) and from the folder and new one is inserted. Right now, the solution above simply adds the photos with no filtering.

I have a check parameter, similar to the one used in ADP Fundamentals course (username checking with fetch command), so, this way I check if the photo needs to be inserted or just updated. But, now I have two problems:

How to delete the prev. file and replace it with new one?
How to find the particular row, and update the data?

Last thing is, the solution uses table to show photos. But I need only one photo on a page, think of it as a profile page with profile photo. So, how to achieve this? Because the table shows all the photos uploaded.

[Jon]

How to delete the prev. file and replace it with new one?

There's a fairly comprehensive list of file services in the FileServices API class - this includes deletion, renaming, checking existence etc. To see the doc for this, press F1 in the script Editor, select API Javadoc, then click on FileServices in the lower panel on the left.

How to find the particular row, and update the data?

You find a table row using the findRow() or findRows() method on the Table object - this returns row number(s) that match your search criteria. You can then set each row as the current table row and change the data e.g.

Code: Select all

var row = tables.ORDERS.findRow(tables.ORDERS.ORDER_ID, fields.SEARCH_ORDER_ID.value);
if (row != -1)
{
   tables.ORDERS.setCurrentRow(row);
   tables.ORDERS.ADDRESS.value = <new address>;
&#125;

You update the table using the updateTable() method.