JavaScript FileReader Massive Result

Question

I've got a FileReader that lets the user upload a file (image) to my site.

Here's the code that does the reading:

$("input[type='file']").change(function(e) {

    var buttonClicked = $(this);

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
            img.src = reader.result;                

            console.log(reader.result);

        }
        reader.readAsDataURL(file);
    }
});

All is good and well, until I tried to print out my result. I used this file for example:

When I console.log() the result, it spits out over 95000 characters.

This image in particular is around the same size as the images I will be accepting into my site.

I was hoping to store these images in a database as well, and so I'm wondering how this is going to be possible with image sources that are so extremely long. Is there a way to shorten this or get the image path a different way?

I'm moreso curious as to why they're so long, but if someone has a tip to store these (100s per user, 500+ users) that'd be nice as well!

Thanks-

Answer 1

Store the Files as ... Files.

There are very little use cases where you need the toDataURL() method of the FileReader, so every time you use it, you should ask yourself why you need it.

In your case :

• To display the image in the page. Well don't use a FileReader for this, instead create a direct pointer to the file in the form of an url, available only to this session. This can be achieved with the URL.createObjectURL(File_orBlob) method.
• To store this image on your server. Don't store a ~37% bigger base64 version, send and store directly the file as a file (multipart). This can be achieved easily with the FormData API.

inp.onchange = function(){
  var file = this.files[0];
  if(file.type.indexOf('image/') !== 0){
    console.warn('not an image');
    }
  var img = new Image();
  img.src = URL.createObjectURL(file);
  // this is not needed in this case but still a good habit
  img.onload = function(){
    URL.revokeObjectURL(this.src);
    };
  document.body.appendChild(img);
  }

// not active but to give you da codez
function sendToServer(){
  var file = inp.files[0];
  var form = new FormData();
  // here 'image' is the parameter name where you'll retrieve the file from in the request
  form.append('image', file); 
  form.append('otherInfo', 'some other infos');
  var xhr = new XMLHttpRequest();
  xhr.open('post', 'yourServer/uploadPage')
  xhr.onload = function(){
    console.log('saved');
    };
  xhr.send(form);
  }

<input type="file" id="inp">

And if you need PHP code to retrieve the File form this request :

if ( isset( $_FILES["image"] ) ){
  $dir = 'some/dir/';
  $blob = file_get_contents($_FILES["image"]['tmp_name']);
  file_put_contents($dir.$_FILES["image"]["name"], $blob);
}

Answer 2

You're going to want to upload the files to a server of some sort (a backend that is serving up your javascript), and then from there you'll want to

1. Validate the file
2. Store the file on a physical server (or the cloud) somewhere
3. Add an entry in a database that relates the file path or ID of that upload to the user who just uploaded it (so you can retrieve it later if needed)

So basically, you don't store the image in your database, you store it on a file share/cloud host somewhere, and instead you only store what is needed to download/retrieve the image later.