Skip to content

Instantly share code, notes, and snippets.

@RobQuistNL
Created December 19, 2012 14:31
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RobQuistNL/4337047 to your computer and use it in GitHub Desktop.
Save RobQuistNL/4337047 to your computer and use it in GitHub Desktop.
Code to make an invisible file-upload selector, and post it to an iframe, working in Chrome, FireFox AND Internet Explorer 9 Instead of an submit button and file selector, we now have a simple DIV, that, once clicked, opens the file selection screen, and once you have selected a file, uploads it to an iFrame.
<!-- This is just a snippet, be sure to include jQuery (i used 1.8.3)
The <{TAGS}> are my own template parsers' tags. Replace them as you want.
PROBLEM:
When an file-input is opened via a scripted, forced click() event, IE won't let you submit the form.
If you click the file-input via your own mouse (what we don't want), IE will let you submit the form.
Solution (partly thanks to Rudie @ Stackoverflow, http://stackoverflow.com/users/247372/rudie , http://hotblocks.nl/):
Make a label for the input in IE. If you click it, it will force a click on the input field - and IE will accept that (dumbass IE thinks user clicked the input field, hah)
So in that label we'll put our own styled DIV.
Next problem was, this doesn't work in FF. So we made a simple (possible nasty) browser check, and based on the browser we'll show a different button.
Solution is right here. Tested in:
Win 7 x64
FireFox 13.01
Chrome 23.0.1271.97 m
IE9 in regular IE9 mode
More tests / additions to code are MORE than welcome!
-->
<div class="avatar_div"><img id='profilePic' src="<{PROFILE_PICTURE}>" width="199" height="199" /></div>
<form method='POST' action='<{ROOT_URL}>/ajax/new_profile_picture_upload' enctype='multipart/form-data' target='submit-iframe' id='fileform'>
<div id="btnholder"></div>
<script type="text/javascript">
if ($.browser.msie) { //Its ugly but it does the trick.
$("#btnholder").html('<label for="file" ><div class="button_upload">Upload Picture</div></label>');
} else {
$("#btnholder").html('<div class="button_upload" onClick="$(\'#file\').click();">Upload Picture</div>');
}
</script>
<input type="file" class="file" id="file" name="file" value="Upload picture" onchange="submit_form();" /> <!-- Is being removed by CSS -->
<input type="submit" name="submitBtn" id="submitBtn" style="display:none;" />
</form>
<iframe id="submit-iframe" name='submit-iframe' style='display:none;'></iframe>
<script type="text/javascript">
function submit_form() {
document.getElementById("fileform").submit();
window.oldpicture = $('#profilePic').attr('src');
$('#profilePic').attr('src','<{AJAX_LOADER_IMAGE}>');
}
$("#submit-iframe").load(function() {
var myIFrame = document.getElementById('submit-iframe');
var responseText = myIFrame.contentWindow.document.body.innerHTML;
if( responseText.indexOf( "SUCCESS" ) !== -1 ) {
$("#profilePic").attr("src",responseText.replace("SUCCESS", ""));
} else {
if (parseInt(responseText) < 50000) {
alert('Unknown error while uploading image: '+responseText);
}
if (parseInt(responseText) == 50001) {
alert('You are only allowed to upload the following filetypes: JPEG, JPG, PNG, GIF');
}
if (parseInt(responseText) == 50002) {
alert('The file you uploaded was larger than <{MAX_UPLOAD_PROFILE_IMAGE_SIZE}> MB. Try resizing the image.');
}
$('#profilePic').attr('src',window.oldpicture);
}
});
</script>
<?php
//This uses my own framework, but the idea is there.
require "../../application/init.php"; //Autoload everythin'
$login = new Login();
if ($login->isLoggedin()) {
if ($_FILES["file"]["error"] > 0) {
echo "Error: " . $_FILES["file"]["error"] . "<br>";
die;
} else {
if ($_FILES["file"]["type"]!='image/jpeg' && $_FILES["file"]["type"]!='image/jpg' && $_FILES["file"]["type"]!='image/png' && $_FILES["file"]["type"]!='image/gif') {
echo '50001';
die;
}
if (($_FILES["file"]["size"] / 1024)>$GLOBALS["CONFIG"]["MAX_PROFILE_UPLOAD_SIZE"]) {
echo '50002';
die;
}
//Download the avatar and save it in our temporary storage
$tempFile = new tempStorage(file_get_contents($_FILES["file"]["tmp_name"]));
$tempUser = $login->getCurrentUserInfo(); //Fetch our user object
//Generate the new image
$image = new Image();
$image->setOwner($tempUser->getId()); //We're the owner
$image->createImage($tempFile->getFilename()); //Square
$tempFile->destroy(); //Delete the temp file
$tempUser->profilePicId = $image->getId(); //Set this image as our profile picture
$tempUser->save(); //Save
echo 'SUCCESS' . $image->getUrl(480);
die;
}
} else {
echo '401';
die;
}
div.button_upload {
color:white;
text-align:center;
padding-top:15px;
margin-left:33px;
margin-top:2px;
width: 199px;
height: 35px;
background: url('../images/button.png') 0 0 no-repeat;
cursor: pointer;
}
.loaderimage {
width:100px;
margin:0 auto;
margin-top: 100px;
}
#profilePic {
width:199px;
height:199px;
}
input.file {
position: absolute;
left: -9999px;
}
@tbarderas
Copy link

with IE8 doesnt work :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment