Issue with displaying oversized video previews in an Angular project

I am trying to enable users to upload videos to the server, but I need to provide them with a preview of the video before uploading it. However, I am facing an issue while attempting to do so.

Uploading small videos works fine, but when trying to upload larger videos for previewing, the page crashes.

This is the code snippet that I have written:

ConvertFileToAddress(event): Promise<any> {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(event);
        reader.onload = (e) => {
            resolve(e.target['result']);
        };
    });
}

Can anyone help me solve this problem?

Answer №1

After conducting some research, I was able to discover the solution.

I made a modification to my code as follows:

onFileSelection(event) {
  let selectedFile = event.target.files[0];
  var URL = window.URL;
  this.source = 
  this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(selectedFile));
  this.emitFileData.emit(selectedFile)
}

This adjustment proved successful!

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

Error in BehaviorSubject<any[]>: Unable to assign type 'any[] | null' to type 'any[]'

When I try to pass a BehaviorSubject from my CacheService to a component @Input() that expects an array, I encounter an error stating that 'any[] | Type 'any[] | null' is not assignable to type 'any[]'. This occurs even though the ...

Tips for dragging a button and dropping it onto an image

Snippet: <div class="col-md-8"> <?php $query = " SELECT * FROM " .TB_OTHERS; $result1 = $conn->query($query); if($result1->num_rows >0) { while($rowquerycat = $result1->fetch_assoc() ...

CSS styles are combined and included at the beginning of the index.html file

During the creation of a production version of my Angular 9.0.4 application, I noticed that the CSS is bundled and placed at the top of the dist/index.html file as shown below: <link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!docty ...

Utilizing object categories to split arrays and extract values in JavaScript with Highcharts

After receiving an array with a number of objects, my goal is to split it based on categories. Once the sum value of categories in the array reaches 15, I need to further divide the array as shown below for better organization. Any assistance would be gre ...

Animating the scaling of a background image with JavaScript resulted in a jittery, unstable image

I'm encountering a shaking effect when I animate a DIV container with a background image using JS. How can I make the animation smoother? $('body').on('click', '#container', function() { $("#container").animate({ ...

Syntax error: Unexpected character encountered in JavaScript code

Although this question has been asked numerous times before, I have not been able to find a solution that applies to my specific situation. I am currently working on a chat system that involves sending and receiving messages. Here is my PHP code: < ...

It is necessary to sign out users when a specific database value is set to false

Whenever a value in the firebase database is false, I need to shut down the app for maintenance purposes. A problem arises when the user is already logged in, as the function does not trigger unless I reload the app. I am looking for a way to trigger the f ...

How can the input validation be displayed in Ajax when the user interacts with it?

When utilizing Ajax, I only want to display validation for the input field that the user is interacting with, not all validations at once. Currently, my script shows all validations simultaneously when any input is filled out. How can I modify my code so t ...

The authentication for npm failed with a 401 error code when attempting to log in

When attempting to sign in to npm using the command npm login and providing my username, password, and email, I am encountering the following error message: The Registry is returning a 401 status code for the PUT request. Even though I have used the sa ...

Exploring Opencascade.js: Uncovering the Real Text within a TCollection_ExtendedString

I am currently attempting to retrieve the name of an assembly part that I have extracted from a .step file. My method is inspired by a blog post found at , however, I am implementing it using javascript. I have managed to extract the TDataStd_Name attribut ...

Tips for removing the splash screen in Ionic 2

I've made changes to the config.xml file by setting the value of the splash screen to none. As a result, the splash screen no longer appears. However, I'm now encountering a white screen instead. Is there a way to prevent this white screen from a ...

What is the best way to access and utilize the data stored in my database using mySQL, PHP, and JavaScript?

My Objective : When a user selects a location from the dropdown list, I want the function "newMark()" to place a marker on Google Maps; Current Achievements : The map is displayed along with the select field containing all locations saved in my database. ...

What strategies can I use to incorporate dynamic filtering using only AJAX while maintaining a functional browsing history?

As I work on implementing AJAX filtering for my e-commerce website, I am exploring different solutions. One approach I am considering involves generating all content statically server-side and then using AJAX requests on the same page with parameters. The ...

The CSS stylesheet is not being applied to the components in Next.js

I am currently facing an issue with styling my React/Next component. Despite trying to apply a stylesheet to enhance its appearance, the CSS doesn't seem to be taking effect. Could someone please provide guidance on how I can resolve this? I have att ...

Exploring the world of technology with jQuery, harnessing the power of JSON objects

I'm seeking assistance with creating JSON using JQuery, sending it via Ajax to a .NET webservice, and then deserializing it in .NET in order to save the data to a database. If anyone could provide guidance on where I might be going wrong, that would ...

Jquery plugin experiencing a malfunction

I am encountering an issue with my custom plugin as I am relatively new to this. My goal is to modify the properties of div elements on a webpage. Here is the JavaScript code I am using: (function($) { $.fn.changeDiv = function( options ) { var sett ...

What is the correct way to forcefully override an existing type in TypeScript?

As I work with Formik, a React form library, I find myself creating custom fields and utilizing the generic Schema type provided by Formik. This type represents the values object, which holds all the values for each field in the form. One of the custom co ...

The Angular router seems to be refusing to show my component

My Angular 2 App includes a Module called InformationPagesModule that contains two lazy load components (Info1 Component and Info2 Component). I would like these components to load when accessing the following routes in the browser: http://localhost:4200/ ...

Implementing dynamic input elements in React components and managing state changes

I am currently working on a React component that includes simple input fields to track state for an AJAX call. There is also a button that, when clicked, generates a new set of input fields identical to the original ones. As a React novice, I initially at ...

"Sticky Top Button That Stays in Place When Scrolling | Innovative CSS & jQuery

I've been inspired by the "Proceed to checkout" button on amazon.com and I want to recreate it. However, I'm facing a challenge as their website is not responsive and I can't find a way to view a device user agent in Chrome. To see what I&ap ...