CODEWITHSUNDEEP
javascripthtmlajaxupload
irmakoz
irmakoz

Reputation: 1166

Upload resized form image to server

I want to upload a resized image to server, but I get "Required MultipartFile parameter 'file' is not present" error when I try to upload the resized image. When I upload the original file from there is no problem.

Script:

function resizeAndUpload(file) {
    var reader = new FileReader();
    reader.onloadend = function () {

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

            var MAX_WIDTH = 200;
            var MAX_HEIGHT = 200;
            var tempW = tempImg.width;
            var tempH = tempImg.height;
            if (tempW > tempH) {
                if (tempW > MAX_WIDTH) {
                    tempH *= MAX_WIDTH / tempW;
                    tempW = MAX_WIDTH;
                }
            } else {
                if (tempH > MAX_HEIGHT) {
                    tempW *= MAX_HEIGHT / tempH;
                    tempH = MAX_HEIGHT;
                }
            }

            var canvas = document.createElement('canvas');
            canvas.width = tempW;
            canvas.height = tempH;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, tempW, tempH);
            var dataURL = canvas.toDataURL("image/jpeg");

            var data = new FormData();
            data.append('file', dataURL);

            $.ajax({
                url: '/changeimage',
                type: 'POST',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                success: function () {
                    window.alert("uploaded")
                }
            });
        }
    }
    reader.readAsDataURL(file);
}

Server:

@RequestMapping(value = "/changeimage", method = RequestMethod.POST)
@ResponseBody
public String changeProfileImage(@Context HttpServletRequest request, @RequestParam("file") MultipartFile file) {
    return "ok";
}

Upvotes: 0

Views: 63

Answers (1)

Musa
Musa

Reputation: 97682

A data url is a string and will not upload as a file.
However you can use a blob instead

    ...
    ctx.drawImage(this, 0, 0, tempW, tempH);
    canvas.toBlob(function(blob){

        var data = new FormData();
        data.append('file', blob);

        $.ajax({
            url: '/changeimage',
            type: 'POST',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            success: function () {
                window.alert("uploaded")
            }
        });
    });
    ...

Upvotes: 1

Related Questions