File upload with text input field so user can enter file path too

Question

I currently have a form where the upload file looks like this:

I would like to make it look like this:

The reason for doing this is because the server already has the files. So I simply want to add the URL in the input field. However, the upload button is important too because we will need to upload files which aren't in the server yet.

How do we best go about this?

I currently have this code:

function wp_custom_attachment() {
    wp_nonce_field(plugin_basename(__FILE__), 'wp_custom_attachment_nonce');
    $html .= '<input type="file" id="wp_custom_attachment" name="wp_custom_attachment" value="" size="25" />';
    echo $html;
}

I tried a method like this but this ended up with a warning:

$html .= '<input type="text" value="" id="wp_custom_attachment" name="wp_custom_attachment" onclick="javascript:document.getElementById(\'file\').click();"><input id="file" type="file" name="img" onchange="ChangeText(this, \'wp_custom_attachment\');"/>';

Warning:

Warning: Illegal string offset 'url' in /path/content.php on line 42

Users must not write any path, simply because security concerns. IMHO you have to re-think your application logic. — Andrew
– Andrew, Commented Nov 11, 2019 at 12:55
Do you trust every user who can login into your Admin Panel? Hope you don't. — Andrew
– Andrew, Commented Nov 11, 2019 at 13:02
Why can't you upload the file and then generate a random hash behind the filename. In this way you will not run into problems of the filename being the same. — Tom Groot
– Tom Groot, Commented Nov 11, 2019 at 13:16

Tom Groot · Accepted Answer · 2019-11-11 14:08:36Z

2

You can do this by using a hidden input of type='file', together with a button and an input of type='text'. To make the button active we add a trigger at the onclick of the button. onchange of the input type='file' we trigger a function changeInput to change the content of the input type='text'.

Which results in the following html:

<input type="text" id="filename" name="filename"><button onclick="document.getElementById('file').click();">Open</button>
<input id="file" type="file" name="file" style="display: none;" onchange="changeInput()" />
<script>
function changeInput(){
  document.getElementById("filename").value = document.getElementById('file').value;
}
</script>

Be aware that this html puts the full path of the file in the type='text' input. When saving the new file, some parsing of the edited filename is required.

answered Nov 11, 2019 at 14:08

Tom Groot

1,1981 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elaine Byene Over a year ago

I resolved it already but this is better. Thank you so much. Accepted it :)

Collectives™ on Stack Overflow

File upload with text input field so user can enter file path too

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related