Google app engine, Ajax, file upload,

Question

On the google App Engine, I would like to use javascript (or Ajax) to POST a form and then update the target div. The form contains a lot of fields and files to transfer. The javascript function is copied from the "Javascript: The Definite Guide" book. I have 2 questions:

In "form.html", how do I prepare the "data" argument for the postFormData() function so that I can pass all the fields and files.
How to design the callback function, so that the response (i.e., "form.html") may update the content div?

Thanks for your help.

base.html:

...
<div id="content">
{% include "form.html" %}
</div>

Image:<br />
<img src="/file?entity_id={{entity.key}}" />
<br />

<script type="text/javascript">
  function postFormData(url, data, callback) {
    if (typeof FormData === "undefined")
      throw new Error("FormData is not implemented");
    var request = new XMLHttpRequest();
    request.open("POST", url);
    request.onreadystatechange = function() {
      if (request.readystate === 4 && callback)
        callback(request);
    };
    var formdata = new FormData();
    for (var name in data) {
      if (!data.hasOwnProperty(name)) continue;
      var value = data[name];
      if (typeof value === "function") continue;
      formdata.append(name, value);
    }
    request.send(formdata);
}
</script>
...

form.html

<form action="/form" method="POST" enctype="multipart/form-data">
  name1: <input type="text" name="name" />{{ name1 }}<br /><br />
  name2: <input type="text" name="name" />{{ name }}<br /><br />
  ...
  file1: <input type="file" name="file" />{{ file1 }}<br /><br />
  file2: <input type="file" name="file" />{{ file2 }}<br /><br />
  ...
         <input type="submit" value="Submit" onclick="return postFormData('/form', howToPrepareData?, whatIsTheCallbackFunction?)" />
</form>

hey man instead of using long codes instead of javascript, use jquery which is very fast and you have to write less code! — Muhammad Talha Akbar, Dec 13 '12 at 12:16
@Aspiring: believe me, I tried. I know how to update a div using jQuery's Ajax; I know how to POST a form containing "regular data" using jQuery. But I just don't know how to POST a form containing regular data and files/images and then update a target div using jQuery. That's why I opted to javascript. Maybe you can shed some light on that? Thanks. — Randy Tang, Dec 13 '12 at 12:29
hey you want a complete code from me? i am gonna make it but just explain briefly what you want? — Muhammad Talha Akbar, Dec 13 '12 at 12:39
because JQUERY is so easy and callbacks are much easier just have to type success in ajax request and define a simple function to append or change or update elements! — Muhammad Talha Akbar, Dec 13 '12 at 12:41
I came up with the following code. But, strangely, it worked sometimes, other times it didn't. Can somebody tell me if this is a correct solution? Thanks. $(document).ready(function() { // bind 'myForm' and provide a simple callback function $('#myForm').ajaxForm(function(returnData) { $('#content').html(returnData) }); }); — Randy Tang, Dec 13 '12 at 15:02

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

When you do a Form POST (user clicks submit button or called via JS) then browser will reload the window and display the result of the POST. This is obviously not what you want.

The workaround is to have a hidden <iframe> that is a target of the Form POST action. Here is the example: How to send multipart/form-data form content by ajax (no jquery)?

edited May 23 '17 at 12:07

Community

1
1

answered Dec 13 '12 at 15:45

Peter Knego

79,991
11
123
154

score 1 · Answer 2 · answered Dec 13 '12 at 15:58

and now simple image upload here:

HTML

<form action="/form/index.php?name=" class="imageform" method="POST" enctype="multipart/form-data">
 name: <input type="text" name="name" class="name" /><br /><br />
 file: <input type="file" name="file" class="file"/><br /><br />
        <input type="submit" value="Submit" class="submit" />
</form>
<div id="callback">
</div>

JQUERY

$(document).ready(function() 
{ 
$('.submit').on('click', function() 
{
if($(".name").val()==""){
$(".name").val("Enter Name Here")
}
else { 
var s = $(".name").val();
var n = $(".imageform").attr("action");
$(".imageform").attr("action", function() {
return s+n;
}
$("#callback").html('Uploading.....');
$(".imageform").ajaxForm(
{
target: '#callback'
}).submit();
}
});
});

also include this link in head:

<script type="text/javascript" src="http://demos.9lessons.info/ajaximageupload/scripts/jquery.form.js"></script>

hey man all the text which will echo in php file will be shown in #callback. So, if you want to preview image please echo there html and do not remove that action=/form/index.php?name= and also in php file type $name=$_GET['name'];

Randy Tang · Accepted Answer · 2012-12-13T15:13:23.627

I came up with the following code. But, strangely, it worked sometimes, other times it didn't. When it failed, the error message displayed in Firebug was "ReferenceError: $ is not defined". Can somebody tell me what the problem is and if this is a correct solution? Thanks.

$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('#myForm').ajaxForm(function(returnData) {
        $('#content').html(returnData)
    }); 
});

Google app engine, Ajax, file upload,

3 Answers3