I am trying to upload a file using to Flickr using JQuery. I have a form (which works if I dont use JQuery) which I am submitting using the Form Plugin. My code is as follows:
<html>
<head>
<title>Test Upload</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').bind('submit', function() {
$(this).ajaxSubmit({
dataType: 'xml',
success: processXml
});
return false; // <-- important!
});
});
function processXml(responseXML) {
var message = $('message', responseXML).text();
document.getElementById('output').innerHTML = message;
}
</script>
</head>
<body>
<form id="myForm" method="post" action="http://api.flickr.com/services/upload/" enctype="multipart/form-data">
<input type="file" name="photo" id="photo"/>
<input type="text" name="api_key" id="api_key" value="..snip.."/>
<input type="text" name="auth_token" id="auth_token" value="..snip.."/>
<input type="text" name="api_sig" id="api_sig" value="..snip.."/>
<input type="submit" value="Upload"/>
</form>
<div id="output">AJAX response will replace this content.</div>
</body>
</html>
The problem is I get the following text as a response:
<rsp stat="fail">
<err code="100" msg="Invalid API Key (Key not found)" />
</rsp>
even though the file uploads with no problems. This means my div is not updated as it doesnt run the success function. Any one have any ideas.
Thanks