I need to run a python script which will serve images. And this image servlet will also accept POST which will upload images to the servlet. But the challenge is the post can come from a different domain.
SO my python script should accept crossdomain post and get for image
Consider an eg) like
Two domain :
- http://localhost:80/
- http://localhost:8081/
You have a web page hpsted in http://localhost:8081/ . From this page you would like to submit data or get data from a server running @ http://localhost:80/.
@ http://localhost:8081/
Here you use a normal html page and a jquery script to do the post .
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
<script type="text/javascript">
$().ready(function(){
console.log("Helooworld");
$.ajax({
url: "http://localhost:80/cgi-bin/upload.cgi"
}).done(function(result) {
console.log("result = "+result);
});
$("[name='submit']").live('click',function(event){
console.log('clicked');
event.preventDefault();
var formdata = new FormData($("form").get()[0])
$.ajax({
url: "http://localhost:80/cgi-bin/upload.cgi",
type:'POST' ,
data:formdata,
cache: false,
contentType: false,
processData: false
}).done(function(data){
console.log("success!!");
});
});
});
</script>
<form enctype="multipart/form-data" method="post" name="fileinfo">
File name: <input name="file_1" type="file"><br>
File name: <input name="file_2" type="file"><br>
File name: <input name="file_3" type="file"><br>
<input name="submit" type="submit">
</form>
</body>
</html>
Not the FormData element, this is part of the xhr2 spec of html5. Which allows cross domain file upload. Just like CORS this is only supported in latest browsers.
I have used jquery for the ajax submit . Versions of jquery after 1.5.1 support CORS so the hassles of CORS to a limit are handled by jquery. Making the like of developer
much easy. Also to prevent jquery from processing the FormData object i have mentioned processData:false and also the content type is also set to false. These are imp!!.
Now this code should be able to submit the files to a server located in another domain. We shall look into the 2nd server now
@ http://localhost:80/
At my second server i have used a Python cgi script for handling the file upload. Here look at the script
print "Access-Control-Allow-Origin: http://localhost:8080"
print "Content-Type: text/html\n"
print HTML_TEMPLATE % {'SCRIPT_NAME':os.environ['SCRIPT_NAME']}
.
.
.
form = cgi.FieldStorage()
if not form.has_key(form_field): return
fileitem = form[form_field]
if not fileitem.file: return
fout = file (os.path.join(upload_dir, fileitem.filename), 'wb')
revent Here not that i have set the header option print "Access-Control-Allow-Origin: http://localhost:8080" for the response which allow this cgi to
accept as well as serve content for the domain http://localhost:8080 . This is specifially for python. For other technologies on how to set the response header
check this . Thus i was able to remotely upload files to a different domain as well as get data from their without the need of comples ajax file upload plugins
or jsonp. Thi is one of the signs of rising power on the client tier. Now its sunday morning 10.19. The delay i would say was due to the
/tmp problem..I uploaded my files to /tmp in fedora . And couldnt find it ther. Then i came across this blog which said in fedora /tmp is mounted with tmpfs.
Anywas Happy coding
No comments:
Post a Comment