PDA

View Full Version : Async. File Uploads with Safari



tbarstow
4 Jun 2007, 12:30 PM
Hi,

I'm trying to develop a solution that I can apply to ANY form to copy a couple of file inputs into a hidden div and upload the files asynchronously and separately from the rest of the form. I've got something that works in Firefox and IE (6 and 7), but it breaks in Safari.

Here's my prototype:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>clonenode</title>
<link type="text/css" rel="stylesheet" href="../ext/current/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/current/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext/current/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext/current/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.fly('click-to-submit').on('click',function(evt){
evt.stopEvent();
var fileSubmitForm = Ext.DomHelper.append('file-submit',{
tag: 'form',
name: 'file-submit-form',
action: 'clonenode.php',
enctype: 'multipart/form-data'
}, true);
fileSubmitForm.appendChild('file-input');
Ext.fly('file-submit-response').getUpdateManager().formUpdate(fileSubmitForm);
});
});
</script>
</head>

<body>

<form name="file-form">
<input type="file" id="file-input" name="file-upload" />
</form>

<a href='#' id="click-to-submit">Click to submit</a>

<div id="file-submit" />

<div id="file-submit-response" />

</body>
</html>


clonenode.php is simply:



<pre>
<?php print_r($_FILES); ?>
</pre>


Safari simply does not upload a file. I realize this is probably a YUI problem, I'm just curious if anyone else here has run into it.

A couple of notes:

- including the hidden upload form in the original markup does not fix the problem
- because of another bug, safari will just display "Loading" forever when you click the submit link - ignore that and switch the print_r to an error_log and you will see the problem - $_FILES is an empty array

Does anyone have any ideas on this? Note that because debug versions of the adapters are not provided, it's tough to debug this. Any tips on that would be appreciated as well.

Thanks!
Taylor

jbowman
4 Jun 2007, 3:39 PM
Ext has support for file uploads, yui only for version 1, though if I understood Jack right, it may support all versions with the 1.1 beta.