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

  • 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.
  • 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 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
      ------------------------------
      • MarkShnier__You's avatar
        MarkShnier__You
        Qrew Champion
        Juan,
        JavaScript has been disabled in QuickBase so this whole thread is no longer valid.

        ------------------------------
        Mark Shnier (YQC)
        mark.shnier@gmail.com
        ------------------------------
  • 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

  • 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
      ------------------------------
  • 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
      The part that matters the most is the first line inside the bit that says "#_fid_6" you would just change that to be whatever field you wanted but it must go by the field id(FID.) You can have multiple selectors in jquery and can do it this way. This will watch all 3 fields for changes and alert if the file size is not 1000... bytes? Whatever it is.
      $("#_fid_6,#_fid_7,#_fid_8").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 = "";   } });

      You are going to have to fix the indentation. QuickBase has absolutely ruined this and it's actually very difficult to get posted in one code box.
    • 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 : )
    • 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....