So I am allowing the users to upload there images through cloudinary, programmatically. It is working, but I basically want the user to select the image from their local device, and then once they select it, it should show up on the page before submit. It is pretty standard across most sites and apps, but I cannot figure out how to do it. I can only display the image url it produces, not actually display the image.
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'xxx',
uploadPreset: 'ld3l7evv'
},
(error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
console.log(result.info.secure_url)
var result_url = result.info.secure_url;
console.log("result url is " + result_url)
document.getElementById("url").value = result_url;
}
})
document.getElementById("upload_widget").addEventListener("click", function() {
myWidget.open();
}, false);
</script>
then I am displaying the url like so:
<input type="text" name="url" id="url" value="" required data-readonly>
it is an input, but I need it to be an image. and yes, I tried with an image!