chrome - Forums

qu

quantz 02 Jan, 2011

Can someone help me with the following problem. On my site http://www.plantennamen.nlyou will see a contact form. It works well but if you upload a photo the name of the file isn,t visible with chrome. It is visible with IE and Firefox. I use the standard formcode as below. Which code I have to chance to look it well in chrome, IE and Firefox?

<div class="form_item">
  <div class="form_element cf_textbox ">
    <label class="cf_label">Bestand toevoegen</label>
    <input class="cf_inputbox" max length="50"span  size="30" id="file_1" name="file_1" type="file" />

Gr

GreyHead 02 Jan, 2011

Hi quantz,

This seems to be a WebKit design feature, nothing directly to do with ChronoForms.

Bob

qu

quantz 03 Jan, 2011

Good morning,

What do you mean with "WebKit design"?

Regards, Maarten

Gr

GreyHead 03 Jan, 2011

Hi quantz,

I mean that the browsers that use the Webkit browser engine like Safari and Chrome show file uploads without the input box.

Bob

qu

quantz 06 Jan, 2011

I assume I can't do anything about it? 😟

regards, Maarten van der Veer

Gr

GreyHead 06 Jan, 2011

Hi quantz,

Not with two lines of CSS :-( There are other JavaScript file uploaded boxes that you could possibly use if it's really important.

Bob

qu

quantz 10 Jan, 2011

Good morning,

I have thought a few days about it and I think it's not only my problem. A form with the possibility to upload files is very common and Google chrome is very popular. So my conclusion is that I can't imagine I am the only one so I want to insert these java script rules in my css (if you have them)

Regards, Maarten

Gr

GreyHead 10 Jan, 2011

Hi Maarten,

Sorry, I don't have any instant answer for you. If you Google you will find scripts; there's also a thread here from a few months back. When you get something working please let us know.

Bob

aq

aquamkd 16 Jan, 2011

I seem to have the same problem with my page.Is there anyone that can help me with this...please write me a message or post any solution here.
Thanks in advance.

sh

shppotta 02 Feb, 2011

Hi, everybody
I have the solution, or..... it works for me:

You can test this file:

<html>
<head>

<style>

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);
*filter:alpha(opacity: 0);
_filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:200px
}
/*
.button{background:url(upload.png); height:25px; border:0px solid #7f7f7f; font-weight:bold; padding:4px 2px 5px 2px; min-width:58px; outline:none; width:58px}
*/
</style> 
<script type="text/javascript">       
function setFileNameFromPath(path)
{
document.forms[0].elements['filename'].value = value = path.substr(path.lastIndexOf('\\') + 1);
//var oas = new ActiveXObject("Scripting.FileSystemObject");
//var d = document.a.b.value;
//var e = oas.getFile(d);
//var f = e.size;
//alert(f + " bytes");
}   
</script>
</head>
<body>   
<form name="a">

<div class="fileinputs">
<input type="file" onchange="setFileNameFromPath(this.value);" name="b" class="file" />
    <div class="fakefile">
<input type="text" name="filename" style="width:150px;" />
<input type="button" class="art-button" />
    </div>
</div>

</form>
</body>
</html>

Put the css code in the "CSS style" area and the javascript code in the "Form Javascript" area of your chronoform without style and scripts tag. Then put the html code in "Form HTML" area and you'll see good the file upload box in every browsers.

Regards

qu

quantz 15 Feb, 2011

Good evening,

Thank you all for the thinking of my problem. I have tried to copy and past the code above but it didn't work. The final solution came from my son (13 years old!!).
Just insert one css rool

.upload {color:#78ac00}

(of couse the color code can be chanced) and insert one code in the html part of the form code

class="upload"

like this:

<input class="upload" class="cf_inputbox" max length="150" size="30"  id="file_1" name="file_1" type="file"/>

. That was all. You can see it on http://www.plantennamen.info.

Regards, Maarten