Check the TypeScript file for correct type declarations

I have customized the code inspired by this particular guide in order to showcase uploaded images within an angular application.

public uploadFile = (files) => {
    if (files.length === 0) {
      return;
    }

    var mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = "Only images are supported.";
      return;
    }

    var reader = new FileReader();
    reader.readAsDataURL(files[0]); 
    reader.onload = (_event) => { 
      this.imgURL = reader.result; 
    }
}

It's working smoothly, but I also aim to verify if the uploaded file is a video. Should the correct syntax be

mimeType.match(/video\/*/)

?

Answer №1

It appears you are correct:

Here is a list of complete mime types

Flash           .flv    video/x-flv
MPEG-4          .mp4    video/mp4
iPhone Segment  .ts     video/MP2T
3GP Mobile      .3gp    video/3gpp
QuickTime       .mov    video/quicktime
A/V Interleave  .avi    video/x-msvideo
Windows Media   .wmv    video/x-ms-wmv

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

Ways to restrict the values allowed in a TypeScript type?

I have a requirement: type AllowedKeys = 'a' | 'b' | 'c' ... and now I want to define a type where the key has to be one of the values in AllowedKeys. For example: type MyType = { a: number; b: string; c: boolean; d: {} / ...

Finding a solution for the network error encountered during the execution of XMLHttpRequest.send in the specified file path (...distfxcoreservermain.js:200

Having recently delved into Angular, I successfully completed the development of my angular web application. While using ng serve for production, everything ran smoothly. However, after incorporating angular universal and attempting npm run dev:ssr or np ...

Error: Unable to locate the reference for "foo" while utilizing TypeScript in combination with Webpack

My Chrome extension is functioning properly when using JavaScript alone. However, when attempting to incorporate TypeScript with Webpack, I encountered an issue where the function foo could not be found. Uncaught ReferenceError: foo is not defined Here ...

Executing an API call in Angular using a for-loop

I'm working on a project where I need to make multiple API calls based on the length of a mockInput.json file. Here's how I have implemented it: api.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpHeade ...

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

Showcasing a roster of contacts within a user-friendly interface, with the opportunity for users to effortlessly include additional individuals

RESOLVED: Special thanks to @Gourav - I simply needed to modify my form data input as shown below: buildFormDynamic(item: Item): FormGroup { return this.fb.group({ data: [item && item.data], }); } UPDATE: While the form builder code seems corre ...

Display various components from `ViewContainerRef.createComponent()` in distinct `<div>` elements to ensure a proper grid layout using Bootstrap

I am looking to dynamically add child components to a parent component while ensuring that they are displayed within the Bootstrap grid system. Following the guidelines in the Angular documentation (https://angular.io/guide/dynamic-component-loader), I ha ...

How to send Multipart form data with a string payload

Many suggestions in regards to this issue recommend utilizing some form of FormData within nodejs for building a multipart form. However, I am seeking to achieve the same result without relying on the FormData library. Instead, I aim to use only request h ...

display a discrete delete button when pressing a button within ng-bootstrap

My current setup uses ng-bootstrap with Angular4. Image https://i.sstatic.net/83UhP.png In the interface, a checkbox button is used to show responses fetched from the backend. By clicking the button, the x button disappears along with other elements belo ...

Utilizing TypeScript for messaging in React Native and React

I have encountered a specific issue with my React projects. When using npx without Typescript, I receive error messages as shown in the following screenshots: https://i.sstatic.net/g68ho.png https://i.sstatic.net/Kmye5.png Interestingly, in my React Nat ...

Analyzing a string using an alternative character

I want to convert the string "451:45" into a proper number. The desired output is 451.45. Any help would be appreciated! ...

Convert JavaScript to TypeScript by combining prototype-based objects with class-based objects

My current challenge involves integrating JavaScript prototype with class-based programming. Here is an example of what I've tried: function Cat(name) { this.name = name; } Cat.prototype.purr = function(){ console.log(`${this.name} purr`) ...

Substitute a particular element within a text

I'm currently working on an Angular 9 application where I'm implementing search filters for the Shopify Graphql API. As part of this process, I am constructing a query which looks like: first: 1, query: "tag:'featured-1'", af ...

Swap out the traditional for loop with a LINQ query utilizing the any method

In my TypeScript code, I have the following snippet: public executeTest(test: Test): void { const testFilters: Record<string> = getTestFilters(); let isTestingRequired: boolean = false; for (let i: number = 0; i < testFilters.leng ...

The FormControl is currently presenting ",required(control)" within its value field

Upon loading my form, the default values in the input fields are set to: ,required(control) { return isEmptyInputValue(control.value) ? { 'required': true } : null; } The template structure of my form is as follows: <form [formG ...

Utilizing ng-bootstrap within a rebranded module

I'm facing an issue with my nav-bar module that utilizes ng-bootstrap: import {NgModule, NgZone} from '@angular/core'; import { CommonModule } from '@angular/common'; import {NavigationComponent} from "./components/navigation/navi ...

Passing a variable from a child component to a parent component in Angular 2 using EventEmitter and a

I am experiencing a challenge with the Event Emitter in my child component. My goal is to pass a variable with EventEmitter to the parent component, but I would like to include a timeout function. Currently, the code looks like this: CHILD: export class ...

Bring in a template in TypeScript with no need for require statement

Currently, I'm utilizing TypeScript along with Angular 1.5 component. In my scenario, I have a custom decorator in place through which I send templates via require function. The setup is functional; however, I am consistently receiving a tslint warnin ...

Combining pixijs with TypeScript in Ionic 2 using npm

To begin, I ran the command npm install -g ionic Followed by ionic start pixiApp blank --v2 Navigated to the pixiApp directory with cd pixiApp Installed necessary dependencies using npm install Added a specific version of pixi.js (4.1.0) with npm install p ...

Having difficulty transforming ".jsx" to ".tsx" in a Next.js application while working with "getStaticProps"

My application utilizes the Printifull API and performs well with .jsx using the code snippet below: import axios from "axios"; export default function ApiTest(props) { console.log(props); return( <></> ( } export async ...