The application I am working on consists of five pages. Users are required to upload a file, and that same file needs to be displayed on other pages when the user loads them.
Is there a way to achieve this functionality using Angular?
The application I am working on consists of five pages. Users are required to upload a file, and that same file needs to be displayed on other pages when the user loads them.
Is there a way to achieve this functionality using Angular?
Check out ngx-file-drop for file dropping functionality.
If you want to save the file for later use, consider storing it in localStorage.
Typescript
import { Component } from '@angular/core';
import { UploadEvent, UploadFile } from 'ngx-file-drop';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public files: UploadFile[] = [];
public dropped(event: UploadEvent) {
// set files
this.files = event.files;
// save to localStorage
localStorage.setItem('files', { files : this.files })
}
getFile() {
return localStorage.getItem('files');
}
}
HTML
<div class="center">
<file-drop headertext="Drop files here"
(onFileDrop)="dropped($event)">
</file-drop>
</div>
<ng-container *ngIf="files?.length > 0">
<hello *ngFor="let file of files" [file]="file"></hello>
</ng-container>
I have been developing a control panel that showcases various videos and posts sourced from an API. One div displays video posts with thumbnails and text, while another shows text-based posts. Below is the code for both: <div className=""> &l ...
Trying to find a solution for implementing TSDocs with a string literal type declaration in TypeScript. For instance: type InputType = /** Comment should also appear for num1 */ 'num1' | /** Would like the TSDoc to be visible for num2 as well ...
Hey there! I'm currently facing an issue with my ionic app. I added the ion-gesture to my project, but due to the ngFor loop pulling data from Firebase, the cards are unable to move. Here's a snippet of my code: <ion-card *ngFor="let po ...
In my code, I am utilizing Material UI's Select component, which functions as a drop-down menu. Here is an example of how I am using it: const [criteria, setCriteria] = useState(''); ... let ShowUsers = () => { console.log('Wor ...
I'm having trouble aligning the cards using Bootstrap's row and col- classes. The first three are behaving as expected, but the fourth one isn't cooperating. Any idea why this might be happening and any solutions you can suggest? View the i ...
I'm attempting to convert an array of objects into a dictionary using TypeScript. Below is the code I have written: let data = [ {id: 1, country: 'Germany', population: 83623528}, {id: 2, country: 'Austria', population: 897555 ...
I am working with a structure that looks like this: { documentGroup: { Id: 000 Children: [ { Id: 000 Status: 1 }, { Id: 000 Status: 2 ...
I am currently attempting to update my Angular project from version 4 to version 6. After numerous failed attempts to upgrade, I decided to uninstall and reinstall the Angular CLI using 'npm uninstall -g angular-cli' followed by a reinstallation. ...
I have encountered an issue with my form where the required attribute does not seem to work properly. Even when I leave the input field empty, the form still gets submitted. Here is a snippet of my code: <div class="form-group"> <div class="c ...
Currently, I am in the process of implementing correlationId functionality using express-correlation-id. I am diligently following the guidelines provided on this page: https://www.npmjs.com/package/express-correlation-id. I have successfully imported the ...
I am currently developing a simple app inspired by a tour of heroes (official angular tutorial). However, I have encountered an issue that I cannot seem to resolve, possibly due to my lack of understanding in basic programming concepts. Here is the code s ...
I have developed an ASP.NET Core 3.1 application that utilizes Microsoft.AspNetCore.SignalR 1.1.0 and Microsoft.Azure.SignalR libraries. In the Startup file, the SignalR setup is as follows: services.AddSignalR().AddAzureSignalR("Endpoint=https://xx ...
I am working with React and TypeScript and have the following code snippet: const fetchData = async () => { const res: any = await fetch("https://api.spotify.com/v1/search?q=thoughtsofadyingatheist&type=track&limit=30", { met ...
I'm currently working with Angular CLI and I want to save an email in Local Storage. Here is my HTML code: <input type="text" name="email_field" id="email"> <input type="submit" value="registration" onclick="save_email()"> Here is my Ty ...
Having trouble with file uploads to the S3 bucket using @aws-sdk/client-s3 library and encountering errors when uploading files larger than 70kbps: `TypeError: Failed to fetch at FetchHttpHandler.handle (fetch-http-handler.js:56:13) at PutObjectCommand ...
Currently, I am utilizing react in my project and I have encountered an error when passing props.children to the Header component. Despite passing React as the type, the following error message is displayed. I am unsure why this error is happening. e ...
I've created a schema where the username field should be unique, but I'm having trouble getting it to work (The "required" constraint is functioning correctly). I've tried restarting MongoDB and dropping the database. Any idea what I might b ...
My webpage contains multiple charts created using the Fusion Chart library. There are three different charts on the page, and I want to export each chart as a separate PNG file. However, when I click the export button, it generates separate images of the ...
<div> <div style="text-align:center"> <button class="btnClass">{{ submitButtonCaption }}</button> <button type="button" style="margin-left:15px;" class="cancelButton" (click)="clearSearch()"> {{ clearButtonCapt ...
I'm in the process of converting a JavaScript project to TypeScript and encountering difficulties with a certain section of my code that TypeScript is flagging as an issue. Within TypeScript, I aim to gather data in a dynamic object named licensesSta ...