I am trying to make it so when you click on a particular div, it triggers an input button to open up the uploadcare widget.
Here is the HTML in question
<div class="col-md-6 image-preview-single">
<img src="" alt="" class="img-responsive card-shadow hidden">
<div id="logo-upload" class="add-new-short add-new-home-realtor card-shadow-mini btn-file uploader-homicity" style="display:block;text-decoration:none; cursor: pointer;">
<i class="fa fa-photo"/>
<input type="hidden" role="uploadcare-uploader" name="logo" data-upload-url-base="" data-images-only="true" data-crop="150x150" data-clearable="true" id="logo-input">
<div class="uploadcare-widget uploadcare-widget-option-clearable uploadcare-widget-status-ready" data-status="ready">
<div class="uploadcare-widget-dragndrop-area">
Drop a file here
</div>
<div class="uploadcare-widget-status uploadcare-widget-circle uploadcare-widget-circle--canvas">
<canvas width="56" height="56"/>
</div>
<div class="uploadcare-widget-text">
</div>
<div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-open">Choose an image</div>
<div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-cancel">Cancel</div>
<div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-remove">Remove</div>
</div>
</div>
And Jquery in question
$( '#logo-upload' ).on( 'click', function() {
$('input#logo-input').click();
});
And this is the console error
Uncaught RangeError: Maximum call stack size exceeded
at RegExp.exec (<anonymous>)
at n.fn.init (jquery.min.js:2)
at n (jquery.min.js:2)
at HTMLDivElement.<anonymous> (uploadcare.js:72)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
at HTMLInputElement.<anonymous> (jquery.min.js:4)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
What am I missing on this?
Thanks
You need to add also this event on input click:
$('input#logo-input').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
...your code
});
You need to stop propagation because you create infinite loop. When you trigger click on input, this input is inside logo-upload
div and click on input is propagate to this container and this create infinite loop.
Two options:
Use a <label>
to activate the input with just html:
<label for="yourId">Click here<label> <input id="yourId" type="text" />
Use focus()
instead of click()
with stopPropagation()
and stopPropagation()
:
$('#logo-upload' ).on( 'click', function(e) { e.preventDefault(); e.stopPropagation(); $('input#logo-input').focus(); });
Ok,
so you want to open Uploadcare dialog , not a widget .
First, remove all the widget's HTML code from your page, it is added by library and should be in served document. Second, use the following code
$('#logo-upload').on('click', function() {
uploadcare.Widget(input_selector).openDialog();
});
just do this.
var inputSP = input.click(function (e) { e.stopPropagation(); });
dropper.on('click', function (e) {
e.stopPropagation();
// here we first stop propagation then make a call to click event
inputSP;
input.click();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.