Receiving confusing error while trying to upload to Cloudinary

Answered

Comments

3 comments

  • Avatar
    Igor Chuprov

    Ok now I feel stupid and a little sheepish. It seems my problem stems more from JS import ordering.

    <script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.ui.widget.js') }}"></script>
    <script type="text/javascript"
    src="{{ asset('assets/vendors/cloudinary/js/jquery.iframe-transport.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.fileupload.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/cloudinary/js/jquery.cloudinary.js') }}"></script>

    This is the order the JS files must be set. And they need to be the first group of JS files within the footer section, especially before the cloudinary JQuery set up.
    Once I did this, it all started working fine without errors.

    0
    Comment actions Permalink
  • Avatar
    kyle Owen
     
    const data = new FormData();
            data.append("file", image);
            data.append("upload_preset", {CloudName});
            data.append("cloud_name", {CloudName});
            const config = {
                headers: { "content-type": "multipart/form-data" },
            };
            Axios.post(
                data,
                config
            )
     
    If i add f_auto and q_auto to Url for image compression this will error will happen
     
     
     Access to XMLHttpRequest at 'https://api.cloudinary.com/v1_1/{CloudName}/image/upload/q_auto' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
     
     
    help me Im Brain dead plsss
     
     
    0
    Comment actions Permalink
  • Avatar
    Aditi Madan

    Hi Kyle,

    The upload endpoint cannot have transformations (including q_auto,f_auto).I would suggest removing the q_auto from the URL and just using `"https://api.cloudinary.com/v1_1/{CloudName}/image/upload/` as the upload endpoint.

    Transformations can be added to the upload preset either as incoming or eager.

    The transformations that don't exist in the preset can be added to the image later after it is uploaded by either using the URL transformation or by simply accessing the URL with the transformation.

    Regards,

    Aditi

    0
    Comment actions Permalink

Please sign in to leave a comment.