I am migrating from Angular js to Angular 8. How can I migrate these lines of code to Angular 8:
<button class="other-button contactUsSpecific"
type="button" data-ngf-
select="contactCtrl.uploadFiles($file)"
data-ngf-max-size="9MB"
data-ngf-model-invalid="errorFiles">
<span [innerHTML]="tk.contactus.upload"></span>
</button>
I cannot find data-ngf equivalent over the internet for Angular 8.
You should have look at the answer:1 to get information on how to upload file using Angular 8.
We can add maximum size of file constraint by modifying the function call on change at file input field.
Eg:
app.component.ts
export class AppComponent {
files: FileList;
fileToUpload: File = null;
maxFileSizeBytes: number = 9e+6;
handleFileInput(event){
this.files = event.target.files;
this.fileToUpload = this.files[0];
if(this.fileToUpload.size < this.maxFileSizeBytes){
console.log("Less than required size, file will be uploaded.");
}else{
console.log("Exceeding Size");
}
}
app.component.html
<div class="form-group">
<label for="file">Choose File</label>
<input id="file" (change)="handleFileInput($event)" type="file">
</div>
Make service call in if else block. Attaching stackblitz for more clarity
Angular File Upload Demo
Related
I am trying to change environment variable when I am inserting custom URL in text box and that will be change in Environment Variable on the basis of that am showing response on website.
Here is my TypeScript code:
generateQRCode() {
this.value = this.qrcodename;
localStorage.clear()
localStorage.setItem("key", JSON.stringify(this.qrcodename));
}
HTML
<div class="form-group">
<input
type="text"
class="form-control"
id="qr"
aria-describedby="qr"
placeholder="Enter code"
required
[(ngModel)]="qrcodename"
/>
</div>
and i want to change at this baseUrl with value of qrcodename
export const environment = {
production: false
baseUrl: "http://127.0.0.1:5000/"
};
I just do with local storage and access it on where i want to use this Url input here is my simple code
getDashboardData(): Observable<any> {
let url = JSON.parse(localStorage.getItem('key'));
return this.http.get(url + "/dashboard");
}
I need to upload all files from a folder to server.
I'm trying to implement Select Directory window, and not Select file.
The normal way like:
<input type="file" webkitdirectory directory/>
Did not work for me, and showed Select File window.
But when I created empty regular html file with this input tag, it was working fine.
Does anybody know how to implement the solution using React?
Thank you!
try bheptinh.
<input directory="" webkitdirectory="" type="file" />
In React 17 with Typescript, if you are using useRef Hook, the best bet is to extend React's HTMLAttributes (in the same file of your input) and then simply add directory and webkitdirectory attributes in input tag as
import * as React from "react";
export const ImportForm: React.FunctionComponent<FormProps> = (props) => {
const folderInput= React.useRef(null);
return (
<>
<div className="form-group row">
<div className="col-lg-6">
<label>Select Folder</label>
</div>
<div className="col-lg-6">
<input
type="file"
directory=""
webkitdirectory=""
className="form-control"
ref={folderInput}
/>
</div>
</div>
</>)
};
declare module 'react' {
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// extends React's HTMLAttributes
directory?: string; // remember to make these attributes optional....
webkitdirectory?: string;
}
}
I am working on a angular application, currently to upload a file I am using this :
<label class="btn btn-default">
<input type="file" (change)="selectFile($event)">
</label>
<button class="btn btn-success" [disabled]="!selectedFiles"
(click)="upload()">Upload</button>
with methods on my .ts file, it is working well.
I want to upgrade this to material angular components raised button like that right now :
<button mat-raised-button>
<input type="file" (change)="selectFile($event)">
</button>
<button mat-button disabled [disabled]="!selectedFiles" (click)="upload()">Upload</button>
the disabled button is doing well but the input file part doesnt work , it prints baddly and does not open a file folder search window. any ideas?
Won't advise using input field within a button, better you hide the file input and then a button to trigger it. The below example will show a minimal example of it
#Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}} is for Uploading</h2>
</div>
<button mat-raised-button (click)="openInput()">
Select File to Upload
</button>
<input id="fileInput" hidden type="file" (change)="fileChange($event.target.files)" >
<button mat-button [disabled]="!ourFile" (click)="upload()">Upload</button>
`
})
export class App {
name:string;
ourFile: File; // hold our file
constructor() {
this.name = `Angular! v${VERSION.full}`
}
/**
* this is used to trigger the input
*/
openInput(){
// your can use ElementRef for this later
document.getElementById("fileInput").click();
}
fileChange(files: File[]) {
if (files.length > 0) {
this.ourFile = files[0];
}
}
/**
* this is used to perform the actual upload
*/
upload() {
console.log('sending this to server', this.ourFile);
}
}
Check this plnk
With the above example, you should be able to style your button without distorting HTML semantics
I have made a MVC ASP.NET CORE 1.0 Webapp.
It will be used as offline app, i.e: server will be localhost always.
All I want to do is let the user click on a button called "browse" on the html page. and then a filepicker appears in front of them so they can just pick a file.
and then all I want to do is read that text file and do some logic with it later on.
I have tried Following
HTML
<form asp-action="Mark" asp-controller="Home" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" name="file" style="display:none;" onchange="$('#upload-file-info').html($(this).val());">
Browse
</label>
<span class='label label-info' id="upload-file-info"></span>
</div>
<button type="submit" class="btn btn-default">Submit</button>
Controller Code
[HttpPost]
public IActionResult Mark(IFormFile file)
{
return View();
}
IMPORTANT :
the above code works fine to upload the file, but I dont want to upload any file as it takes too much time and unnecessary memory space, I only want to read the contents of the text file which user selected.
Thanks In Advance
You can do that by using FileReader in JavaScript.
Here is an example:
HTML:
<input type="file" id="file-input" />
JavaScript:
function readFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result; // here is your file content
};
reader.readAsText(file);
}
document.getElementById('file-input').addEventListener('change', readFile, false);
That will take care of reading file content on the client site but if you need to do that in the back end (controller) then you've to upload the file.
I need to get a path from my application with angular2 typescript
the path that I get is (c:\fakepath\img.png )
I ask if there is any solution
thanks
Below is the example
ts file
upload(file)
{ console.log('file'+':'+file.value)
const inputNode = file.value.replace("C:\\fakepath\\", "");
console.log(inputNode);
}
In the above function i have passed file value as a parameter and used javascript replace function to replace "C:\fakepath\" with a blank space
html file
<input class="file" (click)="file.click()" type="file" accept="image/*" #file >
<button mat-raised-button (click)="upload(file)">Upload</button>