0

So the thing that's happening I am kind of stuck with the extensions of fileApi, I can't see to figure out how should I display the alert when the Upload file is not .pdf for example. I would really love some guidance. Thanks

Html

<form action="/Document" method="post" enctype="multipart/form-data">

        <div class="container">
            <div class="custom-file" style="margin-top: 25px; margin-bottom: 15px;">
                <input type="file" id="validatedCustomFile" name="document" required>
                <div style="color: red;"></div>
            </div>
            <div class="small">
                <ul>
                    <li>Maximum upload size is  / 1024) KB</li>
                </ul>
            </div>
            <div>

                <button type="submit" title="Next" class="btn btn-primary">Next</button>
                
            </div>
        </div>
    </form>


<script>
Js

    const InputFile = document.getElementById('validatedCustomFile');

    InputFile.addEventListener("change", function () {
        console.log(InputFile.files)
        for (const file of InputFile.files) {
            if (file.size > 1048576){
                alert(`${file.name} is to big! Max is 1024KB`);
            }
            if (file.type != '.pdf') {
                alert('This file type not allowed to be uploaded')
            }
        }    
    }
      
        )

</script>
marun
  • 17
  • 6
  • It's not too easy to [check the real type of a file](https://stackoverflow.com/a/29672957/1169519) if you want to make it properly. I don't quite get the question here, what exactly is your issue with the current code? – Teemu Mar 23 '22 at 14:14
  • @Teemu like I said I want to display an alert when file doesnt have ```pdf``` extension – marun Mar 23 '22 at 14:19
  • Yes, but your code [seems to work as it is](https://jsfiddle.net/bxtaLqw1/) ..? – Teemu Mar 23 '22 at 14:20
  • @Teemu not exactly try uploading the pdf file, it is still displaying the alert. – marun Mar 23 '22 at 14:22
  • 1
    Exactly, that's probably your question then. Instead of relying the extension name, I'd suggest you to follow the link in my first comment. Depending on how you're going to use the uploaded pdf, relying on file extensions can make your server really vulnerable. Just think about a file a malicious uploader has renamed from .php to .pdf, and you're happily uploading, saving and running that file on your server. – Teemu Mar 23 '22 at 14:31

2 Answers2

1

here, you need to set mime type of file . Here, I have mention application/pdf instead of ".pdf"

    const InputFile = document.getElementById('validatedCustomFile');

    InputFile.addEventListener("change", function () {
        console.log(InputFile.files)
        for (const file of InputFile.files) {
           
            if (file.size > 1048576){
                alert(`${file.name} is to big! Max is 1024KB`);
            }
            if (file.type != 'application/pdf') {
                alert('This file type not allowed to be uploaded')
            }
         
        }    
    }
      
        )
Hira Kumar Maharjan
  • 280
  • 1
  • 6
  • A little tweak. it is still like displaying the name of the file on the right of the input. How would I like reset the name when alert the pops up and you press ok. I hope you understood me. – marun Mar 23 '22 at 14:27
1

There is a simple method to it, by just adding to your form input accept=".pdf" The upload page is only going to display the file with .pdf extension and hide the rest. Something like this : <input type="file" id="validatedCustomFile" accept=".pdf" name="document" required> would work.

Dezz H
  • 322
  • 6
  • 23