JSFiddle - React, Tailwind, and code Playground
HTML
<h2>NEW POST</h2>
<label for="new_post_image_upload">Upload new image</label>
<input type="file" id="new_post_image_upload">
<div class="old">--------------------------------------- old post ---------------------------</div>
<div class="post" data-id="158">
<h3>POST #158</h3>
<label>Upload new image To the post</label>
<input type="file" class="edit_post_image_upload">
</div>
<div class="post" data-id="159">
<h3>POST #159</h3>
<label>Upload new image To the post</label>
<input type="file" class="edit_post_image_upload">
</div>
<div class="post" data-id="200">
<h3>POST #200</h3>
<label>Upload new image To the post</label>
<input type="file" class="edit_post_image_upload">
</div>
CSS
label {display: block;}
input {margin-bottom: 15px; }
.old { margin: 25px 0px;}
JavaScript
var MyComponent = (function () {
return {
init: function () {
var _this = this;
$input = $('#new_post_image_upload');
$input.myCustomUpload({
// ...
onUploadStart: this.onNewPostUploadStart.bind(this),
onUploadProgress: this.onNewPostUploadProgress.bind(this), //this reference to my object
onUploadError: this.onNewPostUploadError.bind(this),
// ...
});
$uploads_buttons = $('.edit_post_image_upload');
$uploads_buttons.each(function() {
var $upload_button = $(this);
var $post = $upload_button.parents('.post');
$input.myCustomUpload({
// ...
onUploadStart: _this.onEditPostUploadStart.bind(_this, $post),
onUploadProgress: _this.onEditPostUploadProgress.bind(_this, $post),
onUploadError: _this.onEditPostUploadError.bind(_this, $post),
// ...
});
});
},
onNewPostUploadStart: function () { alert(); },
onNewPostUploadProgress: function () { alert(); },
onNewPostUploadError: function () { alert(); },
onEditPostUploadStart: function () { alert(); },
onEditPostUploadProgress: function () { alert(); },
onEditPostUploadError: function () { alert(); },
}
})();
MyComponent.init();