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");
}
Related
I'm trying to set up a really simple page to render documents based on inputs. I have a form with some inputs on one page, and I want the data appear on the next page when submitted.
I'm still learning Next and I'm trying to use the pages/api to do this but I am not sure how exactly it works.
As of now when I submit the form it is redirecting me to a JSON page with the data, how can I make is so when I hit submit, it uses the JSON data to redirect to another page displaying it?
Here is the code:
index.js
export default function Home() {
return (
<>
<h1 Name Generator</h1>
<form action="/api/form" method="post">
<div>
<label for="name">Name</label>{" "}
<input
type="text"
id="name"
name="name"
placeholder="Enter name."
required
/>
</div>
<div>
<button style={{ display: "flex" }} type="submit">
Submit
</button>
</div>
</form>
</>
);
}
pages/api/form.js
export default function handler(req, res) {
// Get data submitted in request's body.
const body = req.body;
// Optional logging to see the responses
// in the command line where next.js app is running.
console.log("body: ", body);
// Guard clause checks for name,
// and returns early if they are not found
if (!body.subject || !body.teachers) {
// Sends a HTTP bad request error code
return res.status(400).json({ data: "name not found" });
}
// Found the name.
// Sends a HTTP success code
res.status(200).json({
data: {
name: `${body.name}`,
},
});
}
here is the result page I want it to render the data into and what I tried
result.js
import { data } from "../pages/api/form";
export default function Result() {
console.log(data);
return (
<>
<>
<h1>Name Generator</h1>
<hr></hr>
<div>
<h4>Name</h4>
<hr></hr>
{data.name}
</div>
</>
))
</>
);
}
When I submit I get JSON at
host/api/form
data: {
name: "name"
}
I am not sure what to try as I believe there is a simple way to do this that I am just missing
I am creating a simple program in Electron. The program has the option of running several separate functions based on what the user needs. All functions require a file to be inputted and a save location for the resulting output file. This is done using a form. I would like to have it that once the user inputs the locations it is displayed in a div beside the input buttons. Is there a way to do this within electron?
code:
<!-- File Input Section -->
<div class = "individual-input-container-2">
<div class="input-container" >
<div class = "inner-input-container">
<input type="file" id="file-input" class = "input-top" >
<p class = "input-desc-file">File</p>
</div>
<div>
</div>
</div>
<div class="input-container">
<div class = "inner-input-container">
<input type="file" webkitdirectory id="save-input"class = "input-bottom">
<p class = "input-desc-save">Save Location</p>
</div>
</div>
</div>
Here is photo of what I am building
I did something similar a while back and mine looks like this:
HTML:
<button id="choosePath">Choose Folder</button>
JS:
const { dialog } = require('electron').remote;
document.querySelector('#choosePath').addEventListener('click', (e) => {
dialog.showOpenDialog({
title:"Select Directory",
properties: ["openDirectory"]
}, (folderPaths) => {
// folderPaths is an array that contains all the selected paths
if(folderPaths === undefined){
return;
} else {
// Do something with the folderPaths variable
}
});
});
It's basically just an ordinary button opening a Dialog Window where you can select a path.
If you did select one the full Path is passed to a callback function where you can use it to do whatever you have to do with it.
You can try Electron's dialog.showSaveDialog ()/dialog.showSaveDialogSync () functions. They return a Promise<string> or a string representing the file/folder which was selected by the user, respectively. Then you can easily display in your <div>.
Pic 1: Angular 4
In the first picture I have my user input and I can display in the console variables username and password. In the second picture I am sending username and password with my token. How can I use the username and password from first picture and send those with my header? Please help.
Pic 2: json request
Headers class is constant so when you use it only is possible set headers while you are using new statement. i.e.
new Headers({header:value})
new Headers().append('header', 'value');
However this not work because is a constants
let headers = new Header();
headers.append('header','value')
You only can do thing as
new Headers({header:btoa(userna + ':' + password)});
HTML
<form #myForm="ngForm" (submit)="onSubmit(myForm)">
<input type="text" name="username">
<input type="password" name="password"
<input type="submit" value="Submit">
</form>
COMPONENT
onSubmit(form) {
if(form.valid) {
console.log(form.control.username);
console.log(form.control.password);
}
}
Ok if you are looking for your logins data, le proper way is to emit an event like this :
login-form component:
#output
onLogin : EventEmitter<any> = new EventEmitter();
login(e){
***
this.onLogin.emit({username:username,password:password});
}
app component.html
<login-form (onLogin)="getData($event)"></login-form>
here "$event" represent your object "{username:username,password:password}";
otherwise you can store datas in a variable and run "getData" when you want.
Other suggestions:
Use angular reactive-forms like this :https://angular.io/guide/reactive-forms#add-a-formgroup
maybe run your xhr from angular services.
I am trying to create search bar(form), but I need it to have pretty URL but I am using Vue-router so my app.js looks like this
let Search = Vue.component('search', require('./components/Search.vue'));
const routes = [
{ path: '/protocols/:param', component: Search },
]
now functionally when I type /protocols/test I get my desired results, but I am not sure how to create a form so when I type something to redirect me to that route /protocols/:param since my page is vue component
<form action="/protocols/?what goes here?">
<input type="text" placeholder="Search..." class="" name="" id="search">
</form>
since all tutorials are made for search on the same page, but I need to dedicate one for results
You can use v-model to assign the input value to your data and use a computed property to generate the URL action like this:
<form :action="urlAction">
<input type="text" placeholder="Search..." class="" name="" id="search" v-model='search'>
</form>
Now use data and computed props to build the dynamic URL
data () {
return {
search: ''
}
},
computed: {
urlAction () {
return "/protocols/" + this.search
}
}
I want get the file name from my html input tag in a modal view and save it using Angular2. Can someone help me?
You can do next:
HTML:
<input type="file" (change)="fileEvent($event)" />
TypeScript:
fileEvent(fileInput: Event){
let file = fileInput.target.files[0];
let fileName = file.name;
}
You can try a more elegant option:
HTML:
<input #file type="file" (change)="updateFile(file)">
Script:
updateFile(file: HTMLInputElement) {
let name = file.value;
}
HTML
<button (click)="imgFileInput.click()">Add</button>
{{ imgFileInput?.files[0]?.name }}
<input hidden type="file" #imgFileInput (change)="uploadSingle($event)"/>
Component
uploadSingle(event) {
const fileName = event.target.files[0].name;
}
HTML
<input type="file" (change)="onFileChange($event)">
Script
onFileChange(event) {
let files = event.target.files[0].name;
}
This work form me:
HTML
<input type="file" (change)="detectFiles($event)">
<div class="output">Seleccionado: {{ fileName }} </div>
TS
selectedFiles: FileList;
fileName: string;
detectFiles(event) {
this.selectedFiles = event.target.files;
this.fileName = this.selectedFiles[0].name;
console.log('selectedFiles: ' + this.fileName );
}
This link's https://stackoverflow.com/a/44932086/4281182 solution suggested by # Selçuk Cihan did not help
so my workaround was to make the fileInput param type "any" by doing this
fileEvent(fileInput){
let file = fileInput.target.files[0];
let fileName = file.name;
}
so in TS runtime this is a pure JS code
Anyways thanks for this great ans it saved me a lot of time