I started working on a contact form using filepicker to upload files. Now I've got that part working except for one thing.
This is the little javascript widget to upload the file:
<input type="filepicker" data-fp-apikey="------------------"
onchange="alert(event.fpfile.url)" >
Now the alert displays the url of the uploaded file.
My question is: How do I get this url to be set as a value in a text field?
Thanks in advance
Replace your onchange value of the input tag and add a span for displaying output like in following
<input type="filepicker" data-fp-apikey="------------------"
onchange="displayValue(event)" />
<span id="url"></span>
Add a javascript function like this
function displayValue(event) {
document.getElementById("url").innerHTML=event.fpfile.url;
}
This will display the URL value inside the span element Let me know if it is worked
document.getElementById('attachement').value=event.fpfile.url;First, it is a very bad practice to put your javascript events directly on HTML tags. I would move those out in a javascript file, loaded at the bottom of the HTML page.
Now, here is your solution:
var filePicker = document.getElementById( 'file-picker' ),
fileUrl = document.getElementById( 'file-url' );
filePicker.addEventListener( 'change', function ( e ) {
// is fpfile a method that filepicker
// is adding to events?
fileUrl.value = 'hard coded string'; // e.fpfile.url;
});
var $filePicker = $( '#file-picker-jq' ),
$fileUrl = $( '#file-url-jq' );
$filePicker.on( 'change', function ( e ) {
$fileUrl.val( 'hard coded url' /* e.fpfile.url */ );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Using JavaScript</p>
<input type="file" data-fp-apikey="-------" id="file-picker">
<input type="text" id="file-url">
<p>Using jQuery</p>
<input type="file" data-fp-apikey="-------" id="file-picker-jq">
<input type="text" id="file-url-jq">
If you want to place the url in textbox follow the below..
Slight change from my above answer
Add textbox like in below
<input type="text" id="url" />
In Javascript change like this
function displayValue(event) {
document.getElementById("url").value=event.fpfile.url;
}