www.webdeveloper.com
Results 1 to 7 of 7

Thread: Styling file input

  1. #1
    Join Date
    Dec 2008
    Posts
    102

    Styling file input

    Hi, I am trying to style the upload file input field to match all other fields. I found a js plus css script that will make this happen but in safari it is showing "fakepath". How do I make it just show the file name without the path in safari? Also, I am having trouble making the field box to be longer to match other field. Is that possible? below is the scripts. Thx.

    JS.
    Code:
    var W3CDOM = (document.createElement && document.getElementsByTagName);
    
    function initFileUploads() {
    	if (!W3CDOM) return;
    	var fakeFileUpload = document.createElement('div');
    	fakeFileUpload.className = 'fakefile';
    	fakeFileUpload.appendChild(document.createElement('input'));
    	var image = document.createElement('img');
    	image.src='pix/button_select.gif';
    	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 != 'fileinputs') 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 () {
    			this.relatedElement.value = this.value;
    		}
    	}
    }
    css
    Code:
    div.fileinputs {
    	position: relative;
    }
    
    div.fakefile {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	z-index: 1;
    }
    
    input.file {
    	position: relative;
    	text-align: right;
    	-moz-opacity:0 ;
    	filter:alpha(opacity: 0);
    	opacity: 0;
    	z-index: 2;
    }
    html
    HTML Code:
    <div class="fileinputs">
    	<input type="file" class="file">
    </div>

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    You can use a regular expression to grab the filename from a path.
    Code:
    this.relatedElement.value = this.value.match(/[^\/\\]*$/i)[0];
    To change the width just use the CSS width parameter.
    Code:
    .fakefile input { width: 100px; }
    New to web development or in need of a good reference? Check out the Mozilla Developer Network or W3Schools.

  3. #3
    Join Date
    Dec 2008
    Posts
    102
    Thanks. It works great. Another question. Right now the script will not allow the user to delete the file after uploaded it. Is there a work around that will allow user to delete uploaded file?

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by phpnewbie08 View Post
    Thanks. It works great. Another question. Right now the script will not allow the user to delete the file after uploaded it. Is there a work around that will allow user to delete uploaded file?
    after upload, your server needs to delete the file, it's out of JS's hands at that point...

  5. #5
    Join Date
    Dec 2008
    Posts
    102
    I meant to say after the user selects a file, then decides not to upload it. How do I allow user to delete the file from the input field. In a normal <input type="file"> the user can simply remove the path.

  6. #6
    Join Date
    Dec 2008
    Posts
    102
    any help?

  7. #7
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    You'll have to either replace the file input with a new one or reset the whole form. Another solution would be to move the file input to a temporary form, reset that form, and then move the input back.
    New to web development or in need of a good reference? Check out the Mozilla Developer Network or W3Schools.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles