Yii2 Editable Image

Question

Is it possible to make an image editable? I have an invoice template and I make store details (store logo, name, address, email, etc.) of that invoice editable. Everything's working fine except that I don't know how to make the store logo editable.

Here's how I display the store logo:

<img src="<?php echo $model->storeLogo; ?>" width="150"><br><br>

Now, I tried Kartik's Editable widget with INPUT_FILEINPUT but it only displays the image path:

<?php 
    echo Editable::widget([
        'model' => $model,
        'name'=> 'storeLogo', 
        'value' => $model->storeLogo,
        'inputType' => Editable::INPUT_FILEINPUT,
        'header' => 'Logo',
        'size'=>'md',
        'options' => ['class'=>'form-control']
    ]);
?>

Example output of the widget above is:

logo/acct.jpg

How do I let the image itself to be editable? Or are there any other ways to edit the image? Your thoughts would be of great help. Thanks.

Answer 1

I finally figured it out. I put this in my view:

<div class="fileUpload kv-editable-value kv-editable-link">
    <span><img class="pull-left" src="<?php echo $model->storeLogo; ?>" width="150" height="150" id="output"></span>
    <input type="file" accept="image/*" onchange="loadFile(event)" class="upload"/>
</div>

Then I added a javascript:

<script>
    var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

And style:

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 0 auto 0;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    height: 150px;
    filter: alpha(opacity=0);
}

I searched this solution over stackoverflow as well but I already don't have the link. Here's how it looks now:

So when I click on the image, a window will appear for me to select another image. Btw, all these are just frontend so I don't need to reupload an image again and save it to my database.

Answer 2

May I suggest you use Kartik's file input widget? This will easily allow you upload a new image to replace the one you have.

As for editing the image, this will need to be done at the front end, for which you will need a javascript or jquery library, connected to Yii2's 'Imagine' library. There are plenty out there, you just need to find the one that's right for what you want to edit.