Forums

Restrict File Type

krez 21 Jul, 2011
Hey all!

A site I'm working on has chronoform installed and in one of the forms it requires 2 jpg's and a pdf file. In the file upload tab in chronoform I have it set to only accept those formats. I guess clients are having difficulty understanding that they can only upload in those formats and after clicking on the send button they assume they are done with the form without reading the error at the top. Is there any way I can make a pop-up box that tells them they haven't uploaded the right file type? I need to have something like that happen before they can submit the form.

Thanks!

-Krez
GreyHead 21 Jul, 2011
Hi Krez,

First off a big sign by the Upload box I suggest.

I've never tried it but I think that you could write a JavaScript snippet to check the upload box when there is an entry and see if the suffix looks OK. Here's an example I found with a quick Google - not checked and not necessarily the best script.

Bob
krez 21 Jul, 2011
Hmm. I can't get that to work. Is there any way I can do it within the chronoform code? I see in chronocontact.html.php the function that declares an error with the upload is called cf_alert, but I can't seem to find it in any of the other files. Maybe something in lv_valid/invalid? Just fyi, I really don't know what I'm doing as far as this extension is concerned... Thanks for your help Bob!
GreyHead 29 Jul, 2011
Hi krez,

Here's a script snippet that works in CFv4:
window.addEvent('domready', function() {
  $('submit_btn').addEvent('click', checkFileTypes);
});
function checkFileTypes() {
  var inputs = $$('#chronoform_my_form_name input[type=file]');
  console.log(inputs); 
  var re = /\..+$/;
  var hash = {
    '.pdf' : 1,
    '.jpg' : 1
  };
  inputs.each(function(el) {
    var filename = el.value;
    console.log(filename);
    if ( filename ) {
      var ext = filename.match(re);
      if ( hash[ext] ) {
        $('submit_btn').disabled = false;
        return true;
      } else {
        alert("Invalid file type "+ext+", please select another file");
        $('submit_btn').disabled = true;
        return false;
      }
    }
  });
}
You need to put this into a Load JavaScript action and edit it to replace 'my_form_name' with the name of your form and to put the allowable file extensions in the hash list.

Bob
This topic is locked and no more replies can be posted.