Forum Discussion

FarahJoyner's avatar
FarahJoyner
Qrew Trainee
7 years ago

Limiting size of files a user can upload.

I want to limit the size of files my users can upload to an app? is there a native way to do this? and is there a way to retrieve the file size for existing files?

16 Replies

  • Hi Dan,

    I tried this method and it worked great for one file attachment field. However my requirement is a bit different. I have a form with multiple fields with file attachments. Example Photo1, Photo2, Photo3 etc. Ideally when the users click on either one of the "browse" buttons to locate image file and if the file is more than 1Mb, I would like to stop them from uploading. I'm very new to JS so having troubles applying this method. Any advice would be greatly appreciated!!!

    Many thanks in advance!
    • AustinK's avatar
      AustinK
      Qrew Commander
      Which version of IE are you testing this on? An unfortunate side effect of having so many browsers available is not everything works on every version. In general Chrome and Firefox should work with most things but it again depends on the version. It can also depend on the version of the library you are using, if the command is from a library. QuickBase uses jQuery 1.7.2 which is older, as an example.

      If you are using Internet Explorer 10 or 11 that works with a lot of things but still is not ideal. If you were using Edge that would be better but Chrome supports a lot of stuff.

      I've stopped supporting IE. Trying to make something that isn't a native function work in all browsers is sometimes impossible. I know it isn't always an option but just having your users only use Chrome or Firefox or whatever as long as users stuck with one option would solve that.

      You could go through the javascript above line by line and see which line is causing the error, or you could check in console to see which line is giving you an error and report back here. That would tell me more about what is going on with it.
    • SiniWickramasin's avatar
      SiniWickramasin
      Qrew Cadet
      Hi Dan,

      As per my previous message this works great on Chrome browser but for some reason its not working on IE. I have checked if Active Scripting and is enabled in IE under security settings and it is enabled......Really hoping there is a way around it.... 
    • SiniWickramasin's avatar
      SiniWickramasin
      Qrew Cadet
      Hi AustinK, I tested your suggestion and it worked like a charm. Its people like you and Dan (and alike) who are the real everyday heroes even if you think the input is small!!! Its the willing to help that really makes the world a better place : )
  • It pleases me no end to see people using JavaScript with QuickBase! 

    This code will immediately (no need to wait till Save button is clicked) check the file size of a selected file and remove the file from the input if it is too large.
    $("#_fid_6").on("change", function(e) {
      var maxSize = 1000;
      var data = e.originalEvent.target.files[0];
      if (data.size > maxSize) {
        alert('Your file size is ${data.size}. Please select a smaller file.');
        this.value = "";
      }
    });

    Pastie Database
    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=581

    Notes:

    (1) For security reasons, you can only set the value of a file input to an empty string (essentially removing the selected file).

    (2) The code uses backticks to do strinng interpolation.

    (3) My code should of course be placed wthin the normal IOL module decoding logic._
    • MichaelTamoush's avatar
      MichaelTamoush
      Qrew Captain
      Reviving this thread. Is there a way to use script to simply put the file size into a field? I just need the file size there to then check a couple things using formulas/dynamic rules. I believe these solutions give alerts, and I don't know syntax to set a field to the size.

      ------------------------------
      Mike Tamoush
      ------------------------------
  • If you want to restrict the user from saving the record itself, if the file attachment in the form exceeds a specific limit like 1MB or 10MB or anything.  The below javascript code using iol would help you achieve it.

    At high level

    the script will take over the handler on the save button when the page loads and checks the size of the file attached in the form, if it is more than 100K in this instance(which you can change in the code below from 100000 to the limit you want to set).  it will show an alert and blocks the save action in other words it won't let user to save the record and if the size is within the accepted limit then the record will be saved.

    NOTE: Alert message and any other details you can customize since you have the full control on the form now.

    1. Create a code page in the application and copy the below code into it.

    NOTE:

    1. replace TABLE_DB_ID in the below code with dbid of the table where you are trying to restrict the file uploads based on the size. for instance, if table is file attachment then use dbid of that table.

    2. replace files[0] with files[1] or files[2] if the form has more than one attachment. if not and form has only one file attachment then don't have to do anything.

    var backupHandlers;

    function checkFileSize() {
     
     var reader  = new FileReader();
     reader.readAsDataURL(document.querySelector('input[type=file]').files[0]);
     reader.addEventListener("load", function () {
      //console.log($("#_fid_X")[0].fileSize);
      //console.log(reader.result);
      console.log(reader);
      if(reader.result.length>100000){
       alert("File size greater than 100k");
      }else{
       console.log("File size within the limits carry on with save.");
       $("#saveButton").each(
       function() {
        var elementData = jQuery
          ._data(this), events = elementData.events;
        //Restore default quickbase events
        var onClickHandlers = events['click'];
        //remove all the current click handlers on the save button
        for (var idx = 0; idx < onClickHandlers.length; idx++) {
         onClickHandlers.splice(0, 1);
        }

        //replace them with the handlers that quickbase configured when the page initially loaded
        if(backupHandlers!=undefined){
         for (var idx = 0; idx < backupHandlers.length; idx++) {
          onClickHandlers.push(backupHandlers[idx]);
         }
         console.log("Total handlers left : "+ onClickHandlers.length);
        }
        
        //triggers save action
        $("#saveButton").trigger("click");
       });
      }
       }, false);
    }

    function alterSaveEventHandlers(){
     console.log(DoSaveAdd);
      
      $("#saveButton").on("click", checkFileSize);
      $("#saveButton").each(function() {
       var elementData = jQuery._data(this), events = elementData.events;
       var onClickHandlers = events['click'];

       // Only one handler. Nothing to change.
       if (onClickHandlers.length == 1) {
        return;
       }
       backupHandlers = new Array();

       // onClickHandlers.splice(0, 0, onClickHandlers.pop());
       for (var idx = 0; idx < onClickHandlers.length; idx++) {
        backupHandlers.push(onClickHandlers[idx]);
        onClickHandlers.splice(0, 1);
       }
       console.log("onClickHandlers : "+JSON.stringify(onClickHandlers));

      });
      
      console.log("updated click handlers on save button.");
    }

    (function() {
     var querystring = document.location.search;

    console.log("got into custom code section.");
     if (/dlta=mog/i.test(querystring)) {
      // GRID EDIT PAGE ========================================
      console.log("You are on the Grid Edit Page");

     } else if (/a=er/i.test(querystring) && /TABLE_DB_ID/i.test(window.parent.location) ) {
      
      // EDIT RECORD PAGE ========================================
      console.log("You are on the Edit Record Page");
      alterSaveEventHandlers();

     }else if (/a=API_GenAddRecordForm/i.test(querystring)  && /TABLE_DB_ID/i.test(window.parent.location) ) {
      // API_GenAddRecordForm PAGE ========================================
      console.log("You are on the GenAddRecordForm Page!");
      alterSaveEventHandlers();
     } else if (/GenNewRecord/i.test(querystring)) {
      // ADD RECORD PAGE ========================================
      console.log("You are on the Add Record Page");
      alterSaveEventHandlers();
     } else if (/nwr/i.test(querystring)) {
      // ADD RECORD PAGE ========================================
      console.log("You are on the Add Record Page");
      alterSaveEventHandlers();
     } else if (/a=dr/i.test(querystring)) {
      // DISPLAY RECORD PAGE

      console.log("You are on the Display Record Page");
      //$("img[qbu=module]").closest("td").css("background-color", "#FFFFFF");
      setTimeout(requestForUpdates, 2000);


     } else if (/a=q/i.test(querystring)) {
      // REPORT PAGE ========================================
      console.log("You are on the Report Listing Page");

     } else if (/a=td/i.test(querystring)) {
      //TABLE DASHBOARD PAGE ========================================
      console.log("You are on the Table Dashboard Page");

     } else if (/a=FinishEditRecord/i.test(querystring)) {
      //FINISH EDIT RECORD PAGE ========================================
      console.log("You are on the Finish Edit Record Page");

     } else {
      //OTHER PAGE ========================================
      console.log("You are on the Some Other Page");
     }

    })();


    Step 2:

    follow the steps in the below url that helps you to load the above script file into the form

    https://community.quickbase.com/quickbase/topics/create-parent-record-on-loading-of-child-form

  • Within my knowledge on native quick base there is no option, based on there documentation on the Field Type of File Attachment the maximum size of file is 100 MB.

    Using Script you can limit that one

    $('#you_can_give_your_field_id ').bind('change', function() {
      //this.files[0].size gets the size of your file.
      alert(this.files[0].size);
    });

    This will give the size of file based on bytes. 

    I think this solves your problem.

    Any help needed you can reply
    • JuanSolorio1's avatar
      JuanSolorio1
      Qrew Cadet
      Hello John,

      Where/how do you use this code snippet?

      Thanks in advance.

      ------------------------------
      Juan Solorio
      ------------------------------
      • MikeTamoush's avatar
        MikeTamoush
        Qrew Commander
        Juan,

        I have been trying for years to find the file size or limit it, with no luck. If you stumble across a solution, please post in the forum!

        ------------------------------
        Mike Tamoush
        ------------------------------
  • I have staff uploading pdfs and I want to limit the size of the file that they are allowed to upload, so i can manage our storage for efficiently.
  • Within my knowledge ,Normally if the file format is a csv then you can upload 5 mb. And you can export upto 18 mb, if the file size is more  than that then it will give a message and we  need to divide the file .

    Thats the maximum size that i have ever been exported and imported.