CODEWITHSUNDEEP
javascriptjqueryajaxasp-classic
Lieutenant Dan
Lieutenant Dan

Reputation: 8264

change label text on file change (custom form upload button)

I just want someway to add a 'state' change so users can tell if their file has been uploaded successfully; prior to customization the default browser button displayed the 'file name' (once file has uploaded) somehow this is lost since customized to meet design needs.

<span class="caption_upload">Upload a photo:</span>

<label class="filebutton">
Select File <span><input name="Text1" type="file" required></span>
</label>

So, I've managed to create a custom file upload button with some CSS hacking (html above, CSS below)

label.filebutton {
  width: 120px;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  text-align: center;
  line-height: 1.9;
  float: right;
  margin-top: -9px;
  color: #999;
}
label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}
.caption_upload {
  margin-left: -65px;
  position: absolute;
  margin-top: 139px;
  color: #3f2a27;
}

Now it resolves as my design -- with a button looking icon with some styles and a 'select file' copy within the button and along side a caption I made 'Upload a photo' the current problem is now that I've down this, I've lost how originally the 'file name' appears upon upload -- so currently there is no way to tell if it's uploaded successfully I would like to have either the background color change to GREEN or / and the 'select a file' text changes to file name? -- any ideas?

Upvotes: 2

Views: 2362

Answers (1)

Lieutenant Dan
Lieutenant Dan

Reputation: 8264

I accomplished this with the below; if anyone else comes across similar situation:

   $("#upload").change(function() {
       $("label.filebutton").html("File Selected");
       $('label.filebutton').css({
       'color' : '#fff',
       'background' : 'green'
    });
  });

It's great -- however still doesn't display the actual 'file name'.

Upvotes: 2

Related Questions