Limiting size of files a user can upload.

  • 1
  • 2
  • Question
  • Updated 1 month 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,082 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,082 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

  • 30,434 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)
Photo of Sini Wickramasinghe

Sini Wickramasinghe

  • 376 Points 250 badge 2x thumb
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!
Photo of AustinK

AustinK

  • 1,804 Points 1k badge 2x thumb
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.
(Edited)
Photo of Sini Wickramasinghe

Sini Wickramasinghe

  • 376 Points 250 badge 2x thumb
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 : )
Photo of Sini Wickramasinghe

Sini Wickramasinghe

  • 376 Points 250 badge 2x thumb
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.... 
Photo of AustinK

AustinK

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