Javascript - How to check if a typed image URL really exists

Question

So basically I'm letting the user upload a picture to my website**(By typing an URL)**, which will be saved in my database under his name. Although, I don't want anybody to upload an unvalid URL, which will show an empty box.

The problem is that I don't know how to not submit the form in a case of fake image URL, so that it will show an alert(from the Javascript probably) and not continue to savings it in the databse.

Can anybody help me please? Trying for ages.

The image text:

    <p style="font-size:20px; font-family:Arial; font-weight:800;">URL to presented Image: 
</p><input type="text" name="image" id="image" class="URLs" value="http://" />

The submit button:

    <p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" 
value="Submit Details"/></p>

What do I need to add to these inputs? And what do I need to add to the Javascript?

Thanks in advance!

What ever checking you want to do should mainly be done server-side. The client can send you what ever bogus data it wants. Sure, Javascript notifying a user of faulty input is nice, but in the end of the day it does nothing to defend your system. — Etheryte, Jul 04 '14 at 15:40
you said you have been `Trying for ages` , trying what? How do we know what attempts have been made? — charlietfl, Jul 04 '14 at 15:42
you can do a nice first client check (doesn't avoid server side confirmation) by doing a GET for the image and checking trivial stuff like size and content-type. It could still be an invalid file, but you probably can show the user a nice error before sending the request to the server with a few line of codes. — bitoiu, Jul 04 '14 at 15:43
I know you are asking for JavaScript. However, If you want to do that on server side with PHP you can have a look this answer: http://stackoverflow.com/questions/2280394/how-can-i-check-if-a-url-exists-via-php — John Skoumbourdis, Jul 04 '14 at 15:56

score 2 · Accepted Answer · answered Jul 04 '14 at 15:52

2

Have a hidden <img> tag that loads the URL.

Use the onerror handler to report back to you if the image DIDN'T exist.
Use the onload handler to report back to you if the image DID exist.

HTML:

URL: <input type="text" id="url" name="url" />
<button type="button" onclick="test()">Test</button>
<img style="display: none" id="image" onerror="errorCallback()" onload="loadCallback()" />

JavaScript (easily converted to jQuery if you want to use that):

var test = function () {
  document.getElementById('image').src = document.getElementById('url').value;
}

var errorCallback = function () {
  alert('Image did not exist');
}

var loadCallback = function () {
  alert('Image existed');
}

http://jsfiddle.net/7hTMu/1/

answered Jul 04 '14 at 15:52

Mike

4,071
21
36

You do not need a hidden img tag. The created image object in Javascript is null, if the requested image does not exists. – Reporter Jul 04 '14 at 15:56
That works for me pretty good, thank you for that. Although, what I need is the Javascript to not allow me to procceed after pressing the submit button, by returning false to it or even better, by ruterning the alert when submit is pressed, and then not allow me. How do I do that? – Dan Brooks Jul 04 '14 at 16:27

score 0 · Answer 2 · answered Jul 04 '14 at 15:55

A simple solution to your problem is checking if the image loading errors, as:

document.getElementById([your_form_id]).onsubmit = function(ev)
{

    var file_path = document.getElementById([your_file_element_id]).value;
    var img = document.createElement('img');
    img.setAttribute('src', file_path);
    img.onerror = function()
    {
        window.alert("Not correct file path");
        ev.preventDefault();
    }
}

Fiddle: http://jsfiddle.net/5GNxt/

Bear in mind however that such approach will not really work - what you really need to do is server side check. If you're using PHP, checking for existence of file is easy using: get_headers function. All you need to do then is check if it's an image - by using one of imagecreatefrom functions. Either way - need some more info about server side language to really suggest anything more.

hex494D49 · Answer 3 · 2014-07-04T17:11:40.753

This function will check if the file (url) exists.

EDIT However, don't use this function since it doesn't work always because of the same-origin policy restricts which limits how a document or script loaded from one origin can interact with a resource from another origin. Instead, use the function provided by @eithedog.

var file_exists = function(url){
    var xhr = new XMLHttpRequest();
    xhr.open("HEAD", url, false);
    xhr.send();
    return (xhr.status != 404);
}

var url = document.getElementById('id-of-your-element').value;

if(file_exists(url)){
    console.log("This is fine");
}else{
    console.log("I can't reach that file");
}

Or use something like this

var img_exists = function(url){
    var img = new Image();
    img.onload = function() {
        console.log("Image exists");
    };
    img.onerror = function(){
        console.log("Image doesn't exist or an error has occurred");
    };        
    img.src = url;
}

Hey, thanks. Could you please tell me what to write in the input? I mean, how do I send the url to the fuction? — Dan Brooks, Jul 04 '14 at 16:07

Javascript - How to check if a typed image URL really exists

3 Answers3