Save the file path into a variable using Angular 4

Looking to store the path of a file in a variable when uploading:

<input type="file" fromControlName="file" />

This is just one field among many in a form, and I need to upload it along with other data.

storeSubjects(subject : Subjects){
        let url = 'http://api.azharcouncil.com/api/subjects/PostSubject?code='+subject.code+'&Type_ID='+subject.kindOfSub+'&Faculty_Id='+subject.name+
        '&Main_Tittle='+subject.mainTitle+'&Child_Tittle='+subject.subTitle+'&Description='+subject.description+'&Notes='+subject.notes+'&Subject_Path='+subject.file;
        let headers = new Headers({ 'Content-Type': 'text/plain' });
        let options = new RequestOptions({ headers: headers }); 
        return this.http.post(url, JSON.stringify(subject), options);
    }

I specifically need to include &Subject_Path=(path of file) in the request.

Answer №1

Storing the file path in order to upload it

The actual path of the file is kept hidden from HTML for security reasons. Revealing the absolute path could pose a potential security risk. The only information accessible is the file name, which can be retrieved as part of the File object using events such as onchange or oninput.

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

Safari not properly adjusting height of bootstrap cards within column in row

I'm currently working on a bootstrap and angular project. I've noticed that in Safari, the card heights are not behaving as expected compared to other browsers like Firefox, Chrome, and Edge. I have tried setting the height to 100%, but it seems ...

Having trouble uploading SharePoint list item with attachment from Angular to ASP.NET Core Web API via NgModel

Recently, I successfully added a SharePoint list item with an attachment from Angular to ASP.NET Core Web API. This was achieved using FormControl in the Angular application. I found guidance on how to upload files from Angular to ASP.NET Core Web API at ...

Utilizing HTML types in a custom hook with React and Typescript

Is it possible to pass type annotations like as SVGElement or as HTMLDivElement into a hook? function AppSVG(){ const ref = useResizeObserver((entry) => { ... }) as SVGElement;// <- How can the SVGElement be passed to the hook? r ...

Exploring the world of Jasmine and Angular: How to effectively mock nested methods within the Class being tested

Hello esteemed community... I have encountered a perplexing issue that appears straightforward, but has eluded my attempts at resolution... The challenge I am facing involves testing a Controller-Class in Angular. This particular codebase is laden with d ...

Dealing with type errors involving null values when using interfaces in Typescript

I encountered an issue related to the error property within the defaultState constant: interface AuthState<T = any> { auth: T; error: null | Error; loading: boolean; } export const defaultState: { auth: null | AuthState } = { auth: null, e ...

Encountering an Invalid JSON Error During a GET Request in the Process of Updating to Angular

As I embark on updating my application to Angular 9 CLI and ensuring all NPM packages are up to date, I encounter a peculiar issue. Whenever I attempt to execute a GET call to fetch data upon page load, the page breaks and a 400 error is returned from the ...

Is it recommended to exclude the NGXS NgxsLoggerPluginModule for production deployments?

When developing, it's common to use the following imports: import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin'; import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin'; Is it recommended to remove these imp ...

A robust method for converting object properties to their specified InstanceType or leaving them unchanged

I am trying to create a method named Instantiate in TypeScript that will accept an object of any type. If the object contains any properties that are classes, then the method should instantiate those classes and the return type of those properties should ...

Efficiently load Angular modules only when needed on different routes

My Angular project utilizes lazy loading for modules and below are the defined routes: { pathMatch: 'full', path: '', loadChildren: () => import('./pages/landing/home-page/home-page.module').then(m => m.Hom ...

Can you explain the purpose of typescript's tsserver?

Can you explain the role of tsserver? I understand that it assists IDEs in providing features such as error checking and auto-completion. However, I have been unable to locate any API documentation for it. ...

The orthographic camera slices the rendered scene down the middle

My current project utilizes an Orthographic camera and MapControls, rendering the scene correctly. However, I'm facing an issue where the camera cuts the render scene in half: https://i.sstatic.net/Fz208.png The initialization of my orthographic ca ...

An issue has occurred with attempting to access the 'phone' property of a null value. This error is at the root of the problem and needs to

I have implemented a function to retrieve all clients from an API: this.ws.getallclients().subscribe( client => { this.client = client.map((clients) => { this.filteredOptions = this.addsale.controls['client_id'].valueChanges. ...

Finding the topOffset in Angular by targeting a class called 'dropdown'

I am trying to achieve the same result in Angular as I do with jQuery/HTML. When using jQuery, the topOffset value remains the same whether I scroll or not. // get the top offset of the dropdown (distance from top of the page) var topOffset = $(".drop ...

The Karma testing feature in Angular Quickstart encounters issues right from the start

When attempting to run karma tests after a clean install of the official Angular quickstart on Windows 10, I encountered an issue. Following a series of four commands, here is what happened: C:\projects\temp>git clone https://github.com/angul ...

Executing callback function within Observable.prototype.subscribe in Angular 2

Having issues with the complete callback not functioning as intended. Here's a breakdown: Take a look at this image and note the complete callback within the subscribe method. The complete function is only triggered when observerOrNext is called. If ...

Employing square bracket notation based on the input data

I'm currently in the process of enhancing some code within my library, but I've encountered a perplexing issue with bracket notation not functioning as expected when attempting to call an imported class. The parameter type expects a camelCased s ...

What is the best way to incorporate the Semantic-UI typings file into an Angular project?

There are numerous tutorials available on how to install typings for third-party libraries in Angular2/4. The process typically involves steps such as: Running npm install --save-dev jquery Using typings install dt~jquery Importing the library in th ...

Straightforward npm package importing syntax

I am looking for a way to simplify the import statements when publishing a new TypeScript package on npm. Ideally, I would like to be able to use something like: import { FirstClass, SecondClass } from "my-repo"; However, currently I have to use longer i ...

Using the .map method to filter through JSON data

I'm facing some challenges filtering a .json file to exclude private videos on an app related to a YouTube channel. There are certain videos marked as private that I do not want to display within the app. Can someone assist me in properly filtering th ...

When using Angular, NestJS, and TypeORM, an issue may arise where null values are

My coworker and I are currently collaborating on a client project. We are utilizing NestJS for the backend, Angular for the frontend, and MySQL for the database. We have encountered an issue that we are struggling to resolve: Within the Entity of the Ne ...