Filename validation upload in javascript-CodePudding

I want to restrict the user to upload a filename that contain letters, special characters and space.

I would like to only allow numbers 0,1,2,3,4,5,6,7,8,9 and with a maximum of 11 numbers.

Example: 54874563101.png

An upload button solution in javascript will be perfect

Can someone help? Thank you

<button type="button" onclick="upload()" value="upload"  id="buttonUpload">Upload</button>

CodePudding user response：

You can check the file name length and then use regex to ensure only digits are provided within the name.

$("#file").on("change", function() {
    const rawFileName = $("#file").val().split('\\').pop().split(".");
    const fileName = rawFileName[0];
    const fileExtension = rawFileName[1];

    // Validate file extension.
    if (fileExtension !== "png") {
        alert("Only .png files are allowed!");
        return;
    }

    // Validate file name.
    if (fileName.length > 11) {
        alert("File name must be 11 or less characters!");
        return;
    }

    if (!(/^\d $/.test(fileName))) {
        alert("Only digits are allowed in the file name!");
        return;
    }

    // Validate file size.
    const fileSize = $("#file")[0].files[0].size;

    if ((fileSize < 40000) || (fileSize > 100000)) {
        alert("File size must be between 40kb and 100kb!");
        return;
    }

    // Validated.
    alert("File name valid!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <input type="file" id="file" accept="image/png" />
    <button type="submit">Submit</button>
</form>

Validating File Name

To fetch the file name using jQuery, we can use:

const fileName = $("#file").val();

However this will output a fill relative path along with the file extension, therefore we can further separate the file name and extension.

const rawFileName = $("#file").val().split('\\').pop().split(".");
const fileName = rawFileName[0];
const fileExtension = rawFileName[1];

We can then match the file name to determine it only contains digits using the regex expression /^\d $/:

^ Assets position at the start
\d Matches digit characters from [0-9]
Matches the previous token until the end of the string
$ Assets position to the end

Validating File Size

To fetch the size of a file in jQuery:

const fileSize = $("#file")[0].files[0].size;

This returns an int value containing the size in bytes of the first file that is uploaded. (in this form, only single-file uploads are allowed so it is stored under files[0])

if ((fileSize < 40000) || (fileSize > 100000))

40000 bytes equate to 40kb, and 100000 bytes is 100kb.

File Upload Extension Restriction

To restrict the file uploader to only accept specific file extensions, the accept property can be added to the input element.

<input type="file" id="file" accept="image/png" />

The image/png value only allows files with the .png extension, see unique file type specifiers for more information.