Exploring the options for accepting various file formats with Swal SweetAlert

Currently, I am using Swal Sweet Alert within my Vue.js application. I have successfully implemented code to allow image files, but now I am seeking assistance on how to extend this functionality to include multiple file types such as PDFs, PPTs, and Docs in addition to images. Below is the snippet of the existing code:

swal({
      title: 'Select file',
      input: 'file',
      inputAttributes: {
        'accept': 'image/*',
        'aria-label': 'Upload the file'
     }
})
Your inputs and guidance on this matter will be highly appreciated.
javascriptvue.jsyii

Answer №1

Make sure to designate your meme categories using a comma , like so:

swal({
  title: 'Select file',
  input: 'file',
  inputAttributes: {
    'accept': 'image/*,application/pdf,application/vnd.ms-powerpoint,application/msword',
    'aria-label': 'Upload your profile picture'
  }
})

Check out the example on Codepen: https://codepen.io/anon/pen/pGENrg?&editable=true

To see a comprehensive list of meme categories, visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

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

Encountering null injector errors when running ng test on an Angular application

I have successfully developed a webpage in my Angular application and it is running perfectly. But, when I run ng test, some errors are popping up in Karma like the one shown in the image below: https://i.sstatic.net/lUKS5.png superuser.component.ts // ...

javascriptangulartypescriptunit-testingkarma-jasmine

Increase the Speed of setInterval in JavaScript

I'm currently experimenting with gradually decreasing the interval at which a function is executed within a setInterval method. Below is a simplified example code snippet: var speed = 100; window.setInterval( speed -= 0.01 , speed); I suspect that ...

javascript

What is causing the recurring failure of file input changes to take effect?

Here is the code snippet I'm working with: <input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" /> Along with the handler function: public onFileSelected(e: Fi ...

javascriptangular

The values of variables persist even after refreshing the page

let quote; let author; // Establishing the Get Method for the Root Route in ExpressJS app.get('/', (req, res)=>{ res.render('home', { quote: quote, writer: author }); }); // Configuring the Post Method for t ...

javascriptnode.jsexpressherokuejs

Erase a chat for only one user within a messaging application

Currently, I am in the process of building a chat application using nodejs and mongodb. In order to structure my database properly, I have created two models: conversation and messages. Message.js conversationId: { //conversationID }, body: ...

javascriptnode.jsmongodb

Looking to tidy up the HTML produced by JQueryUI?

Is there a way to achieve this? I am developing a template generator that includes resizable and draggable elements within a preview window. The issue arises when I try to extract the generated HTML, as it contains unwanted JQueryUI classes and divs for ea ...

javascriptjqueryhtml

Using Vue-cli 3.0 to configure options for pre-processor loaders across multiple files

When looking at the config in vue.config.js as per the info on the official documentation const fs = require('fs'); module.exports = { lintOnSave: false, css: { loaderOptions: { sass: { data: fs.readFileSync('src/sass ...

webpackvue.jsvue-cli

When the ajax response comes in, my javascript code seems to suddenly stop

After sending a POST request, my JavaScript suddenly stops working for some unknown reason. Here's the situation: I visit my webpage, fill out the form, and then click 'Click me' : Upon clicking OK in the alert popup, I see the expected ou ...

javascriptcssajax

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

Although it may seem straightforward, I am new to Javascript and struggling to find or create the script I need. I have a list of BIN numbers for credit cards and want to extract the first 6 digits of the card number field to determine the type of card, an ...

javascriptjqueryhtml

What is the best way to add hidden columns in Telerik Grid MVC3?

I'm currently working with a grid where I need to hide certain columns using the following code: foreach (var attr in grid.Attr) .Columns(columns => { columns.Bound(attr.key) .Width(attr.width) .Visible(attr.isVisi ...

javascriptjqueryasp.net-mvc-3telerik

Retrieving over 300,000 rows from elasticsearch and saving them as a .csv document

Hi there, I am currently working on a website in nodejs that utilizes an Elasticsearch database. One of my indexes, 'bigData*', contains 366,844 rows with each row consisting of 25 items, each being a different string of varying sizes (with a max ...

javascriptdatabaseelasticsearchnpm

I have an npm package that relies on X (let's say material-ui). What is the best way to prevent users from having to install

Hey everyone, I recently released an npm package called X that relies on material-ui as a dependency. While many users of X already have material-ui installed, there are some who do not. How can I ensure that those who have material-ui installed continue t ...

javascriptnpm

The best practices for managing item spacing in React or React Native

I am facing some challenges while trying to adjust the spacing of my components. My goal is to have the grid occupy 90% of the screen, with the gear icon taking up the remaining 10% <View style={{ paddingLeft: insets.left, padding ...

javascriptreactjsreact-native

The error message "TypeError: Cannot read property 'then' of undefined" is commonly seen in Promises and Express 4.x

[UPDATE] I encountered an issue while attempting to incorporate the promise, resulting in the following error message: TypeError: Cannot read property "then" of undefined getResult(options1).then(function(body){... let options1 = {...}; app.post("/web ...

javascriptnode.jsexpressasynchronousrequestjs

securely managing file access through lockfile.locksync in node.js

Currently, I am utilizing lockfile.locksync to secure a file in my node.js application. However, I am interested in understanding the inner workings of this utility in more detail. Despite multiple resources referring to it as a "very polite lock file util ...

javascriptnode.jsnpmlocking

Considering an attempt to remove a data entry from a table using AngularJS, node.js, and mongoDB

Can anyone help figure out why this isn't working as expected? $scope.removeProduct = function(product){ console.log(product._id); $http.delete("/api/products/" + product._id) .success(function (data) { ...

javascriptangularjsnode.jsmongodb

Link JSON filters to specific JSON nodes on the map

I have data representing nodes and links for a force directed graph. The links can have different numbers of connections between them, such as one, two, or three links: {"nodes": [{"id": "Michael Scott", "type": "boss"} ,{"id": "Jim Halpert", "t ...

javascriptjsond3.jssvg

Looking for a specific text on $location update in AngularJS

Is there a way in AngularJS to search the DOM for text after a new view is loaded? The filter almost does this, but I'm not interested in returning a new array of elements. For instance; html <div ng-view=""> <ul> &l ...

javascriptangularjs

SelectBoxIt jquery plugin can be applied after the completion of populating options in the select element with AngularJS

Utilizing AngularJS, I am dynamically populating a select box with the code below: <select ng-model="department" ng-options="dept as dept.name for dept in departmentList" class="fancy"> <option value="">-- select an optio ...

javascriptjqueryangularjs

Exploring sub-properties within objects in v-data-table

Currently, I am facing a situation where I need to pass an object as the value for all columns in my v-data-table. Instead of the usual format like this: { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37 } I want ...

vue.jsvuetify.jsv-data-table