2

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!

wazz
  • 4,057
  • 5
  • 18
  • 32
Gianluca
  • 566
  • 1
  • 9
  • Does this answer your question? [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) – Justinas May 24 '21 at 06:15
  • have you tried document.getElementById('url').src = result_url for the image element? – Habib Mhamadi May 24 '21 at 06:16
  • @HabibMhamadi yes, I receive the image url like that, but I cannot display it. How do I take that image url, and then put it on screen? – Gianluca May 24 '21 at 15:30
  • Create an image element in your HTML. and in JavaScript when you received the image URL, you can update the src of the image with that. See my above comment – Habib Mhamadi May 25 '21 at 02:33

0 Answers0