0

I have searched in the previous question, but most of the answer is only trim the file name. But for me, I would like to display an alert message to user when their filename length exceeds certain number.

Let say I have an file upload input box:

<input type="file" name="userfile" id="userfile" accept="image/jpeg, application/pdf">

When user uploads a file, a function will detect or calculate the length of the filename. If I limit the length to 15, user can only upload 15 characters-name file which includes the extension, like mickymouse.jpg, else if more than this number, display a warning message.

I have no idea how do I do this in JavaScript. Thanks for your help, much appreciated.

newfurniturey
  • 37,556
  • 9
  • 94
  • 102
Jason X.
  • 173
  • 10
  • 3
    Why would you care what the file is called? Someone uploading a file should be able to name it whatever they want on their own machine, yeah? You're not actually keeping the file name provided by the user on your own server, are you? – Brad Jun 09 '17 at 03:16
  • What is purpose of requirement? – guest271314 Jun 09 '17 at 03:22
  • Because if I display the file name in my webpage, if it is so long, it will ruin my webpage design. The display length is too long and messes up the format of the page – Jason X. Jun 09 '17 at 03:24
  • @JackyX. Why don't you just shorten it when you display it? i.e. turn `super-duper-long-file-name.jpg` into `super-du...jpg`? – ceejayoz Jun 09 '17 at 03:30
  • I have no idea to write that code too, because my situation is like while($row = mysqli_fetch_assoc($result)) { {$row['file_name']} } how should I trim the file name? – Jason X. Jun 09 '17 at 03:31
  • @JackyX. https://stackoverflow.com/questions/11434091/add-if-string-is-too-long-php – ceejayoz Jun 09 '17 at 13:45

1 Answers1

0

You can use the File.name web API for this.

To accomplish this, you'll want to add an onchange event to your input field, and then create a javascript function to capture the event. In that function, you'll access the selected file's name and perform the validation. For example:

<input
    type="file" name="userfile" id="userfile"
    accept="image/jpeg, application/pdf"
    onchange="validateFile(this)"
/>

<script>
    function validateFile(fileInput) {
        var files = fileInput.files;
        if (files.length === 0) {
            return;
        }

        var fileName = files[0].name;
        if (fileName.length > 15) {
            alert('File input name to long.');
        }
    }
</script>

It's worth noting, for security reasons, you should not store the file with the name the user supplies. It's safe to store it in a database and used as a label when showing users (pending you sanitize it first) - but the file path you save on your server should be 100% controlled by you.

newfurniturey
  • 37,556
  • 9
  • 94
  • 102
  • Yes, for me I saved the name in database, when I display it on a table with a href, if the file name is too long, the table width expands expands and expands, then it ruins my whole page design format. That's why I wanna limit the file name instead of trimming the file name. – Jason X. Jun 09 '17 at 03:30