I built a photo submission using iframe
. The thing is that how to know if file fails to submit due to newtwork delay or disconnection for example. Is there an event for such a thing? or just if it takes too long I just cancel it if there is a way to cancel it. I know when it is done as the reply from server is a javascript function that gets loaded as recevied but what to do if I do not receive anything!
<form action="iframe.php" target="my-iframe" method="post">
<label for="text">Some text:</label>
<input type="file" name="file" id="file">
<input type="submit" value="post">
</form>
<iframe name="my-iframe" src="iframe.php"></iframe>
<script>
function img_upload_done(opn,img,photo_number){ // opn holds boolen if img uploaded succefully
//do something
}
</script>
<?php
//getting the directory of the this file
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$name = rand (100,1000);
$result = 0;
$filename=$_FILES['file']['name'];
$ext = pathinfo($filename, PATHINFO_EXTENSION) ;
// setting up the directory of the file uploaded
$target_path = $destination_path . $name .".". $ext;
//making sure the file has been uploaded in the specified directory
if(@move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(0);
?>
<script language="javascript" type="text/javascript">
window.top.window.img_upload_done(<?php echo $result.",\"".$name .".". $ext."\",".$_POST["photo-number"]; ?>);
</script>
<?php
//This function separates the extension from the rest of the file name and returns it
function findexts ($filename) {
$filename = strtolower($filename) ;
$exts = split("[/\\.]", $filename) ;
$n = count($exts)-1;
$exts = $exts[$n];
return $exts;
}
//This applies the function to our file
?>
You could make use of the window.postMessage() function, to send a failure or success message to your page.
It could look something like this in your main page:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
if (origin !== "http://www.your-url.com")
return;
// ...
}
And in the iFrame you would do something like this, after the file is saved (or it failed):
// where to send messages with postMessage
var target_origin = 'http://www.your-url.com';
parent.postMessage( {'success': 'true'}, target_origin );
More infos: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage