Open images in photoshop panel
I use references a lot when I'm drawing, and I'm trying to build an extension that will let me open images in a separate Photoshop panel to make things easier. But I've been driving myself nuts because I can't get images to appear in the panel at all. I eventually want to be able to drag and drop images as well copy and paste content in the panel, but right now, I'm just trying to open an image with a typical file input.
Here's the html:
<div id="content">
<div class="ref">
<div class="startmssg">
<i class="fas fa-arrow-down fa-3x"></i>
<p>Drag & drop reference images here</p>
</div>
<!--Element where I want to place the image-->
<img class="refpic">
</div>
</div>
<nav>
<label class="topcoat-icon-button--large--quiet" title="Add new reference image file">
<i class="fas fa-image fa-2x"></i>
<!--The file input for the image-->
<input type="file" id="openref" accept="image/*" multiple>
</label>
<button type="button" id="delref" class="topcoat-icon-button--large--quiet" title="Delete reference image">
<i class="fas fa-trash-alt fa-2x"></i>
</button>
<button type="button" id="infobttn" class="topcoat-icon-button--large--quiet" title="Info">
<i class="fas fa-info-circle fa-2x"></i>
</button>
</nav>
The jsx function:
function readImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.refpic').attr('src', e.target.result);
}
$('.startmssg').hide();
reader.readAsDataURL(input.files[0]);
}
}
And the main.js file:
$("#openref").change(function () {
csInterface.evalScript('readImage(this)');
});
The code above works in jsfiddle, but not in the panel. I can't figure out what I'm doing wrong.
