When using phonegap with iOS, HTTP requests consistently return a status of 0 when accessing local files

Question

When using phonegap with iOS, HTTP requests consistently return a status of 0 when accessing local files

I've encountered an issue while using Phonegap 3.3.0 on iOS. The HTTP request I'm making always returns 0, regardless of whether the file exists or not!

var url = './images/pros/imagefile.png'; 
var http = new XMLHttpRequest(); 
http.open('HEAD', url, false); 
http.send(); 
http.status

Even when trying a fake wrong URL:

var url = 'httpbabla/images/pros/imagefile.pngfkjdqmkfjdmqsl';

or

var url = 'www/images/pros/imagefidddddddle.pngooijijijiojs';

The result remains 0.

Could this be a bug in Phonegap? If not, what is the best way to differentiate between existing local files and nonexistent files using Phonegap on iOS?

Thank you

javascript ios http cordova

Answer 1

Answer №1

To increase your chances of success, consider using an asynchronous request with the onload and onerror handlers. Make sure to include a true parameter as the last argument in the http.open method:

var url = 'file:///does/not/exist.jpg'; 
var http = new XMLHttpRequest(); 
http.open('HEAD', url, true); 
http.onload = function(e){/* Success! File exists; process the response... */};
http.onerror = function(e){/* Failed - file does not exist - handle accordingly... */};
http.send();

After calling http.send, your function will be completed and control will go back to the caller. Any further processing for success or failure should be handled within the onload and onerror callbacks. If you are not familiar with them, take the time to understand Javascript callbacks (and closures) as they are powerful features in the language.

Answer 2

To increase your chances of success, consider using an asynchronous request with the onload and onerror handlers. Make sure to include a true parameter as the last argument in the http.open method:

var url = 'file:///does/not/exist.jpg'; 
var http = new XMLHttpRequest(); 
http.open('HEAD', url, true); 
http.onload = function(e){/* Success! File exists; process the response... */};
http.onerror = function(e){/* Failed - file does not exist - handle accordingly... */};
http.send();

After calling http.send, your function will be completed and control will go back to the caller. Any further processing for success or failure should be handled within the onload and onerror callbacks. If you are not familiar with them, take the time to understand Javascript callbacks (and closures) as they are powerful features in the language.

Answer 3

Answer №2

This is the solution that worked for me:


function CheckUrlValidity(url) {
    if (isPhoneGap && isIOS()) {
        if (url.fileExists()) { //refer to function below
            return true;
        } else {
            return false;
        }
    } else {
        try {
            http = new XMLHttpRequest();
            http.open("HEAD", url, false);
            http.send();
        } catch (err) {
            //alert("An error:" + err.name + "---" + err.message);
        }

        if (http.readyState == 4) {
            console.log("http.status=" + http.status);
            return http.status == 200 || http.status == 0;
        }
    }
}

// check if local file exists for iOS
String.prototype.fileExists = function() {
    filename = this.trim();
    var response = jQuery.ajax({
        url: filename,
        type: 'HEAD',
        async: false
    }).status;
    return (response != "200") ? false : true;
}

Answer 4

This is the solution that worked for me:


function CheckUrlValidity(url) {
    if (isPhoneGap && isIOS()) {
        if (url.fileExists()) { //refer to function below
            return true;
        } else {
            return false;
        }
    } else {
        try {
            http = new XMLHttpRequest();
            http.open("HEAD", url, false);
            http.send();
        } catch (err) {
            //alert("An error:" + err.name + "---" + err.message);
        }

        if (http.readyState == 4) {
            console.log("http.status=" + http.status);
            return http.status == 200 || http.status == 0;
        }
    }
}

// check if local file exists for iOS
String.prototype.fileExists = function() {
    filename = this.trim();
    var response = jQuery.ajax({
        url: filename,
        type: 'HEAD',
        async: false
    }).status;
    return (response != "200") ? false : true;
}

When using phonegap with iOS, HTTP requests consistently return a status of 0 when accessing local files

Answer №1

Answer №2

Similar questions

Tips on how to properly format a DateTime String

Using Strapi to showcase images in a React frontend

JavaScript and CSOM updates cause SharePoint list item properties to disappear

Combining null and decimal validation into a single function in Asp .Net - JavaScript

I am dynamically generating table rows and populating them with data. However, I encountered an issue with retrieving the data by their respective IDs

"Using Jest to specifically test the functionality of returning strings within an object

Loop through an array of objects, then store each one in MongoDB

Sending multiple unique forms with the same structure using JavaScript and Ajax on a single PHP page

Building a local database using the MVC framework concept

Instructions for generating multiple components in React when an array is not at your disposal

Achieve the appearance of table-like alignment without the need for traditional tables

Styling the active selection in nav class with bold attribute in Bootstrap/AngularJs

What is the best way to access the current value and name of a textbox in real-time using

The compatibility between Laravel's @vite('resources/js/app.js') and the froala editor plugin seems to be causing issues

Tips for sending query string parameters to an AJAX request using data

ng-admin fails to identify custom field view

Guide to enclosing selected text within a span tag and positioning a div in relation to it using JavaScript

Encountering issues while running the npm build command due to exporting async functions in React

I am encountering a situation in which the controller file is returning empty data when logging the contents of req

Only certain fields are returned by JQuery's form serialize() method