Convert local image blob to base64, in PHP

Question

I'm working on an (HTML) form for an internal tool. Users can fill data out about an issue and attach screenshots. This form is then submitted via ajax to PHPMailer to be sent. The issue is with the screenshots. Due to system limitations I'm unable to have the users actually upload the files to the server.

Currently, I'm using HTML5 filereader to select the files. I then convert the image blobs to base64 and send them to PHPMailer, to be converted to attachments. This is actually working great. However, I'm running into file size issues. Specifically a 1000px x 1000px (402KB) test image. The resulting base64 string is over a million characters long and the request is returning 413 (Request Entity Too Large).

I understand that base64 is not an efficient method for transferring large images and I've seen various posts about retrieving / converting image blobs from a database. What I haven't been able to find is info on retrieving a local image blob and converting it to base64.

My image blob URLs look like this: blob:http://example.com/18960927-e220-4417-93a4-edb608e5b8b3

Is it possible to grab this local image data in PHP and then convert it to base64?

I cannot post much of the source but, the following will give you an idea of how I am using filereader

window.onload=function(){
window.URL = window.URL || window.webkitURL;

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);
}

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    var list = document.createElement("ul");
    fileList.appendChild(list);
    for (var i = 0; i < files.length; i++) {
        if(files[i].size > 1000000) {
            alert(files[i].name + ' is too big. Please resize it and try again.');
        } else {
        var li = document.createElement("li");
      list.appendChild(li);

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.setAttribute("class", "shotzPrev");
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      var info = document.createElement("span");
      info.innerHTML = files[i].name + "<br>" + files[i].size + " bytes";
      li.appendChild(info);

        }
    }
  }
}

Answer 1

You can POST the File object to php

fetch("/path/to/server", {
  method: "POST"
  body: files[i]
})
.then(response => console.log(response.ok))
.catch(err => console.error(err));

Answer 2

I think its nginx error, please change the client_max_body_size value in nginx.conf file.

for example :

# set client body size to 2M #
client_max_body_size 2M;

PHP configuration (optional)

Your php installation also put limits on upload file size. Edit php.ini and set the following directives.

;This sets the maximum amount of memory in bytes that a script is allowed to allocate
memory_limit = 32M

;The maximum size of an uploaded file.
upload_max_filesize = 2M

;Sets max size of post data allowed. This setting also affects file upload. To upload large files, this value must be larger than upload_max_filesize
post_max_size = 3M