how to use the javascript "includes" method properly to check if a string contains certain characters

Question

I would like to know how to use the javascript "includes" method properly to check if a string contains certain characters. This is what I have below but I think its wrong because the msgBox is not popping up. I basically want to limit my users to only upload to types of files which is xls and xlsx. I would also like to prevent the upload if the file size file.size is more than 5MB.

function submitFunction()
{
    // $('#fileLabel').val("");
    $('uploadLoader').removeClass("done");
    document.getElementById("uploadLoader").style.display = "none";
    $.msgbox("Your file has been uploaded");
    //$("uploadLoader").hide();

    var input, file;
    var extension = file.name; 

    if (!window.FileReader) {
        $.msgbox("p", "The file API isn't supported on this browser yet.");
            return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        $.msgbox("p", "This browser doesn't seem to support the `files` " 
                      + "property of file inputs.");
    }
    else if (!input.files[0]) {
        $.msgbox("p", "Please select a file before clicking 'Load'");
    }
    else if (!extension.includes("xls")) {
        $.msgbox("Please select an xls or xlsx file");
    }
    else if (!extension.includes("xlsx")) {
        $.msgbox("Please select an xls or xlsx file");
    }
    else {
        file = input.files[0];
        $.msgbox("p", "File " + file.name + " is " + file.size 
                        + " bytes in size");
    }
}




<iframe width="0" height="0" border="0" name="dummyframe" style="display: none;" 
        id="dummyframe"></iframe>
<form id="uploadForm" name="form1" method="post" enctype="multipart/form-data" 
    action="/api/BulkUpload" target="dummyframe" onsubmit="submitFunction()">
    <div>
        @*<label for="caption">Upload Bulk File</label>*@
        @*<input name="caption" type="text" />*@
    </div>
    <div id="inputLabel">
        @*<input id="fileLabel" name="image1" type="file" />*@
        <input id="fileinput" name="image1" type="file" />
    </div>
    <div>
        <span class="btn btn-success fileinput-button">
            <i class="icon-plus icon-white"></i>
            <span>upload file</span>
            <input id="submitButton"class="submit" type="submit" 
                    value="ok" onclick="validation()"/>
        </span>
    </div>
</form>

`file` is not initialized, then you do `var extension = file.name` which probably fails with an exception. — Jonas Wilms, Nov 06 '18 at 14:50

Ashish Yadav · Accepted Answer · 2018-11-06T16:20:44.103

Rather than includes method you can pop out the extension of file and check the value.

var file = input.file[0]; // I don't see your file where is it?
var extension = file.name;

// Split your file name "yourfile.ext" with dot "."
// pop method will return the last element of array.
var poppedExt = extension.split('.').pop();

and you can check poppedExt for desire extension.

if(poppedExt == "xls" || poppedExt == "xlsx") { // alert something }

if(file.size <= 5000000) { // alert something } // file.size returns bytes so 5000000 is 5MB, I have used online tool to convert byte to mb.

Hope this helps.

how to use the javascript "includes" method properly to check if a string contains certain characters

1 Answers1