This will allow you to customize the format when uploading a file in a form
A Pen by Victoria Ruiz Schulze on CodePen.
<div class="field"> | |
<label for="new_file">Using an input field - This will show the filename: </label> | |
<input type="text" name="new_file" value="" size="40" class="file_input_replacement" placeholder="Select file"> | |
<input type="file" name="uploaded_file" class="file_input_with_replacement"> | |
</div> | |
<div class="field"> | |
<label for="new_file">Using a button: </label> | |
<button type="text" class="file_input_replacement">Upload a file here</button> | |
<input type="file" name="uploaded_file" class="file_input_with_replacement"> | |
</div> |
This will allow you to customize the format when uploading a file in a form
A Pen by Victoria Ruiz Schulze on CodePen.
$(function(){ | |
$('.file_input_replacement').click(function(){ | |
//This will make the element with class file_input_replacement launch the select file dialog. | |
var assocInput = $(this).siblings("input[type=file]"); | |
console.log(assocInput); | |
assocInput.click(); | |
}); | |
$('.file_input_with_replacement').change(function(){ | |
//This portion can be used to trigger actions once the file was selected or changed. In this case, if the element triggering the select file dialog is an input, it fills it with the filename | |
var assocInput = $(this).siblings("input.file_input_replacement"); | |
if (assocInput.length() > 0) { | |
var filename = ($(this).val()).replace(/^.*[\\\/]/, ''); | |
assocInput.val(filename); | |
} | |
}); | |
}); |
input.file_input_with_replacement {display: none;} | |
input.file_input_replacement { | |
background: #e2e2e2; | |
padding: 10px; | |
border: none; | |
} | |
button.file_input_replacement {background: #252525; color: #fff; padding: 7px 10px; border-radius: 20px; border: none; } |