wtf form change style on file input

user_10637527 0
Viewed 88

I am using wtf forms with flask to create a form. I have a file input, which is styled so the default button is not shown. How can I dynamically change the style after a file is loaded?

Here is my code:

html:

 <div class="file-upload my-form">
        <img src="https://i.stack.imgur.com/dy62M.png" />
        {{ wtf.form_field(form.file)}}
    </div>

css:

.my-form input {
  margin: 0;
  padding: 0;
  height: 100%;
  opacity: 0;
}
.file-upload {
  margin: 40px auto;
  border: 1px solid #149174;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.file-upload input {
  position: absolute;
  width: 300px;
  height: 600px;
  left: 10px;
  top: 20px;
}

.file-upload img {
  height: 170px;
  width: 170px;
  margin: 60px;
}

how can I change the style on input? or show a label with the file name in the worst case...This is what the input looks like now

flask-wtforms flask python
1 Answers

In the end I dealt with it like this:

function fileCheck() {
    var checked = document.getElementById('file')
    if (checked.value.length > 0) {
        var file_name = checked.value.split(/(\\|\/)/g).pop();
        var re = /(?:\.([^.]+))?$/;
        var ext = re.exec(file_name)[1];
        if (ext != 'pdf') {
            document.getElementById('file-container').style.backgroundColor = '#ca2c2c';
            document.getElementById("file-desc").innerHTML = "File Loaded with illegal extension: " + ext + " !!";
            document.getElementById("final-submit").disabled = true;
        }
        else {
            document.getElementById('file-container').style.backgroundColor = '#149174';
            document.getElementById("file-desc").innerHTML = "File Loaded: " + checked.value.split(/(\\|\/)/g).pop();
            document.getElementById("final-submit").disabled = false;
        }
    }
    else {
        document.getElementById("final-submit").disabled = true;
    }

}

And my html looks like this:

<div class="file-upload my-form" id="file-container">
                <img src="static/images/upload_icon.png" />
                {{ form.file(oninput="fileCheck()") }}
            </div>
user_106375270
Related