The Power of JavaScript FileReader Unleashed

Question

The Power of JavaScript FileReader Unleashed

One of the features on my website allows users to upload images using a FileReader. Here's the code snippet that handles the file 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);
    }
});

Everything was running smoothly until I attempted to print out the result. When I tried it with a sample image from this link, https://i.sstatic.net/7svQa.jpg, the console logged over 95000 characters.

The size of this particular image is similar to the ones that will be uploaded by users. My plan was to store these images in a database but I'm concerned about how to handle such lengthy image paths. Is there a way to shorten them or obtain the image path differently?

I'm also curious as to why the image URLs are excessively long. Any tips on efficiently storing images (considering hundreds per user and over 500 users) would be greatly appreciated!

Thank you-

javascript file filereader reader

Answer 1

Answer №1

Save the Documents as Files.

There are very few scenarios where the toDataURL() method of the FileReader is necessary, so before using it, consider why you actually need it.

In your situation:

To showcase the image on the webpage. Instead of using a FileReader, create a direct link to the file in the form of a URL that is only accessible for this session. You can do this using the URL.createObjectURL(File_orBlob) method.
To save this image on your server. Avoid storing a ~37% larger base64 encoded version, and instead send and store the file directly as a file (multipart). This can be easily accomplished 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);
  
  img.onload = function(){
    URL.revokeObjectURL(this.src);
    };
  document.body.appendChild(img);
  }

function sendToServer(){
  var file = inp.files[0];
  var form = new FormData();

  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 PHP code is needed to extract the File from 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

Save the Documents as Files.

There are very few scenarios where the toDataURL() method of the FileReader is necessary, so before using it, consider why you actually need it.

In your situation:

To showcase the image on the webpage. Instead of using a FileReader, create a direct link to the file in the form of a URL that is only accessible for this session. You can do this using the URL.createObjectURL(File_orBlob) method.
To save this image on your server. Avoid storing a ~37% larger base64 encoded version, and instead send and store the file directly as a file (multipart). This can be easily accomplished 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);
  
  img.onload = function(){
    URL.revokeObjectURL(this.src);
    };
  document.body.appendChild(img);
  }

function sendToServer(){
  var file = inp.files[0];
  var form = new FormData();

  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 PHP code is needed to extract the File from 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 3

Answer №2

To securely save and access files, you should first upload them to a server that hosts your backend processes. From there, take the following steps:

Verify the file for security purposes
Save the file on either a physical server or cloud storage platform
Create an entry in a database linking the file's path or ID to the user who uploaded it (this enables easy retrieval when necessary)

In essence, rather than storing the actual image in the database, store it on a file sharing service or cloud provider and keep only essential information required for downloading/retrieving the image later on.

Answer 4

To securely save and access files, you should first upload them to a server that hosts your backend processes. From there, take the following steps:

Verify the file for security purposes
Save the file on either a physical server or cloud storage platform
Create an entry in a database linking the file's path or ID to the user who uploaded it (this enables easy retrieval when necessary)

In essence, rather than storing the actual image in the database, store it on a file sharing service or cloud provider and keep only essential information required for downloading/retrieving the image later on.

The Power of JavaScript FileReader Unleashed

Answer №1

Answer №2

Similar questions

Unlocking the AngularJS variable within the template script

What could be causing my jQuery getJSON function to not execute the callback function as expected?

Error in AWS Cloud Development Kit: Cannot access properties of undefined while trying to read 'Parameters'

Alternative for document.ready in AngularJS when outside of AngularJS

What is the best way to center align my horizontal subnav?

Embedding a YouTube video in a view player using HTML5

What is the correct way to type this?

Tips for coordinating web service requests in JavaScript

A guide to performing a LEFT JOIN on two JSON data sources from external URLs

The ReCaptcha and AJAX Integration

Exploring Selenium: Clicking on Auto-Complete Suggestions using Python

D3.js Issue: The <g> element's transform attribute is expecting a number, but instead received "translate(NaN,NaN)"

Is there a way to calculate the height of a component that is only rendered conditionally?

Determine whether the browser is being used on an Android or iOS device

Tips for displaying the Material UI Menu component on the left side instead of the default right side

Await the resolution of multiple individual promises

What is the method to prevent the label from closing in the MUI 5 datepicker?

Does using .detach() eliminate any events?

I need help figuring out the proper way to establish an indexing path in cosmos db using the nodejs sdk