Preventing Users from Uploading Anything Other than PDFs with Vue

I am currently working with Bootstrap-Vue and Vue2. Utilizing the Form File Input, I want to enable users to upload files, but specifically in PDF format. To achieve this, I have included 

accept="application/pdf"
:

<b-form-file
    v-model="fileLoc"
    browse-text="choose"
    accept="application/pdf"
/>

However, despite setting the file type to PDF, users can still select "All" and pick a non-PDF file:

https://i.sstatic.net/JOKoZ.png

What steps should I take to ensure that users only upload files in PDF format?

javascriptvue.jspdfbootstrap-vue

Answer №1

It seems like the answer you're looking for can be found within the link you provided 😊

"Please note that not all browsers fully support or respect the use of the accept attribute on file inputs."

To ensure that the uploaded file is indeed a PDF, I recommend creating a custom function for validation (and remember to implement server-side validation as well, as users may try to change the file extension to PDF).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to display the string following a space in the value attribute of an hbs file

<input type="text" class="form-control" id="exampleInputEmail2" name="productName" value={{product.productName}} > When I input 'Smart Phones' into product.produc ...

javascripthtmlnode.jsexpresshbs

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

javascriptjqueryhtmlcssscroll

Logging in with oidc-client and IdentityServer4 on separate domains

I am currently working on a VueJs application hosted on localhost which utilizes the oidc-client.js library for logging in to an IdentityServer4 server located in a production environment on another domain. Upon successful login, I am redirected back to t ...

c#vue.js.net-coreidentityserver4oidc-client-js

Passing a MySQL connection to scripts in Express

After setting up the mysql connection with all the required parameters in app.js, is there a way to make it accessible to other scripts in routes/ without having to redeclare or require the mysql parameters again, simply by using client.query(..)? ...

javascriptnode.jsexpress

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...

javascripthtmlbuttontoggle

Using webGL for rendering drawElements

I am working with face-indices that point to specific points to draw triangles in a loop. Unfortunately, when executing my code, I encountered the following error in the web console: WebGL: drawElements: bound element array buffer is too small for given c ...

javascriptwebgl

What is the best way to create a backup copy of my project using git?

To ensure the safety of my project, I took the necessary steps to back it up. First, I initialized a repository using git init Following that, I committed all files by executing git add . git commit -am "first commit" Now, the next step involves pushin ...

javascriptnode.jsgitgithubversion-control

Does __ only function with curried functions as intended? What is the reason for it working in this case?

I'm trying to figure out the reason behind the successful usage of __ in this particular code snippet : function editAddress (id, addressId, model) { return BusinessService .getById(id) .then(unless( () => checkUrlValue(add ...

javascriptnode.jsfunctional-programmingramda.js

The Heatmaps.js script encountered an Uncaught ReferenceError

I am currently utilizing the heatmaps.js library along with the Google Maps API to showcase a map with a heatmap overlay. So far, I have successfully displayed the map and retrieved the necessary data from the database. However, I'm encountering an is ...

javascriptphpjqueryapiheatmap

Tips for creating a pop-up window on an ASP.NET web form

I am looking to incorporate a popup window as a child of my primary asp.NET form. The popup window will allow users to input information using a dropdown list. When the popup window appears, it will take focus and disable the main window. ...

c#javascriptasp.netajax

Dynamic Lookup Material Table

I am currently using MaterialTable imported from "material-table". import MaterialTable from "material-table" I am attempting to make the 'lookup' for an editable table dynamic. My goal is to have a drop-down with edit options when I make change ...

javascriptreactjsmaterial-uimobxmaterial-table

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

I'm struggling to display an image on my website. I have the necessary code parts, but it's not working as expected. function showImage() { $('.img').addClass('display'); } function hideImage() { $('.img'). ...

javascripthtmlcss

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

javascripthtmlcssresponsive-designcross-browser

Once invoked by an ajax request, the $().ready function is executed

The functionality of this code is flawless when running on its own. However, once I make an ajax call to it, the code fails to execute. I suspect that the issue lies within $().ready, but I haven't yet identified a suitable replacement. Any suggestio ...

javascriptjqueryajaxdocument-ready

Customizing listview appearance in asp.net with css and enhancing with javascript

When I print, the css class is not being used although it appears when using the program <script type="text/javascript"> function printDiv() { var divToPrint = document.getElementById('DivIdToPrint'); ...

javascriptasp.netcssprinting

Express is unable to locate the specified property

Here is my controller code snippet: exports.showit = function(req, res){ res.render('showpost', { title: req.post.title, post: req.post }) } In my post model, I have included title and name objects: title: {type : String, default : &apos ...

javascriptnode.jsexpressejs

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

I am working on developing a webpage that is specifically designed to work for resolutions of 800 x 600 pixels and higher. Any other resolutions will display the message "This website can only be accessed from desktops." Here is my approach using jQuery: ...

javascriptjqueryhtmlangularjscss

Avoiding page refresh while utilizing the ng5-slider component in Angular

I am currently working with an ng5-slider that has a customizable range from 0 to 1000. However, I have encountered an issue when adjusting the slider at the bottom of the page - it refreshes and automatically takes me back to the top of the page. I would ...

javascriptangular

What is the correct way to outline the parameters for deactivating functions?

Request for Assistance! I am facing a challenge with multiple blocks in my WordPress website. Each block contains a checkbox, two select options, and an element that needs to be toggled based on the selected options in the dropdowns. The functionality to ...

javascriptjquery

JavaScript sticky navigation bar - error displayed in console

Hey there, I'm having an issue with my Sticky-menu. I've been trying to troubleshoot it but keep getting these console error messages: 1. Cannot read property 'offsetTop' of null at HTMLDocument. 2. Cannot read property 'class ...

javascriptsticky