0

I'm trying to test the Cloudinary Uploader (via jquery and PHP). I follow the instructions there: http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser

I'm interested to make it work as browser uploading (not server side).

My final HTML/script text is the following (I put some XXXX).

<html>
        <head>
            <title></title>
            <script src="js/jquery-3.1.1.min.js"></script>
            <script src='js/jquery.ui.widget.js' type='text/javascript'></script>
            <script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
            <script src='js/jquery.fileupload.js' type='text/javascript'></script>
            <script src='js/jquery.cloudinary.js' type='text/javascript'></script>
        </head>
<body>
<script type='text/javascript'>
$.cloudinary.config({"api_key":"XXXXX","cloud_name":"XXXXX"});
</script>

<form action="uploaded.php" method="post">
      <input class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/>    <input type="hidden" name="image_id" id="image_id" />
</form>
</body>
</html>

I just click the "Browse..." button and select a file, but nothing happens. I have also the Firefox Console ON, but also I don't see any action.

As I understand, the form should automatically submit after the selection of the file. Right? If not, what exact should I do to submit the file to Cloudinary?

What escapes me?

user3594130
  • 27
  • 1
  • 7

2 Answers2

0

On file input append this:

onchange="this.form.submit();"

Change this line of code:

<form action="uploaded.php" method="post">
      <input class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/>    <input type="hidden" name="image_id" id="image_id" />
</form>

to:

<form action="uploaded.php" method="post">
      <input onchange="this.form.submit();" class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/>    <input type="hidden" name="image_id" id="image_id" />
</form>
Ultrazz008
  • 1,678
  • 1
  • 13
  • 26
  • The file input is builded by the integrated to Cloudinary, PHP function: $cors_location)); ?> Also the uploaded.php was on their example, it has no value on my case. – user3594130 Oct 30 '16 at 15:28
0

You have to initialize the input field as well. Try adding your code the following:

$('.cloudinary-fileupload').cloudinary_fileupload();

Make sure that this line is loaded last, so either put it at the end of the HTML or put it in a $( document ).ready() block.

Roee Ben-Ari
  • 600
  • 3
  • 12