0

I followed this question to resize image before upload and it works. But I need to post this image like when I submit the form.. I have tried lots of things to do this but no way.. I don't want to send it with ajax. It should be appended to post request as does. Documents/answers that I found say 'post with ajax'..

Do you have an idea? Thank you for your helps!

Edit: here is the code. (almost identical with the link above)

    function handleFiles()
    {
        var filesToUpload = $(this)[0].files;
        var file = this_input.get(0).files[0];
        var name = file.name;

        // Create an image
        var img = document.createElement("img");
        // Create a file reader
        var reader = new FileReader();
        // Set the image once loaded into file reader
        var ctx;
        var dataurl;
        reader.onload = function(e)
        {
            img.src = e.target.result;
            alert(e.target.result);
            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 1920;
            var MAX_HEIGHT = 1080;
            var width = img.width;
            var height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            dataurl = canvas.toDataURL("image/jpeg");
            //$('#img_hidden').attr('value', dataurl);
            document.getElementById('image').src = dataurl;

        }
        // Load files into file reader
        reader.readAsDataURL(file);

    }
Community
  • 1
  • 1
iedmrc
  • 742
  • 2
  • 8
  • 21
  • Show me your code. I'll help you there. – Obinna Nwakwue Aug 10 '16 at 20:43
  • That's not possible. But there is a workaround for that. You can post the blob of the resized image as part of the form via javascript (no, I don't mean AJAX). Get image on form submit (or when file was selected), resize it with Javascript, remove the file input field, make a new hidden input field in the form and set the value of this field to the blob of the resized image and then submit form. Obviously you can't use `$_FILES` then. – Charlotte Dunois Aug 10 '16 at 20:54
  • @CharlotteDunois thank you for your suggestion. I am on it (make a new hidden input field in the form and set the value of this field to the blob of the resized image and then submit form.) now but it is my last option. I press into do with (like) setting file input value.. – iedmrc Aug 10 '16 at 22:10
  • @ObinnaNwakwue I edit the question and added code. Code is almost identical with the link above. – iedmrc Aug 10 '16 at 22:14

0 Answers0