user3594130 user3594130 - 1 year ago 126
jQuery Question

Cloudinary jQuery File Upload - image not uploading after selection

I'm trying to test the Cloudinary Uploader (via jquery and PHP).
I follow the instructions there:

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).

<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>
<script type='text/javascript'>

<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='' name='file' type='file'/> <input type="hidden" name="image_id" id="image_id" />

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?

Answer Source

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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download