I'm using Webform 3.13 on a Drupal 7.9 install, and I can't figure out how to style the file input type. I've been able to style the other fields through normal css practices (seeing what the HTML entities are named and styling those), but the file input type has an area for the filename and a "Browse" button that don't seem to be in the end HTML, so I don't know how to access them for theming.

I've looked through the template files in the webform module, and while I did find a file.inc, I didn't see anything that pertained to how it displayed (though my understanding of PHP is still rather weak). I read through the theming txt file, and didn't find anything useful there either.

Here's the code that's being generated:

<div id="webform-component-upload-before-image" class="form-item webform-component webform-component-file webform-container-inline">
<label for="edit-submitted-upload-before-image">Upload Before Photo </label>
<input id="edit-upload-before-image" class="form-file" type="file" size="12" name="files[upload_before_image]">
<input type="hidden" value="" name="submitted[upload_before_image][_fid]">
<input type="hidden" name="submitted[upload_before_image][_old]">
</div>

And here's what the output is:link to image

I need to style the button and the file-text areas separately.

Can anyone point me in the right direction? Thanks!

Comments

axxint’s picture

axxint commented
Issue summary: View changes

image link

quicksketch’s picture

quicksketch
he/him
commented

See http://www.quirksmode.org/dom/inputfile.html

Of importance, the file component has been entirely rewritten in the D7 version of the module to use Drupal 7's new "managed_file" element, which gives us AJAX-uploading and progress bars (just like Field module's File fields). That new field will be in the 3.16 version of the module. But even after that update, the upload element is still going to pose the same problem because you have limited CSS control over file elements no matter what.

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Closed (fixed)
quicksketch’s picture

quicksketch
he/him
commented
Issue summary: View changes

image link

stephenrobinson’s picture

stephenrobinson commented

I have read all that crap and got this to work thanks from pinching a couple of javascript lines from the https://drupal.org/project/autoupload project, works when the element is replaced with ajax.

#mycontenttype-node-form div.image-widget-data {
	position: relative;
}

#mycontenttype-node-form div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

#mycontenttype-node-form input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}


(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function(context, settings) {
      var fakeFileUpload = document.createElement('div');
      fakeFileUpload.className = 'fakefile';
      fakeFileUpload.appendChild(document.createElement('input'));
      var image = document.createElement('img');
      image.src='/sites/all/themes/custom/helix/heliximages/upload.png';
      fakeFileUpload.appendChild(image);
      var x = document.getElementsByTagName('input');
      for (var i=0;i<x.length;i++) {
        if (x[i].type != 'file') continue;
        if (x[i].parentNode.className != 'image-widget-data') continue;
        x[i].className = 'file hidden';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].parentNode.appendChild(clone);
        x[i].relatedElement = clone.getElementsByTagName('input')[0];
        x[i].onchange = x[i].onmouseout = function () {
          var fileName = this.value.split("\\"); // containes 2 back slashes in quotes....
          this.relatedElement.value = fileName[fileName.length-1];
        }
      }
    }
  };
})(jQuery);
squarecandy’s picture

squarecandy commented

I added this to my theme's javascript:

(function($) {
  Drupal.behaviors.prettyUpload = {
    attach: function(context, settings) {
      $('.form-managed-file').once('prettyupload', function() {
        
        // hide the standard upload button, but not the remove button that appears after the file gets uploaded
        $('.form-managed-file .form-submit').not('.form-managed-file .form-submit[value="Remove"]').hide();
        
        // hide the ugly "choose file" button, add a placeholder that is CSS friendly
        $('.form-managed-file .form-file').hide().after('<button class="upload-fake">UPLOAD</button>');
        $('.upload-fake').on('click',function(e){
          $(this).prev().click();
          e.preventDefault();
        });
        
        // submit the form when the file is picked.      
        $('form', context).on('change','input.form-file', function() {  
          $(this).next().next().mousedown();
        });
        
      });
    }
  };
})(jQuery);