UploadForm - custom DynamicForm for uploading files withous SmartClient server

[janusz]

Hi,

I have coded today special DynamicForm, that uploads files to custom (PHP) backend without the need to reload a page after upload.

I hope that somebody will find it useful and once again I am voting for some kind of repository to put ready snippets of code or custom classes, because I am afraid that posting it like this will make it "lost" during next few days, when it will be moved deeper into the forum.

Here is UploadForm code to use in SmartClient:

isc.defineClass('UploadForm', 'DynamicForm');
UploadForm.addClassProperties({
  create: function(data) {

    // We are creating IFRAME that will work as a target for upload.
    var iframeCanvas = Canvas.getById('uploadFormIframe');
    if(!iframeCanvas) {
      Canvas.create({
        ID: "uploadFormIframe",
        contents: "<iframe name=\"uploadFormIframe\"></iframe>",
        autoDraw: true,
        visibility: "hidden"
      });
    }
    
    // parameters needed to submit a form  
    isc.addProperties(data, {
      encoding: "multipart",
      canSubmit: "true",
      target: "uploadFormIframe"
    });

    // special field that will hold form's ID
    data.fields.push({name: "uploadFormID", type: "hidden"});

    // We are creating a form.
    var f = this.Super('create', data);

    // We are setting special field to an ID of newly created form.
    f.setValue('uploadFormID', f.getID());
    return f;
  }
});

UploadForm is automatically adding a field with its ID ("uploadFormID"), so backend can make a callback after receiving a file:
The simpliest form needs "action" and "fields" parameters to be set.

Example form:

UploadForm.create({

  // location of our backend
  action: "/smartclient_upload.php",
  fields: [
    {name: "another_field_1", type: "TextItem"},
    {name: "another_field_2", type: "TextItem"},
    {name: "uploaded_file_1", type: "UploadItem"},
    {name: "uploaded_file_2", type: "UploadItem"},
    {type: "submit"}
  ],
  submitDone: function(result) {
    // Here we can do something with a response from backend.
    window.alert(result);
  }
});

Backend has to send back JavaScript to fire callback on the form.
The simpliest one can be found below:

smartclient_upload.php

<?php

// Here, we are doing something with uploaded files.
$fileSize1 = $_FILES['uploaded_file_1']['size'];
$file2 = $_FILES['uploaded_file_2']['tmp_name'];


// Result can be a string, integer, object, array...
// and it will be delivered back to SmartClient encapsulated in JSON.
$result = 'ok';

$result = json_encode($result);
echo "<script type=\"text/javascript\">if(window && window.parent && window.parent['{$_POST['uploadFormID']}'] && window.parent['{$_POST['uploadFormID']}'].submitDone) { window.parent['{$_POST['uploadFormID']}'].submitDone($result); } </script>";

?>

Best regards,
Janusz

[rafa1970]

Very useful your post. Thanks por the sentence where you give me the solution -- type: "UploadItem" --.

[gravitycode]

doesnt work in IE 7

This solution doesnt work in IE7. In this browser shit always result is opened in a new window.