1

I have an HTML form with an input field to upload a file. I want the file chosen to match the correct file name desired (mcust.csv). If they select a different file, I want to trigger an error with JS.

The form is shown below:

<form name="upload-form" id="upload-form" action="upload-information.php" enctype="multipart/form-data" method="post">

    <input type="file" name="dealers_csv" id="dealers_csv" required="required" data-message="Please attach the mcust.csv file.">

    <button type=\"submit\" name=\"Submit\" id=\"Submit\" class=\"csbutton-color upload-button\" style=\"margin-right:10px;\" >Submit files</button><img id=\"loader\" src=\"../images/loading.gif\" style=\"display:none;\"/>

</form>

After the user attaches a file, I want to detect the name of the file (mcust.csv) and if the file name is NOT mcust.csv, I want to "do something" (show an error) using Javascript/jQuery BEFORE the form is submitted.

Here's the JS :

$(document).ready(function () {
    $("#upload-form").validator({
        position: 'top center',
        offset: [-12, 40],
        relative: true,
        accept: "csv",
        message: '<div><em></em></div>'
    })
    // make sure that mcust.csv is the attached file. If not, throw alert message
    $("input#dealers_csv").on("change", function() {
        var dealers = $("input#dealers_csv");
        var arrfilepath = dealers.val().split("\\");
        var filename = arrfilepath[arrfilepath.length - 1];
        if (filename != "mcust.csv") {
            alert("Wrong file! Please select 'mcust.csv'");
            dealers.val('');
        }
    });
    // make sure that morders.csv is the attached file. If not, throw alert message
    $("input#orders_csv").on("change", function() {
        var orders = $("input#orders_csv");
        var arrfilepath2 = orders.val().split("\\");
        var filename2 = arrfilepath2[arrfilepath2.length - 1];
        if (filename2 != "morders.csv") {
            alert("Wrong file! Please select 'morders.csv'");
            orders.val('');
        }
    });

});

EDIT: I've updated the above code to the working version. One question: Is there a way to show the data-message rather than an 'alert' if they attach the wrong file?

adamdehaven
  • 5,890
  • 10
  • 61
  • 84

5 Answers5

2
  1. Disable HTML submission of form. HTML submission will get priority over JS otherwise.
  2. Add onclick/click event to submission button.
  3. Click event calls a function that validates your data.

  4. If data ok, submit form by JavaScript.

    <script>
   function validate(){

    if (document.getElementById('dealers_csv').value != 'mcust.csv'){
        alert('Filename must be mcust.csv');
    }else{
        document.getElementById('upload-form').submit();
    }
 }
</script>


<form name="upload-form" id="upload-form" enctype="multipart/form-data" method="post">

   <input type="file" name="dealers_csv" id="dealers_csv">

   <input type="button" value="Submit" onclick="validate()"/>

 </form>
fred2
  • 1,015
  • 2
  • 9
  • 29
  • See the edited comment. I've tested - it works. I know you have a jQuery solution now, but this is the uber-basic old-school method for doing the same thing. – fred2 Mar 12 '12 at 23:49
1

This: http://jsfiddle.net/pratik136/DpJYe/ should answer your question

EDIT: fiddle updated to reflect your form submit requirement

bPratik
  • 6,894
  • 4
  • 36
  • 67
1

This has been answered here https://stackoverflow.com/a/651767/437226
This will check the extension.

To check the file name without an excessive amount of code, put in a hidden field:

<input id="attachmentname" type="hidden" value="mcust.csv" />

Then in the rules add an equivalency checker:

$("#myform").validate({
  rules: {
    attachment: {
      equalTo: "#attachmentname"
    }
  }
});
Community
  • 1
  • 1
ramblinjan
  • 6,578
  • 3
  • 30
  • 38
  • Ah, sorry, I misread the question. Is there any specific reason you need the exact name versus just the extension? – ramblinjan Mar 12 '12 at 18:24
  • I'm setting this up so that another employee can upload a CSV file on a daily basis that updates order information on our company website. I just want to make it fool-proof so that they don't accidentally upload the wrong file. – adamdehaven Mar 12 '12 at 18:27
  • Edited to add name checking. You might not like this way, but I prefer it because it keeps your file name within the form and your functionality in your js (I'm big on separation of information, style, and functionality). – ramblinjan Mar 12 '12 at 18:34
1

I think you are using JQuery tools validator. Here is the modified code for validation.

HTML

<form name="upload-form" id="upload-form" action="upload-information.php" enctype="multipart/form-data" method="post">

<input type="file" name="dealers_csv" id="dealers_csv" required="required" filename="mcust.csv">

<button type="submit" name="Submit" id="Submit" class="csbutton-color upload-button" style="margin-right:10px;" >Submit files</button><img id="loader" src="../images/loading.gif" style="display:none;" />

</form>

Javascript

$(document).ready(function () {

  //definfing custom validator
    $.tools.validator.fn("[filename]", function(input, value) {
        var fName = input.attr("filename"),
            regX = new RegExp('.*\\' + fName + '$');
        if (value.match(regX)) {
            return true;
        } else {
            return {
                en : "Wrong file! Please select '" + fName + "'"
            };                                
        }        
    });

   // assigning validator to file input
    $("#dealers_csv").validator({
        position: 'top center',
        offset: [-12, 40],
        relative: true,
        message: '<div><em></em></div>'
    });

    //triggering validation on change of file
    $("#dealers_csv").change(function(){
       $(this).data("validator").checkValidity();    
    });    
});

try to understand this code and modify it for your needs

Nemoy
  • 3,347
  • 1
  • 15
  • 14
0

Modify your change event handler to this:

$(document).ready(function () {
    $("#dealers_csv").change(function(){
        var dealers =$(this).val();
        if(!dealers.match(/.*\\mcust.csv$/g)){
            alert("Wrong file!" + dealers);
            this.value = "";
            return false;
        }
     });
});

Here is the fiddle http://jsfiddle.net/NYwns/1/

Nemoy
  • 3,347
  • 1
  • 15
  • 14
  • I updated my code up top to reflect what you have here... but it's still not working when I attach the file...? – adamdehaven Mar 12 '12 at 18:43
  • please check this fiddle http://jsfiddle.net/NYwns/2/ `keep your code in document ready` It is working fine for me. – Nemoy Mar 12 '12 at 19:03
  • I updated the code at the top to the working version (utilizing someone else's answer that seemed to fit with what I already had). Can you look at the question in the EDIT and see if you know a solution? – adamdehaven Mar 12 '12 at 19:07
  • I edited your code above to what I have currently. I want to replace the `alert("Wrong file! Please select 'mcust.csv'");` with code that will display the data-message from the form. Is this possible? – adamdehaven Mar 12 '12 at 19:17
  • Which plugin are you using for validation? – Nemoy Mar 12 '12 at 19:22
  • I'm not sure... I know it's jQuery... my code looks like what is displayed at the top in the original question. – adamdehaven Mar 12 '12 at 19:27