Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Valum's file uploader not working over SSL #38

Open
ymmark0 opened this issue Dec 7, 2013 · 1 comment
Open

Valum's file uploader not working over SSL #38

ymmark0 opened this issue Dec 7, 2013 · 1 comment

Comments

@ymmark0
Copy link

ymmark0 commented Dec 7, 2013

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants