sconsult / croppic

croppic
914 stars 228 forks source link

Image is not visible on first upload #262

Closed maxrgus closed 7 years ago

maxrgus commented 7 years ago

Hi, I have a strange issue I can not figure out.

The first upload (per refresh) is not displayed. The server is responding fine when I look at the JSON response however the styles on the image is all off. <img src="/Temp/image.jpg" style="z-index: 0; opacity: 0.2; width: 40px; height: 0px; left: -20px; position: relative;"> Temporarily editing the height and width of the image in the browser for debugging purposes also makes the image frozen in place.

Funny thing is if I clear the image and upload it again it works perfectly.

Including my view and js options incase I messed it up somehow.

View `

<div id="myModal" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Change Profile Picture</h4>
            </div>
            <div class="modal-body" style="position: relative;">
                <div id="cropper"></div>
                <div id="preview">
                    <input type="hidden" id="cropperOutput" name="croppedImage" />
                    <a href="#" id="saveButton" style="display: none;" class="btn btn-default" onclick="Save()">Save</a>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>`

JS var cropperOptions = { uploadUrl: '/ProfilePicture/_Upload', cropUrl: '/ProfilePicture/Crop', rotateControls: false, outputUrlId: 'cropperOutput', onAfterImgCrop: function () { $('#saveButton').attr('style', 'display: block;'); } } var cropperHeader = new Croppic('cropper', cropperOptions);

Regards Max

maxrgus commented 7 years ago

Sorry! I made a mistake and forgot to wrap it all in document ready.

Closing issue.