Hide file form field behind image so it will maybe work with IE...

This commit is contained in:
Thomas Tanghus 2012-07-15 12:20:26 +02:00
parent 48521fcfaa
commit 8b49e304e0
3 changed files with 10 additions and 12 deletions

View file

@ -14,7 +14,7 @@
#bottomcontrols { padding: 0; bottom:0px; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
#bottomcontrols img { margin-top: 0.35em; }
#uploadprogressbar { display: none; padding: 0; bottom: 3em; height:2em; width: 20em; margin:0; background:#eee; border:1px solid #ccc; position:fixed; }
#contacts_newcontact { float: left; margin: 0.2em 0 0 1em; }
#contacts_newcontact, #contacts_import, #chooseaddressbook { float: left; margin: 0.2em 0 0 1em; border: 0 none; border-radius: 0; -moz-box-shadow: none; box-shadow: none; outline: 0 none; }
#chooseaddressbook { float: right; margin: 0.2em 1em 0 0; }
#actionbar { position: relative; clear: both; height: 30px;}
#contacts_deletecard {position:relative; float:left; background:url('%webroot%/core/img/actions/delete.svg') no-repeat center; }
@ -111,7 +111,7 @@ dl.addresscard .action { float: right; }
#file_upload_form { width: 0; height: 0; }
#file_upload_target, #import_upload_target, #crop_target { display:none; }
#file_upload_start, #import_upload_start { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; z-index:1001; width:0; height:0;}
#import_upload_start { width: 16px; height: 16px; margin: 0 0 0 0; }
#import_upload_start { width: 20px; height: 20px; margin: 0 0 -24px 0; padding: 0;}
input[type="checkbox"] { width: 20px; height: 20px; vertical-align: bottom; }
.big { font-weight:bold; font-size:1.2em; }
.huge { font-weight:bold; font-size:1.5em; }

View file

@ -1704,12 +1704,9 @@ $(document).ready(function(){
var uploadingFiles = {}, numfiles = 0, uploadedfiles = 0, retries = 0;
var aid;
$('#contacts_import').click(function() { // TODO: Trick IE by hiding fileupload behind button.
$('#import_upload_start').click();
return false;
});
$('#import_upload_start').fileupload({
dropZone: $('#contacts'), // restrict dropZone to contacts list.
acceptFileTypes: /^text\/(directory|vcard|x-vcard)$/i,
add: function(e, data) {
var files = data.files;
var totalSize=0;
@ -1759,6 +1756,7 @@ $(document).ready(function(){
return false;
})
.error(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
Contacts.UI.notify({message:errorThrown + ': ' + textStatus,});
});
uploadingFiles[fileName] = jqXHR;

View file

@ -11,13 +11,13 @@
</div>
<div id="uploadprogressbar"></div>
<div id="bottomcontrols">
<form>
<button class="svg" id="contacts_newcontact" title="<?php echo $l->t('Add Contact'); ?>"><img class="svg" src="<?php echo OCP\Util::imagePath('contacts', 'contact-new.svg'); ?>" alt="<?php echo $l->t('Add Contact'); ?>" /></button>
<button class="svg" id="contacts_import" title="<?php echo $l->t('Import'); ?>"><img class="svg" src="core/img/actions/upload.svg" alt="<?php echo $l->t('Import'); ?>" /></button>
<button class="svg" id="chooseaddressbook" title="<?php echo $l->t('Addressbooks'); ?>"><img class="svg" src="core/img/actions/settings.svg" alt="<?php echo $l->t('Addressbooks'); ?>" /></button>
</form>
<form id="import_upload_form" action="<?php echo OCP\Util::linkTo('contacts', 'ajax/uploadimport.php'); ?>" method="post" enctype="multipart/form-data" target="import_upload_target">
<input class="float" id="import_upload_start" type="file" accept="text/*" name="importfile" /></a>
<button class="svg" id="contacts_newcontact" title="<?php echo $l->t('Add Contact'); ?>"><img class="svg" src="<?php echo OCP\Util::imagePath('contacts', 'contact-new.svg'); ?>" alt="<?php echo $l->t('Add Contact'); ?>" /></button>
<span class="svg" id="contacts_import" title="<?php echo $l->t('Import'); ?>">
<input class="float" id="import_upload_start" type="file" accept="text/directory,text/vcard,text/x-vcard" name="importfile" />
<img class="svg" src="core/img/actions/upload.svg" alt="<?php echo $l->t('Import'); ?>" />
</span>
<button class="svg" id="chooseaddressbook" title="<?php echo $l->t('Addressbooks'); ?>"><img class="svg" src="core/img/actions/settings.svg" alt="<?php echo $l->t('Addressbooks'); ?>" /></button>
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_['uploadMaxFilesize'] ?>" id="max_upload">
</form>
<iframe name="import_upload_target" id='import_upload_target' src=""></iframe>