upload img (by clicking on , not ), display it in following ,client-side resize

Question

Goal:

Upload image by clicking on <img> instead of <input type="file"> (there will be 3 uploads, so its just 3 placeholders on page load, then once you click any placeholder, you choose a file, and this file gets to display in respective placeholder). What I have now:

HTML:

<div class="image-upload">
   <label for="file_input1">
       <img id="send_photo_img1" src="assets/images/index2.png"/>
   </label>
   <input id="file_input1" type="file"/>
</div>

CSS:

.image-upload > input
{
    display: none;
}

.image-upload img
{
    display: inline-block;
    margin-right:6px;
    width: 90px;
    height: 90px;
    cursor: pointer;
}

Jquery:

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#send_photo_img1')
            .attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}    

$("#send_photo_img1").change(function(){
    readURL("#file_input1");
});

While scripts like plupload.js or dropzone.js do that, but they also got lots of stuff I don't really need (i.e. UI that is not quite fitting my need or lots of code options not really needed, but taking space), so trying to implement this in scope required for my current needs.

The current code only lets me choose the desired img, but not display it. Currently, once the image is chosen, the loading sign is displayed for some time, but nothing happens afterward. No error output in Chrome F12 also.

@Hansy hello, yes, I did, though I saw your comment just now so perhaps you already solved this too. I shall be at my PC early tomorrow and will share the code if you still need it. Cheers! — Zerus, Oct 05 '17 at 04:50
Thanks for your reply and will be excited to show your code. Thanks again — Ahmed El-Hansy, Oct 17 '17 at 10:06
Hey Hansy, below is my code FYI. Let me know if any further questions — Zerus, Oct 30 '17 at 19:14

score 0 · Accepted Answer · edited Jul 09 '18 at 09:54

Figured it out and turned out to be quite straightforward:

HTML

<div class="img_upload">
    <img class="send_photo_img" id="send_photo1_img" src="assets/images/index2.png"/>
    <input id="send_photo1" name="send_photo1" class="send_photo_input" type="file"/>
</div>
<div class="img_upload">
    <img class="send_photo_img" id="send_photo2_img" src="assets/images/index2.png"/>
    <input name="send_photo2" class="send_photo_input" type="file"/>
</div>

Have as many img as you like.

Further on, with CSS you hide <input> and thereon trigger the click on <input> via JS, once it catches the click on <image>:

CSS

.img_upload input
{
    display: none;
}

JS (to trigger the click)

$(".img_upload img").click(function(){
        img = $(this);
        input = img.next(".send_photo_input");
        var newUrl;

        input.trigger("click");
        input.change(function(){
            newUrl = resize_and_draw(this, img.width());
            url.push(newUrl);
    });
});

and finally, you do the rest with HTML5 canvas (nowadays it's supported by almost anything except for Opera Mini (global share of users ~2,81% as of early Oct 2017)).

You may be also interested to resize the image at the client (to maintain bandwidth, decrease load speed etc), so below is the complete code:

function resize_and_draw (input, targetH) {

if (input.files && input.files[0] && /\.(jpe?g|png|gif)$/i.test(input.files[0].name)) {

    var reader = new FileReader();
    reader.onload = function (e) {

        var img = new Image();
        img.src = reader.result;
        img.onload = function() {

          canvas = document.createElement( 'canvas');
            canvas.width = img.naturalWidth;   
            canvas.height = img.naturalHeight;
            context = canvas.getContext('2d');
            context.drawImage( img, 0, 0, img.naturalWidth, img.naturalHeight );

                targetHeight = targetH;
            targetWidth = img.naturalWidth * targetHeight / img.naturalHeight;

            //resize
            resample_hermite(canvas, img.naturalWidth, img.naturalHeight, targetWidth*2, targetHeight*2);
            url = canvas.toDataURL("image/png");
            $(input).prev(".send_photo_img").attr('src', url);

        }     
    }

    reader.readAsDataURL(input.files[0]);

    return url;
}
}

Hope this will help your goals. Cheers!

upload img (by clicking on , not ), display it in following ,client-side resize

1 Answers1

Linked