CODEWITHSUNDEEP
javascriptjquerycanvasupload
Ankur
Ankur

Reputation: 51110

Resize and upload files without AJAX

Edit

It seems that this is most likely not possible because the canvas and the file input are not compatible data types.

The way to do something similar is to send an AJAX request using a "data url". I will look into that in more detail. Since I didn't want to use AJAX I'll try to fake the workflow to be more like a normal submit, i.e. with a refresh at the end.

End edit

I want to resize and upload a file without AJAX, as this is how it is currently being done (without a resized image - taken from a phone/tablet) and it works well in terms of workflow.

Hence after doing a resize I want to be able to make the resized "image" the value of a field, if this is possible.

I am using this library http://gokercebeci.com/dev/canvasresize to do the resizing for me.

I tried setting the data variable in the callback to be the file1 input's value i.e.

$("#file1").val(data);

But this threw an error. I have removed it in the code below, since I was pretty sure that wasn't the way to go about it.

I've copied the entire HTML/JS file below (the "Image Uploading" content was an example of using AJAX to upload the image, I have commented it out because I don't want to do that).

<!DOCTYPE html>
<html>
<head>
    <title>Resize and Upload Images</title>
    <script type="text/javascript" src="/public/javascripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/public/javascripts/zepto.min.js"></script>
    <script type="text/javascript" src="/public/javascripts/jquery.exif.js"></script>
    <script type="text/javascript" src="/public/javascripts/jquery.canvasResize.js"></script>
    <script type="text/javascript" src="/public/javascripts/binaryajax.js"></script>
    <script type="text/javascript" src="/public/javascripts/canvasResize.js"></script>
    <script type="text/javascript" src="/public/javascripts/exif.js"></script>

</head>
<body style="margin:48px;">
<div id="devcontainer">
    <div id="area">
        <h3>canvasResize</h3>
        <div>
            <form action="/upload" enctype="multipart/form-data" method="POST">
            <input name="file1" type="file" id="file1"/>
            <input name="file1" type="file"/>
            <input name="data1" type="text"/>
            <input name="data2" type="text"/>
            </form>
            <p><span></span></p>
            <i></i>
        </div>
        <script>
        $().ready(function() {

            $('input[name=file1]').change(function(e) {
            var file = e.target.files[0];

            // RESET
            $('#area p span').css('width', 0 + "%").html('');
            $('#area img, #area canvas').remove();
            $('#area i').html(JSON.stringify(e.target.files[0]).replace(/,/g, ", <br/>"));

            // CANVAS RESIZING
            canvasResize(file, {
                width: 600,
                height: 0,
                crop: false,
                quality: 80,
                callback: function(data, width, height) {

                // SHOW AS AN IMAGE
                // =================================================
                var img = new Image();
                img.onload = function() {

                $(this).css({
                    'margin': '10px auto',
                    'width': width,
                    'height': height
                }).appendTo('#area div');
            };

            // /SHOW AS AN IMAGE
            // =================================================
            $(img).attr('src', data);

                }
            });
            });

        });
        </script>
    </div>
    <div class="clearfix"></div>
</div>
</body>
</html>
<!--
   // IMAGE UPLOADING
                // =================================================

                // Create a new formdata
                var fd = new FormData();
                // Add file data
                var f = canvasResize('dataURLtoBlob', data);
                f.name = file.name;
                fd.append($('#area input').attr('name'), f);

                var xhr = new XMLHttpRequest();
                var loaded = Math.ceil((e.loaded / e.total) * 100);
                $('#area p span').css({'width': loaded + "%"}).html(loaded + "%");
                }
                }, false);
                // File uploaded
                xhr.addEventListener("load", function(e)
                {
                var response = JSON.parse(e.target.responseText);
                if (response.filename)
                {
                    // Complete
                    $('#area p span').html('done');
                    $('#area b').html(response.filename);
                    $('<img>').attr({
                    'src': response.filename
                    }).appendTo($('#area div'));
                }
                }, false);
                // Send data
                xhr.send(fd);

                }


-->

Upvotes: 0

Views: 843

Answers (1)

Victor
Victor

Reputation: 666

Create a callback function in the main window. Add an iFrame to the page that will handle file upload. Once your files have been uploaded call the call back function with the file names. Add the files to the canvas.

Upvotes: 1

Related Questions