Shrink file server side and upload via form

Question

I am trying to create a simple form to upload a jpg file plus some text fields. I want to shrink the file server side first.

I have tried to create the code using bits of other various stackoverflow answers but am not having much luck.

I want to do two things, show a preview of the shrunken image before upload, and upload the image via the form along with some text fields. (Other examples use xmlHttpRequest to send the file from the script which I don't want to do.) I also want to upload it as a jpg file not as base64 like some do, which I have read is about 37% bigger.

Below is my code so far. I am not sure how to make the image appear in the body, either where the uploadPreview tag is, or otherwise. I am also not sure how to "insert" the shrunken file or filename back into the form so that when the user clicks Submit it will be sent along with the text fields.

I tried using the two lines that are commented out to display the new image but they did not work.

Any help would be greatly appreciated.

UPDATE: Apparently there may be no simple way of uploading a jpg version of the shrunken file. (Seems very strange given the larger size of the base64 file!).

For the benefit of others I have updated the code below to show what I have done, which works. I have also added the server code to save the file, which comes from this Stackoverflow answer

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<script type="text/javascript">
function shrinkfile() {
  if (document.getElementById("inputfile").files.length === 0) { return; }
  var filename = document.getElementById("inputfile").files[0];
  if (filename.type != "image/jpeg") {
     alert("Invalid file type " + filename.type + "must be jpg");
     return;
  }
  var reader = new FileReader();
  reader.onload = function() {
      var image = new Image();
      image.src = reader.result;
      image.onload = function() {
          var maxwidth = 800,
          maxheight = 800,
          origwidth = image.width,
          origheight = image.height;
          if (origwidth > origheight) {
              if (origwidth > maxwidth) {
                  origheight *= maxwidth / origwidth;
                  origwidth = maxwidth;
              }
          }
          else {
              if (origheight > maxheight) {
                  origwidth *= maxheight / origheight;
                  origheight = maxheight;
              }
          }
          var canvas = document.createElement('canvas');
          canvas.width = origwidth;
          canvas.height = origheight;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(this, 0, 0, origwidth, origheight);
          var newfile = canvas.toDataURL("image/jpeg",0.5); // The resized file ready for upload\
          document.getElementById("uploadPreview").src = newfile;
          document.getElementById("hiddenfile").value = newfile;
      }
  }
  reader.readAsDataURL(filename);    
}
</script>
</head>
<body>
  <form id="form" enctype="multipart/form-data" action="upload.php" method="POST">
  <input id="inputfile" type="file" name="photo" onchange="shrinkfile();" />
  <input id="caption" type="text" name="caption">
  <input type="submit" value="Upload">
  </form><br>
<img id="uploadPreview"/>

</body>
</html>

This is the server code upload.php:

<?php 
// Server code to decode base64 file from user and save as jpg
$img = $_POST['hiddenfile'];
echo $_POST['caption'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = "newimage.jpg";
$success = file_put_contents($file, $data);
?>

SeeTheC · Answer 1 · 2013-11-18T07:15:51.203

0

canvas.toDataURL gives you the image in base64 format. create one hidden field in the form. and assign value of canvas.toDataURL(...) to it.

You cannot append it on the body as its child element because its not a Html tag, its an image which is converted into base64 type. If you put its o/p in the "src" attribute of the "img" tag. you will able to see that shriken image

edited Nov 18 '13 at 07:15

answered Nov 18 '13 at 07:03

SeeTheC

1,560
12
14

I thought this statement created a jpg file: canvas.toDataURL("image/jpeg",0.5) – user2605793 Nov 18 '13 at 21:12
@user2605793 : your point of view is some what correct, but its not a file its a image in base64 format. – SeeTheC Nov 19 '13 at 04:44

score 0 · Accepted Answer · answered Nov 19 '13 at 00:14

I have updated the code above to show a working solution. Unfortunately it does not upload the jpg file which I wanted, but the significantly larger base64 version. If anyone has code (not using jquery, as this is a mobile application) that uploads the jpg file please let me know.

Shrink file server side and upload via form

2 Answers2