2

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?

Dr Upvote
  • 8,023
  • 24
  • 91
  • 204

1 Answers1

2

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'.

Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
  • You will have to show the file selected in a label rather than the file input, as there are security rules about setting it dynamically. See http://stackoverflow.com/questions/1017224/dynamically-set-value-of-a-file-input – Dijkgraaf Jul 28 '15 at 20:24
  • Thanks, this just helped me out a lot. – Lyrical.me Jun 22 '17 at 20:08
  • @Gordon Gekko Actually - when I do this, the HTML change wipes out the entire contents of the label, so this: "" becomes this: "" and my file doesn't get sent. – Lyrical.me Jun 23 '17 at 00:35
  • Hey there, create a separate question with your specs and I'll see if I can solve it for you ;) – Dr Upvote Jun 23 '17 at 15:11