as you see, the HTML content is not colorful, and it cannot autocomplete HTML tag
There are 2 ways to do that.
1) You could manually set the syntax to "Javascript React".
For that click on "Javascript" on the bottom right of your screen:
Then simply enter "react" and select it. After that you should have autocomplete for the html parts inside your render functions.
2) You can instruct VSCode to always open .js files as "javascriptreact". For that go to your settings and copy files.associations over to your local settings. Make sure it looks something like this and save:
"files.associations": {
"*.js": "javascriptreact"
}
Note on that one: This will always set the syntax to "javascriptreact" when you open .js files and might not always be what you want. A better solution would be to generally name react files as myfile.jsx. This way vscode will automatically set the syntax to "javascriptreact".
Hope this helps.
Save the file as .jsx ie (App.jsx) instead of .js
This is because you are saving the file as .js ie App.js.JavaScript files cannot understand HTML tags.
Another alternative is you can save in (.js) but your web pack should be configured in such a way that it should transpile it into .jsx.
For doing refer this - https://github.com/facebook/create-react-app
React understand javascript xml only.
Related
How can I create a directory chooser in html page.
If I use input file element I can select file only, but I need to select directory instead.
I need to do this beacause the user should select a right path inside his computer.
Any solutions ?
Try this, I think it will work for you:
<input type="file" webkitdirectory directory multiple/>
You can find the demo of this at https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3 ,
and if you need further information you can find it
here.
Can't be done in pure HTML/JavaScript for security reasons.
Selecting a file for upload is the best you can do, and even then you won't get its full original path in modern browsers.
You may be able to put something together using Java or Flash (e.g. using SWFUpload as a basis), but it's a lot of work and brings additional compatibility issues.
Another thought would be opening an iframe showing the user's C: drive (or whatever) but even if that's possible nowadays (could be blocked for security reasons, haven't tried in a long time) it will be impossible for your web site to communicate with the iframe (again for security reasons).
What do you need this for?
As of 2022 there is now a directory picker API:
https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker
async function getDir() {
const dirHandle = await window.showDirectoryPicker();
// run code for dirHandle
}
In case if you are the server and the user (e.g. you are creating an app which works via browser and you need to choose a folder) then try to call JFileChooser from the server when some button is clicked in the browser
JFileChooser chooser = new JFileChooser();
chooser.setCurrentDirectory(new java.io.File("."));
chooser.setDialogTitle("select folder");
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
chooser.setAcceptAllFileFilterUsed(false);
This code snipped is from here
This is my solution. It is the same as the above answers but you should notice that webkitdirectory = "true".
<input id="design" type="file" webkitdirectory = "true" directory/>
I did a work around. I had a hidden textbox to hold the value. Then, on form_onsubmit,
I copied the path value, less the file name to the hidden folder. Then, set the fileInput box to "". That way, no file is uploaded.
I don't recall the event of the fileUpload control. Maybe onchange. It's been a while. If there's a value, I parse off the file name and put the folder back to the box. Of, course you'd validate that the file as a valid file.
This would give you the clients workstation folder.
However, if you want to reflect server paths, that requires a whole different coding approach.
This isn't provided by HTML because of the security risk. <input type='file' /> is closest, but not what you are looking for.
If you're still using IE11 on Windows 10, you may try this example that uses an ActiveX control to achieve what you want.
Again if the OS is Windows, you can use VB scripts to access the core control files to browse for a folder.
If you do not have too many folders then I suggest you use if statements to choose an upload folder depending on the user input details.
E.g.
String user= request.getParameter("username");
if (user=="Alfred"){
//Path A;
}
if (user=="other"){
//Path B;
}
VS code has suddenly stopped recognizing html files (the file icon is the default one for files with no extension)
all other file extensions work just fine
except for html
the tags still work but it won't autocomplete
Adding this to file extensions worked for me:
"files.associations": {
"*.html": "html"
}
In my case, for this problem the solution was to manually add *.html to files.associations, in user settings. Its unlogical but it seems that somehow the extension wasn't associated to the type of file. Now everything works perfectly...
Go to the settings (In mac it is Code -- > Preferences --> Settings)
In the search bar search for Association.
In Files:Associations click on Add items.
update key = *.html & Value = html
Below is the screenshot for reference.
I had the same issue but none of the other solutions worked for me!
You can try this:
Go to the path where the "settings.json" file exits, for my case the path is:
C:> Users> User123 > AppData > Roaming > Code > User > settings.json
Now, paste the code in the file:
"code-runner.executorMap": {
"html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
}
Now search for the "files.associations" section in your settings.json file:
As an example
Now if you have the "files.associations" section then just add the line there:
"*html": "html"
(don't forget to write a comma after a line if there are more lines in it)
or if you don't have a "files.associations" section, then copy paste the code there:
"files.associations": {
"*.rmd": "markdown",
"*html": "html"
},
I had the same problem in Windows 10 a few minutes ago:
Yeah, from the solutions above I did this but still had some errors:
File -- > Preferences --> Settings
In the search bar search for Files: Association.
In Files:Associations click on Add item button.
update Item = *.html & Value = HTML
As shown below:
When I saved, I got this error
Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.
The problem is that terminal.integrated.shellArgs settings have been deprecated.
One of the answers here will help:
So I just had this problem and I figured it out the problem was from an extension that I installed which is the pyscript extension I disabled it and everything started to work again!
Well if you have pyscript extension installed, disable it. It has conflicts with html files I guess.
Or if you don't want to disable it just ctrl+shift+p then change language mode. Select configure file association for html.
This applies for any extension not just pyscript. For me it was pyscript
I display an SVG file using HTML img tag through the .html file of an Angular 6 component. Let's call this SVG file a.svg.
This a.svg image contains parts that are linked to other SVG files, and let's just consider the first of them, named b.svg.
All the SVG files are static. They are place in a subfolder of assets in Angular 6 application folder.
When I open a.svg directly under my Internet browser, I can click on hyperlinked parts and navigate to b.svg, without any problem.
Under Angular 6, file a.svg is displayed correctly, but apparently, I can not click on interactive parts.
I investigate the issue without being able to find a real clue about the root cause of such behabior. Maybe, related to security issue. I wonder
is this a desired behavior of Angular 6?
is there a way to tell Angular 6, to allow user interaction on these images ?
Finally found the right way to do so.
First, read security guide for angular which provides many good hints, although far from being exhaustive.
To make my code run smoothly, this is what I changed
Firstly, in angular component .html file, I changed the HTML img tag into a div tag, on which I used the [innerHTML] binding to an internal property named svgFromFile
<div class='e2e-inner-html-bound' [innerHTML]='svgFromFile'></div>
Then, in angular component .ts file, I changed the implementation to use bypassSecurityTrustHtml() on the content of the target SVG file
this.fn = '/assets/urba/diagram/' + params['fn'] + '.svg'; // from route parameter to image asset to be served
this.http.get(this.fn, {
responseType: 'text'
}).subscribe(
data => {
console.log(data);
this.svgFromFile = this.sanitizer.bypassSecurityTrustHtml(data);
},
error => console.log('svgFromFile', error)
);
Doing so, embedded URLS in SVG file are now active and dereferenceable.
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!
How can I create a directory chooser in html page.
If I use input file element I can select file only, but I need to select directory instead.
I need to do this beacause the user should select a right path inside his computer.
Any solutions ?
Try this, I think it will work for you:
<input type="file" webkitdirectory directory multiple/>
You can find the demo of this at https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3 ,
and if you need further information you can find it
here.
Can't be done in pure HTML/JavaScript for security reasons.
Selecting a file for upload is the best you can do, and even then you won't get its full original path in modern browsers.
You may be able to put something together using Java or Flash (e.g. using SWFUpload as a basis), but it's a lot of work and brings additional compatibility issues.
Another thought would be opening an iframe showing the user's C: drive (or whatever) but even if that's possible nowadays (could be blocked for security reasons, haven't tried in a long time) it will be impossible for your web site to communicate with the iframe (again for security reasons).
What do you need this for?
As of 2022 there is now a directory picker API:
https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker
async function getDir() {
const dirHandle = await window.showDirectoryPicker();
// run code for dirHandle
}
In case if you are the server and the user (e.g. you are creating an app which works via browser and you need to choose a folder) then try to call JFileChooser from the server when some button is clicked in the browser
JFileChooser chooser = new JFileChooser();
chooser.setCurrentDirectory(new java.io.File("."));
chooser.setDialogTitle("select folder");
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
chooser.setAcceptAllFileFilterUsed(false);
This code snipped is from here
This is my solution. It is the same as the above answers but you should notice that webkitdirectory = "true".
<input id="design" type="file" webkitdirectory = "true" directory/>
I did a work around. I had a hidden textbox to hold the value. Then, on form_onsubmit,
I copied the path value, less the file name to the hidden folder. Then, set the fileInput box to "". That way, no file is uploaded.
I don't recall the event of the fileUpload control. Maybe onchange. It's been a while. If there's a value, I parse off the file name and put the folder back to the box. Of, course you'd validate that the file as a valid file.
This would give you the clients workstation folder.
However, if you want to reflect server paths, that requires a whole different coding approach.
This isn't provided by HTML because of the security risk. <input type='file' /> is closest, but not what you are looking for.
If you're still using IE11 on Windows 10, you may try this example that uses an ActiveX control to achieve what you want.
Again if the OS is Windows, you can use VB scripts to access the core control files to browse for a folder.
If you do not have too many folders then I suggest you use if statements to choose an upload folder depending on the user input details.
E.g.
String user= request.getParameter("username");
if (user=="Alfred"){
//Path A;
}
if (user=="other"){
//Path B;
}