Valums-File-Uploader / file-uploader

Multiple file upload plugin for HTML forms. User-friendly progress-bar + uploads via drag-and-drop. Coded in Javascript + AJAX, not Flash. Server-side PHP, Java, & ColdFusion examples included.
http://valums-file-uploader.github.com/file-uploader/
Other
320 stars 141 forks source link

Valum's file uploader not working over SSL #38

Open ymmark0 opened 10 years ago

ymmark0 commented 10 years ago

We have been using Valum's file uploader on the pages of our site served as HTTP, with no problems. We now want to use it on our HTTPS registration page, to allow people to upload a profile pic for their account. The documentation Valum's file uploader says it works with HTTPS, but it seems to be making the AJAX request via HTTP and we're getting the following errors in the console:

OPTIONS http://flooting.com/lib/upload?label=&creationdate=&format=json&type=160x160&session=015b57b5958a7e5141234788ca480b63&collection=&qqfile=IMG_0298.JPG No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://flooting.com' is therefore not allowed access.

XMLHttpRequest cannot load http://flooting.com/lib/upload?label=&creationdate=&format=json&type=160x160&session=015b57b5958a7e5141234788ca480b63&collection=&qqfile=IMG_0298.JPG. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://flooting.com' is therefore not allowed access.

Is there a parameter we can set to make the uploader send the request via HTTPS (we've not been able to find one).

We've tried setting action to //lib/upload (two slashes) That does force the request to https but we lose the domain from the path. i.e. We see a request to https://lib/upload?[params] which doesn't work.

Our code is as follows;

    var uploader = new qq.FileUploader({
        // pass the dom node (ex. $(selector)[0] for jQuery users)
        element: [% IF element %][% element %][% ELSE %]document.getElementById('file-uploader')[% END %],
        // path to server-side upload script
        action: '/lib/upload',
        debug: true,
        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
        sizeLimit: 10485760, // max size 10Mb  
        minSizeLimit: 100, 
        showMessage: function(message){ alert(message); },
        onError: function(id, fileName, errorReason) {
            if (errorReason.indexOf("code #6") != -1) {
                warn('No space left');
                alert('Error: You have no space for images left. Please contact support.');
            }
        },
        onComplete: function(id, fileName, responseJSON){
            if( ! responseJSON.filesdata || ! responseJSON.filesdata[0].url)
            {
                console.log(responseJSON);
                //ngn_dump(responseJSON, true, 'responseJSON');
                alert('Error: didn\'t get image url from server.');
            }
            else
            {
                console.log(responseJSON);
                $('#[% id %]').attr('src',responseJSON.filesdata[0].url);
                [% IF fieldname %]
                $('#[% fieldname %]').val(responseJSON.filesdata[0].url);
                [% END %]
            }
        },
        params: {
            label:'',
            creationdate:'',
            format:'json',
            type:"[% rep_type %]",
            session:"[% IF y; y.session.id; ELSE; c.sessionid; END; %]",                
            collection:"[% collectionId || story.id %]",
        }
    });
subdesign commented 4 years ago

Same here. I get Upload failed back from plugin, with "500" error