Limiting size of files a user can upload.

  • 1
  • 2
  • Question
  • Updated 2 years ago
  • Acknowledged
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?
Photo of Cee Jones

Cee Jones

  • 180 Points 100 badge 2x thumb

Posted 2 years ago

  • 1
  • 2
Photo of John Thomas

John Thomas

  • 1,062 Points 1k badge 2x thumb
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.
Photo of Cee Jones

Cee Jones

  • 180 Points 100 badge 2x thumb
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.
Photo of John Thomas

John Thomas

  • 1,062 Points 1k badge 2x thumb
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

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

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 28,304 Points 20k badge 2x thumb
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.
(Edited)