Is there a way to enable my users to import both local and remote files using just one input field?
A possible solution, inspired by Stackoverflow, is to implement tabs:
Another approach could be using radio buttons like this:
<style>
.displayNone {
display:none;
}
</style>
<form action="test.php">
File type:
<input id="radio-url" name="type" type="radio" checked value="url" /> URL
<input id="radio-file" name="type" type="radio" value="file" /> File
<div id="url">
<input name="url" type="text" />
</div>
<div id="file" class="displayNone">
<input name="file" type="file" />
</div>
<input type="submit" value="Send" />
</form>
<script type="text/javascript">
$('#radio-url').click(function() {
$('#url').removeClass('displayNone');
$('#file').addClass('displayNone');
});
$('#radio-file').click(function() {
$('#file').removeClass('displayNone');
$('#url').addClass('displayNone');
});
</script>
This setup provides a switchable feature:
But how can I implement such a versatile field?
Please note that the method of handling remote file hosting is not a primary concern for this question.