Managing file sizes on the client side prior to transferring them to the server side

Question

Managing file sizes on the client side prior to transferring them to the server side

I am looking to implement client-side validation for file size. The current code only handles success, but I also want to address file size limitations. Right now, if a file exceeds 2MB, it results in a 500 (Internal Server Error) behind the scenes.

Is there a way to manually handle this and display an error message such as "Max file size should be 2MB"?

Thank you in advance

Note: The snippet below is written in AngularJS

file.upload(url, function(data) {
    if(data.success !== true) {
        $scope.$apply(function() {
            $scope.design.pdf.status = '';
            $scope.errors.pdf = data.data;
        });
        return;
    }
    $scope.$apply(function() {
        $scope.design.pdf = {
            status: 'uploaded',
            file: data.data.name,
            name: data.data.original,
            size: data.data.size
        }
    });
});

javascript angularjs

Answer 1

Answer №1

It seems like you are using an input type='file' button. One way to get the size is by creating a directive that binds to the button when it changes.

The directive can be implemented as follows:

app.directive('customUpload', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
        element.on('change', function(){
          //size in bytes
          var size = element[0].files[0].size;
          console.log(size);
          //perform actions with the file
        });
      }
    };
});

And in the HTML:

<input type='file' custom-upload>

You can also find the complete code in this Plunker demo: http://plnkr.co/edit/GB6MFOWMbjOA7obFBq83?p=preview

Answer 2

It seems like you are using an input type='file' button. One way to get the size is by creating a directive that binds to the button when it changes.

The directive can be implemented as follows:

app.directive('customUpload', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
        element.on('change', function(){
          //size in bytes
          var size = element[0].files[0].size;
          console.log(size);
          //perform actions with the file
        });
      }
    };
});

And in the HTML:

<input type='file' custom-upload>

You can also find the complete code in this Plunker demo: http://plnkr.co/edit/GB6MFOWMbjOA7obFBq83?p=preview

Managing file sizes on the client side prior to transferring them to the server side

Answer №1

Similar questions

Express router is unable to process POST requests, resulting in a 404 error

ReactJs - SyntaxError: The JSX content is not properly terminated

Utilizing ES6, accessing the first element of an array of objects

Techniques for finding the total value of a JSON array

Modify the content of a tooltip when hovering over the session times button

Implementing Autocomplete feature in Reactjs with Ant Design Library

Encountering: error TS1128 - Expecting declaration or statement in a ReactJS and TypeScript application

Next.js - utilizing dynamic API routes within nested folders

Is there a way to refresh CSS styles when the window width is adjusted?

Variable unique to the specific function in universal function

The error encountered is: "TypeError: req.flash does not exist as a function in NodeJs

Using PHP to create multiple div elements and then concealing them all

The element type is not valid: it should be a string for built-in components or a class/function for composite components, but it is currently an object in a React project

Strange padding issue found on View component in React Native Web when using Edge browser

Having difficulty with printing a particular div

What is the best way to use jQuery ajax to send various row identifiers when updating table data on another PHP page by selecting checkboxes?

Updating the Keycloak token in VueJS using keycloak-js even when it is still valid

Effortlessly switch between multiple divs with jQuery

Leveraging JS Variables within Twig Template

The size of Bootstrap 3 columns adjusts dynamically based on the width of the window as the page is being