Receiving confusing error while trying to upload to Cloudinary

I've been trying to get the cloudinary upload to work.<br/>
Using the sample from the php cloudinary library, it works fine as stand alone and uploads without a problem.<br/>
It's when I move the code into an existing Laravel app I run into a problem.
Namely I get this error in the console:<br/>
<pre>
XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/mycloudinaryname/auto/upload. The request was redirected to 'http://localhost/laravelappfolder/cloudinary_co…=%23%3CSet%3A0x0000000c3691e0%3E&type=upload&version=1457930756&width=1920', which is disallowed for cross-origin requests that require preflight.
</pre>
I've been trying to find something that could point me in the right direction but I can't seem to find anything. It works fine as stand alone, but fails in the laravel app. The code is exactly the same (using the same jquery).<br/>
In my laravel view I have. I'm using the unsigned upload function:

{!! cl_unsigned_image_upload_tag('fileupload', 'repository',
["callback" => $cors_location, 
"public_id"=>"blahblah".time(), 
"html" => ["multiple" => true],
"class" => "form-control"]) 
!!}

$cors_location provides the location to the cors html file that comes with the php library. The location from within laravel is correct.<br/>
I know it's probably something simple that I'm missing but I just can't think of what it could be.<br/>
Here is the JQuery code:<br/>

$(function() {
            $('.cloudinary-fileupload')
                    .fileupload({
                        dropZone: '#file_drop',
                        start: function () {
                            $('.status_value').text('Please wait, starting upload...');
                        },
                        progress: function (e, data) {
                            $('.status_value').text('Please wait, uploading...');
                            var progval = Math.round((data.loaded * 100.0) / data.total);
                            $('#progtext').text(progval+'%');
                            $(".progress-bar").css('width', progval+'%').attr('aria-valuenow', progval);
                        },
                    })
                    .on('cloudinarydone', function (e, data) {

                        $('.status_value').text('Idle');
                        $(".progress-bar").css('width', '0%').attr('aria-valuenow', 0);
                        $.post('{{ $cloud_upcomp }}', data.result);
                        var info = $('<div class="uploaded_info"/>');
                        $(info).append($('<div class="image"/>').append(
                                $.cloudinary.image(data.result.public_id, {
                                    format: data.result.format, width: 150, height: 150, crop: "fill"
                                })
                        ));
                        $('.uploaded_info_holder').append(info);
                    });
        });

$cloud_upcomp is the location of the upload_complete.php file from the cloudinary php library.<br/>
The 'cloudinarydone' event is never fired, as it gives the error from before. But strangely, the image file has been uploaded as I can view the uploaded file in my cloudinary account.<br/>

Here is the HTML generated by the Cloudinary library (namely the <input> tag generated by the function):<br/>

<div class="row">
                            <div class="col-md-6" id="file_drop">
                                <form>
                                <span class="status_value form-label">Awaiting user selection</span>
                                <input class='cloudinary-fileupload' data-cloudinary-field='fileupload' data-form-data='{"timestamp":1458079831,"callback":"http:\/\/localhost\/laravel\/public\/assets\/vendors\/cloudinary\/lib\/cloudinary_cors.html","public_id":"blahblah1458079831","upload_preset":"repository"}' data-url='https://api.cloudinary.com/v1_1/myaccount/auto/upload' multiple='1' name='file' type='file'/>

                                <div class="progress">
                                    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        <span id="progtext" class="progress-text"></span>
                                    </div>
                                </div>
                                </form>
                            </div>
                            <div class="uploaded_info_holder"></div>
                        </div>

I've just overwritten my account name, but the URL has the correct account name when it gets generated by the function.

Igor Chuprov

March 18, 2016 05:09

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.

kyle Owen

November 10, 2020 11:26
Edited

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(

"https://api.cloudinary.com/v1_1/{CloudName}/image/upload/q_auto",

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

Aditi Madan

November 10, 2020 23:41

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

-1

Comments