Develop Reference

jQuery not using selected element

I am building a custom WordPress plugin that requires me to build into it a custom media library button that lets a user associate an image with a certain option for a post. The user needs to be able to add the elements dynamically, so there are multiple options, i.e. multiple medial library buttons.
The issue that I am running into is that if I have 5 options with five buttons, setting the first image works fine. But if I click buttons 2-5 to set the images for the additional options, they are not getting set but the first option is changing.
It's almost like once the initial element is set on click, then it never changes.
Here is a sample of the HTML (the generic.jpg is the default image before the image is set from the library):
<div class="image-preview-wrapper">
<img class="image-preview" src="https://WEBSITE/wp-content/plugins/atas_spec_writer/admin/assets/generic.jpg" style="max-height: 100px; width: 100px;" width="100" height="100">
<input type="button" class="button upload_image_button" value="Add Image">
<input type="hidden" name="options[section_4][3][img_id]" class="image_attachment_id" value="">
</div>
Here is the JS code:
// Uploading files
var j = jQuery;
var file_frame;
j(document).on('click', '.upload_image_button', function(event) {
var el = j(this);
event.preventDefault();
// If the media frame already exists, reopen it.
if (file_frame) {
// Open frame
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select a image to upload',
button: {
text: 'Use this image',
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected, run a callback.
file_frame.on('select', function() {
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
el.siblings('.image-preview').attr('src', attachment.url);
el.siblings('.image_attachment_id').val(attachment.id);
});
// Finally, open the modal
file_frame.open();
// Restore the main ID when the add media button is pressed
j('a.add_media').on('click', function() {
wp.media.model.settings.post.id = wp_media_post_id;
});
I've switched up using j(this), event.target, and they both seem to stick with the first element clicked.
I originally thought that it might just go to the first element in the DOM that matches what is clicked, but if I add 2 options with images and then come back two days later and add two more, the click event sticks with the first element that was set that day, not the first element in the DOM.
So I am completely at a loss......
Any help is much appreciated!!

Looks like once you open a frame file_frame variable will never be nullified or resetted.
I guess problem lies in the following return statement:
if (file_frame) {
// Open frame
file_frame.open();
return;
}

Submitting form hidden field or canvas with with javascript and.or ajax?

I have a canvas I would like to save along with a form submit. The way I currently have seems to only be saving a blank canvas. Although, from the code you will see, I am able to save the canvas successfully with a save button...
Code:
View:
...
<%= ff.hidden_field :print_file, id: "canvascontent" %>
<a id="lnkDownload" title="Save">Save</a> #this is the button that saves form
<canvas id="fCanvas"></canvas>
...
<%= f.submit "Save" %>
Javascript:
#canvas/fabric js code here
...
#save button code
var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);
function saveImage(e) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'saved_image.png'
};
#form submit save attached to hidden field
var url = canvas.toDataURL('image/png')
$("#canvascontent").val(url);
What the hidden_field passes through on form submit is a base64 image. Unfortunately, it's blank.
Is there a way I can save the canvas on form submit that will pass the canvas through the same way the save button does?
I can only assume the canvas data is being left behind before it's able to be sent to the form submit.
Any ideas on how I can get this to work?
Attempts to triggering toDataURL:
<a id="setDownload" title="Save">Save</a>
var imageSetter = document.getElementById('setDownload');
imageSetter.addEventListener('click', setImage, false);
function setImage(e) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
$("#canvascontent").val(this.href);
};
This is in attempt to "set" the image. When i click the setDownload , IT WORKS and it saves the canvas how i want with the form submit. It will successfully get into my model
Now, I try calling the imageSetter like so...
The updateImage function adds images to the canvas successfully.
function updateImage(imageURL){
fabric.Image.fromURL(imageURL, function(img) {
#canvas_image_rendering_code
}, {crossOrigin: 'anonymous'});
var url = canvas.toDataURL({
format: 'png',
quality: 0.8
});
setImage();
};
With this, the saved image is still blank...for some reason setImage isn't being called? or so i thought...
I also thought maybe the canvas wasn't loaded so I tried setTimeout(setImage(), 3000); which isn't ideal even if it works but wanted to see.
Then i thought, is it even being called?
So i set setImage as an alert to se if it's calling it
function setImage() {
alert("Hello");
}
And it IS being called..the alert pops up when i choose an image for the canvas
How can I call the setImage function from within that function and have it work the same way as when i click setDownload?
What's the story of why this happens?
Keys:
Saves canvas on form submit when i click setDownload link href.
calling setImage function within updateImage function works with alert example, but not with setting the image with toDataURL.

AngularJS upload photo without form submit

I want to upload a photo without hitting the having a submit button. I am using ionic framework and cordova plugin and the example below is getting a photo from the iphone's photo library.. for brevity i only included what's necessary for my request.
my view looks like this:
<form ng-submit="???">
<img class="img-circle" ng-src="{{prof_pic}}" ngclick="showActionsheet()" ng-if="pic_is_not_null()"/>
</form>
controller:
$scope.getPictureFromGallery = function() { $cordovaCamera.getPicture(secondoptions).then(function(imageData) {
$scope.imageData = imageData;
//data model
$scope.data = {prof_pic_link: imageData};
var image = angular.toJson($scope.data);
UserService.UpdateMyPhoto($localStorage.CurrentUser.id, $localStorage.CurrentUser.auth_token, image)
.success(function (data) {
$scope.prof_pic = "data:image/jpeg;base64," + imageData;
//to display the image in the view
}).
error(function(error,status) {
console.log(error);
console.log(status);
})
}, function(err) {
// error
});
};

You already have the answer in your question.
You can bind ng-click to a function that uploads the image to your server.
But more of a question is why you would not want the submit-button. Ponder this: The user whishes to upload an image, she selects an image that is to be uploaded but manages to select the wrong one.
If I read your scenario correctly, this will mean that the wrong image gets uploaded. If, on the other hand, there would be a submit-button the user can select a new image without the first one being uploaded.
So while you can do this, and you already have the answer yourself (ng-click="myUploadFunction(image)"), do you really want to?

Cannot change src of image by JQuery

I am developing ASP.NET MVC 4 application. I am trying to change src attribute after controller sent data to a view, however all my attempts have no result. A script at a View:
<script type="text/javascript">
$(document).ready(function () {
$('#fileupload').fileupload({
dataType: 'json',
url: '/Home/UploadFiles',
autoUpload: true,
done: function (e, data) {
$('.file_name').html(data.result.name);
$('.file_type').html(data.result.type);
$('.file_size').html(data.result.size);
$('.file_source').attr('src', 'D:/somePhoto.jpg'); //this row does not set 'src' of <img/>
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .progress-bar').css('width', progress + '%');
});
});
</script>
<img class="file_source" src="" /> <!--src attribute is just empty--->
Could you tell please where I’ve made an error?
this row is not working:
$('.file_source').attr('src', 'D:/somePhoto.jpg'); //this row does not set 'src' of <img/>
The attribute 'src' of tag is not altered to src="D:/somePhoto.jpg".
Any help would be greatly appreciated.

Have you tried assigning a valid image location from the web inside the image source? I am pretty sure, D:\somePhoto.jpg is the location at server side. If that is the case, then javscript does not know how to get it, because js runs on client side, and after you have already sent the data from controller, there is nothing it could do.
First test with an image available from web to test, such as this - http://sci8.com/wp-content/uploads/2014/10/test-all-the-things.jpg
So change your code to -
$('.file_source').attr('src', 'http://sci8.com/wp-content/uploads/2014/10/test-all-the-things.jpg');
If that works ( and I am pretty sure, it will), then you know the reason why. Just keep the somePhoto.jpg somewhere inside the Content folder of your project and use that url.
for example
$('.file_source').attr('src', 'http://<hostaddress>/content/image/somePhoto.jpg');
If you are still facing problems, please let me know.

Add an upload-icon during uploading an image by CKEditor v4.2

I am using CKEditor v4.2. When you are uploading an image, its looking like this (I removed some form fields):
The problem: you cant see, that you are uploading an image, because there are neither a progress bar nor an upload icon. Thats no well usability for inexperienced people.
How can I add an loading image like this using the API or manipulate the image-plugin:
I have no idea :( Thanks!

No image but show text is OK.
type: "fileButton",
id: "uploadButton",
filebrowser: "info:txtUrl",
label: d.lang.image.btnUpload,
onClick: function () {
var input1 = this.getInputElement();
input1.$.style = 'display:none';
input1.$.before("file is uploading,please wait...");
},
'for': ['Upload', 'upload']