403 forbidden while uploading image via AJAX

Question

I am trying to find a solution to my problem, while I am trying to upload an image via AJAX.

I am using this code:

document.getElementById('file').addEventListener('change', function(e) {
        var file = this.files[0];
        console.log(file);
        var xhr = new XMLHttpRequest();
        (xhr.upload || xhr).addEventListener('progress', function(e) {
            var done = e.position || e.loaded
            var total = e.totalSize || e.total;
            console.log('xhr progress: ' + Math.round(done/total*100) + '%');
        });
        xhr.addEventListener('load', function(e) {
            console.log('xhr upload complete', e, this.responseText);
        });
        xhr.open('post', 'http://webpage.com/images', true);
        var data = new FormData;
        data.append('file', file);
        xhr.send(data);
    });

I found it here: jQuery Upload Progress and AJAX file upload

by @Rudie

I am getting 403 forbidden error and tried everything.. I am using opencart MVC archritecture to build my custom dashboard.. My website is hosted at goddady i) I do not have any .htaccess file on this folder ii) there is an option at cpanel of godaddy "hotlink protextion", I have also placed the URL in there! (http://webpage.com/images) iii) tried 777 as folder permission

but still same error.. I think this is the most appropriate code to my solution.. Any suggestions? what I am doing wrong?

Answer 1

I found my solution... I have also changed the above code actually.. 1. First of all, inside the image folder that I have, I have created a HTML file called index.html This is very important in order to avoid errors that is type of: No matching DirectoryIndex (index.html.var,index.htm,index.html,index.xhtml.. ..e.t.c.). I found this error through error log file of my hosting provider (goddady), and here is the article that made me to understood and gave me mre information to found it:

https://www.liquidweb.com/kb/apache-error-no-matching-directoryindex-index-html-found-solved/

Article says: "...meaning that Apache will only look for directory index files that are named index.html"

That solved my problem!

I have also changed my code in order to upload images through ajax, using openCart architecture, as I mentioned in another question I have made here in stackoverflow. you could find it here upload image file through ajax and php , in case someone stack on the same problem