Framework Documentation

The File Uploader Object

var btnUpload = new TButton('Upload');
var fuSample = new TFileUploader('Browse', 'image/*');
var layForm = new TFormLayout();
var wndFileUploaderSample = createWindow('File Uploader Sample');

var onUploadClick = function() {
fuSample.upload('upload.php');
};

btnUpload.setOnClick(onUploadClick);
layForm.add(new TText('Select image:'), fuSample);
wndFileUploaderSample.add(layForm);
wndFileUploaderSample.add(btnUpload);
showModal(wndFileUploaderSample);

Use file uploader object to upload files to the server. File uploader constructor takes two parameters (button label and accepted file types):

new TFileUploader(buttonLabel, accept)

Passing Parameters

You may need to pass some parameters or data along with the uploaded file. You can do so by passing these parameters as string to the upload method:

fuSample.upload('upload.php', uploadedCallback, 'Any data you need to pass goes here');

Where the uploadedCallback is a method that will be called when the upload process is finished.
You may access passed data at server throw post variable called 'Auxiliary' (in php : $_POST['Auxiliary']).

A Simple Upload Form

var m_btnClose = new TButton('Close');
var m_btnUpload = new TButton('Upload To Server');
var m_fileSelected = false;
var m_fileUpload = new TFileUploader('Browse', 'image/*');
var m_layForm = new TFormLayout();
var m_layMain = new THorizontalLayout();
var m_txtFile = new TText('No File Selected.');
var m_txtUploadResult = new TText('');
var m_vtbDescription = new TValidatableTextBox(200, new TEmptyValidator());
var m_vtbTitle = new TValidatableTextBox(200, new TEmptyValidator());
var m_window = createWindow('Upload Image File');

var onClientFileSelected = function(files) {
      if (files.length > 0) {
            m_txtFile.setText(files[0].name + ' (' + (files[0].size / 1024) + ' KB)');
            m_fileSelected = true;
            m_window.refresh();
            validateUpload();
      } else {
            m_txtFile.setText('No File Selected.');
            m_fileSelected = false;
      }
      m_txtUploadResult.setText('');
};

var onCloseClick = function() {
      hideModal();
};

var onFileUpload = function() {
      if (m_fileSelected) {
             var auxiliary = m_vtbTitle.getValue() + ';' + m_vtbDescription.getValue() + ';';
             m_fileUpload.upload(AddUrl, onFileUploaded, auxiliary);
      } else {
             m_txtUploadResult.setText('Select a File First.');
             m_window.refresh();
      }
};

var onFileUploaded = function(response) {
      m_txtUploadResult.setText(response);
       m_window.refresh();
};

var validateUpload = function() {
      if (m_vtbDescription.isValid() && m_vtbTitle.isValid() && m_fileSelected) {
             m_btnUpload.enable();
      } else {
             m_btnUpload.disable();
      }
};

m_btnClose.setOnClick(onCloseClick);
m_btnUpload.setOnClick(onFileUpload);
m_btnUpload.disable();
m_fileUpload.setOnClick(onClientFileSelected);

m_vtbDescription.setMaxLength(100);
m_vtbDescription.setOnValidationChanged(validateUpload);
m_vtbDescription.setValue('');
m_vtbTitle.setMaxLength(100);
m_vtbTitle.setOnValidationChanged(validateUpload);
m_vtbTitle.setValue('');

m_layMain.setDirection('ltr');
m_layMain.add(m_fileUpload);
m_layMain.add(m_txtFile);

m_layForm.setDirection('ltr');
m_layForm.add(new TText('Title: '), m_vtbTitle);
m_layForm.add(new TText('Description: '), m_vtbDescription);
m_layForm.add(new TText('Select File: '), m_layMain);
m_layForm.add(new TText(''), m_btnUpload);

m_window.add(m_layForm);
m_window.add(m_txtUploadResult);
m_window.add(new TVerticalDelimiter(5));
m_window.add(m_btnClose);
showModal(m_window);

File Uploader Methods and Properties

Method/Property	Description
getValue	Gets file path or name
setOnClick	Sets a callback that will be called after the user selects a file. On the previous example: m_fileUpload.setOnClick(onClientFileSelected);
upload	Sends the specified file to the server. This method takes three parameters: upload('Server Script', 'Uploaded Callback', 'Auxiliary Data')