I am while using Gravity Forms wordpress wordpress plugin to upload personal files. The shape submission and error handling works because it should. However, I have made some modifications towards the form to be able to style the file input (just added some HTML, CSS, + jQuery). The next CSS places a styled button and area (appears like a area but is really only a div), contained within .upload-fake, within the same horizontal + vertical space because the input, however the input's opacity is placed to , which means you only begin to see the button. The z-index from the input places it on the top of .upload-fake, then when hitting the button or even the area, it triggers the upload button.

Here is a small screenshot from the setup form with styled file input

Relevant HTML + CSS (#input_1_3 may be the file input):

<div class="upload-fake"> 
     <a class="button green yanone">Choose File</a> 
     <div class="file-status">File</div> 
</div>


#input_1_3 {
    width: 100%;
    height: 30px;
    position: relative;
    z-index: 2;
    opacity: 0 !important;
    filter: alpha(opacity=0) !important; 
    -ms-filter: "alpha(opacity=0)" !important;
    -khtml-opacity: 0 !important; 
    -moz-opacity: 0 !important
}

.upload-fake {
    position: relative;
    z-index: 1;
    margin-top: -30px;
    clear: both
}

Furthermore, I am while using following script to create the file title into .file-status. Automatically the written text within the area is "File". This works because it should unless of course there's a validation error.

$('input[type=file]').live("change", function(e){
    var AllowedExtension = ['jpeg', 'jpg'],
        $me = $(this),
        $file = $('.file-status');
        value = $me.val(),
        shortvalue = value.split("\\").pop(),
        allowed = value.split('.').pop().toLowerCase();

    $file.removeClass('error');
    if ($.inArray(allowed, AllowedExtension) == -1) {
        $file.text('only JPG or JPEG allowed').addClass('error');
    } else {
        if(shortvalue.length >= 30) {shortvalue = shortvalue.substr(0,27) + '...';}
        $file.text(shortvalue);
    }
});

Gravity forms reloads my HTML to it's original condition (excluding the modified text in the above jQuery script), therefore the text within .upload-fake .file-status will get totally reset to "file" even when personal files continues to be selected and was written in to the area before submission.

I'd like a method to perform the following:

  1. Keep file input value inside a variable before submission
  2. If there's a mistake, totally reset the need for the file input to that particular variable which was set before submission

I have attempted utilizing a $.ajaxError(function(){ ... }) however it does not even appear to obtain triggered once the form produces a mistake.

Anybody have knowledge about this or ideas?!