At the moment, I am trying to list projects on a website in a grid. Some of them link to another page on the site and others link to another domain page. At the moment I am using React-Router's 'Link' to go from one page to another, however this doesn't work when going to a page outside of the domain. In the JSON file, I check for the 'url' variable which returns either the URL if its public or 'project-page' if it is local. I can't figure out how to differentiate between the two in JSX; is there a work around while still utilizing the JSON file?
<div className="projects">
{projectData.map((projectDetail, index) => {
return(
<div className='project-card'>
<Link to={projectDetail.url}>
<img src={require('./images/icons/' + projectDetail.alt + '.jpg')} alt={projectDetail.title}/>
<h3>{projectDetail.title}</h3>
<p>{projectDetail.subtext}</p>
</Link>
</div>
)
})}
</div>
Well, to differentiate you can check the content of the projectDetail.url you are retrieving from that JSON in your javascript file, if that matches your domain (your website - having a project-page as you mention) or is it an external domain. You can also set a flag value in your json file. For each project set a value (e.g externalUrl: 1 or 0) and then check if projectDetail.externalUrl is 1 (it contains an external link). Then, maybe try the following for external domains:
<Link to={{ pathname: "external URL" }} target="_blank" />
In your case:
<Link to={{ pathname: projectDetail.url }} target="_blank" />
See this answer for detailed information: React-Router External link
Edit 1
If Link does not work for external websites, this would probably be related to the version of react-router you are using. Actually, to navigate to external websites you can as well use anchort tags <a> to redirect. Check what URL your project has and then conditional render a <Link> or <a>.
<a href="www.example.com" target=_blank></a>
I am using ng-cordova, I have stored an image in a subdirectory of cordova.file.dataDirectory, and am unable to load it via img[src] but I can load it via [style], do I have to do anything special to make it work in the img[src]?
$scope
{
"Image":"file:///data/data/{package}/files/{subdir}/{imagename}.png"
}
Works
<div style="background-image:url({{Image}})"></div>
Doesn't work
<img src="{{Image}}" />
This was a silly error, I forgot to check my $compileProvider service. I had it working for filesystem but not file.
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|filesystem|file):/);
I use Thymeleaf for the templates of a web application.
When I make a link I use a URL like this:
<img class="info"
src="../../../resources/img/image.png"
th:src="#{/resources/img/image.png}" />
How can I configure the base URL in Thymeleaf?
I need this because my application runs in the current URL:
http://localhost:8080/myapp
And it works fine, but then it redirects to:
http://www.myapp.com/
Then the images was search in:
http://www.myapp.com/myapp/resources/img/image.png
instead of:
http://www.myapp.com/resources/img/image.png
I want something like:
<property name="baseURL" value="http://www.myapp.com"/>
Try Server-relative URLs:
<img class="info" th:src="#{~/resources/img/image.png}" />
UPD
Actual link to url part of Thymeleaf 2.1. tutorial
You can pass the baseUrl as parameter to template. Then: <a th:href="${baseUrl + '/my/uri?maybe=' + someParam}". Hope that helps.
I have a part of my web application that is an RESTfull api and part a more standard web-pages.
I wish to have the REST part with some custom filters such as the EntryPoint, SuccessHandler and FailureHandler. This part is within the /rest/** mapping.
In the other hand, everything else needs to have more common filters and is mapped with /**.
The problem is to find an easy way to define the filterChainProxy with different mapping-filters.
Right now this solution doesn't work:
<!-- Normal web app -->
<http auto-config="true" use-expressions="true" authentication-manager-ref="authenticationManager">
<form-login/>
<logout/>
<intercept-url pattern="/**" access="hasRole('ROLE_USER')" />
</http>
<!-- Configure RESTfull services -->
<http use-expressions="true" authentication-manager-ref="authenticationManager" entry-point-ref="restAuthenticationEntryPoint" >
<form-login authentication-success-handler-ref="restAuthenticationSuccessHandler" login-page="/rest/login" username-parameter="username" password-parameter="password" />
<logout logout-url="/rest/logout" />
<intercept-url pattern="/rest/**" method="GET" access="hasRole('ROLE_USER')" />
<intercept-url pattern="/rest/**" method="POST" access="hasRole('ROLE_ADMIN')" />
<intercept-url pattern="/rest/**" method="PUT" access="hasRole('ROLE_ADMIN')" />
<intercept-url pattern="/rest/**" method="DELETE" access="hasRole('ROLE_ADMIN')" />
</http>
It complains with: the univseral match being before other patterns.
Is there a way to define such a thing without resorting to define the filterChainProxy with the definition? The http version does help quite a lot to reduce the amount of configuration as I will have to manually set a UsernamePasswordAuthenticationFilter etc.
The next problem is more simple: I have to respond, after the form-login authentication with a JSON object.
So far, I have implemented a SuccessHandler (actually a version of the SimpleUrlAuthenticationSuccessHandler without the redirect part).
How do I write my JSON output?
I must have something like this:
HTTP 200 OK
with:
{"success":true,"customer {"email":"customer#email.com","session_id":"b83a41dfaca6785399f00837888886e646ff9088"}}
and a similar thing with the FailureHandler. It must be quite simple and it's surely is some very basic thing, but how do you do that? Redirecting to a custom controller is not a solution since I will have the 301 redirect status that a very simple REST client might not be able to understand.
At the very least, I wish to have only the http header and no body at all.
thanks!
If you can upgrade to Spring Security 3.1 it supports multiple chains using namespace configuration.
We have simple HTML form with <input type="file">, like shown below:
<form>
<label for="attachment">Attachment:</label>
<input type="file" name="attachment" id="attachment">
<input type="submit">
</form>
In IE7 (and probably all famous browsers, including old Firefox 2), if we submit a file like '//server1/path/to/file/filename' it works properly and gives the full path to the
file and the filename.
In Firefox 3, it returns only 'filename', because of their new 'security feature' to truncate the path, as explained in Firefox bug tracking system (https://bugzilla.mozilla.org/show_bug.cgi?id=143220)
I have no clue how to overcome this 'new feature' because it causes all upload forms in my webapp to stop working on Firefox 3.
Can anyone help to find a single solution to get the file path both on Firefox 3 and IE7?
For preview in Firefox works this - attachment is object of attachment element in first example:
if (attachment.files)
previewImage.src = attachment.files.item(0).getAsDataURL();
else
previewImage.src = attachment.value;
Actually, just before FF3 was out, I did some experiments, and FF2 sends only the filename, like did Opera 9.0. Only IE sends the full path. The behavior makes sense, because the server doesn't have to know where the user stores the file on his computer, it is irrelevant to the upload process. Unless you are writing an intranet application and get the file by direct network access!
What have changed (and that's the real point of the bug item you point to) is that FF3 no longer let access to the file path from JavaScript. And won't let type/paste a path there, which is more annoying for me: I have a shell extension which copies the path of a file from Windows Explorer to the clipboard and I used it a lot in such form. I solved the issue by using the DragDropUpload extension. But this becomes off-topic, I fear.
I wonder what your Web forms are doing to stop working with this new behavior.
[EDIT] After reading the page linked by Mike, I see indeed intranet uses of the path (identify a user for example) and local uses (show preview of an image, local management of files). User Jam-es seems to provide a workaround with nsIDOMFile (not tried yet).
We can't get complete file path in FF3. The below might be useful for File component customization.
<script>
function setFileName()
{
var file1=document.forms[0].firstAttachmentFileName.value;
initFileUploads('firstFile1','fileinputs1',file1);
}
function initFileUploads(fileName,fileinputs,fileValue) {
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
var filename = document.createElement('input');
filename.type='text';
filename.value=fileValue;
filename.id=fileName;
filename.title='Title';
fakeFileUpload.appendChild(filename);
var image = document.createElement('input');
image.type='button';
image.value='Browse File';
image.size=5100;
image.style.border=0;
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0; i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != fileinputs) continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange= function () {
this.relatedElement.value = this.value;
}}
if(document.forms[0].firstFile != null && document.getElementById('firstFile1') != null)
{
document.getElementById('firstFile1').value= document.forms[0].firstFile.value;
document.forms[0].firstAttachmentFileName.title=document.forms[0].firstFile.value;
}
}
function submitFile()
{
alert( document.forms[0].firstAttachmentFileName.value);
}
</script>
<style>div.fileinputs1 {position: relative;}div.fileinputs2 {position: relative;}
div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}
input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);
opacity: 0;z-index: 2;}</style>
<html>
<body onLoad ="setFileName();">
<form>
<div class="fileinputs1">
<INPUT TYPE=file NAME="firstAttachmentFileName" styleClass="file" />
</div>
<INPUT type="button" value="submit" onclick="submitFile();" />
</form>
</body>
</html>
Simply you cannot do it with FF3.
The other option could be using applet or other controls to select and upload files.
Have a look at XPCOM, there might be something that you can use if Firefox 3 is used by a client.
One extremely ugly way to resolve this is have the user manually type the directory into a text box, and add this back to the front of the file value in the JavaScript.
Messy... but it depends on the level of user you are working with, and gets around the security issue.
<form>
<input type="text" id="file_path" value="C:/" />
<input type="file" id="file_name" />
<input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>
JavaScript
var str = document.getElementById('file_path').value;
var str = str + document.getElementById('file_name').value;
This is an alternate solution/fix... In FF3, You can retrieve file's full path in a textbox instead of file browse box. And that too... By drag/dropping the file!
You can drag drop your file into a text box in your html page. and it will display the file's complete path. This data can transferred to your server easily or manipulate them.
All you have to do is to use the extension DragDropUpload
http://www.teslacore.it/wiki/index.php?title=DragDropUpload
This extension will helps you in drag dropping files into your File Browse (Input file) box. But still you wont able to get the file full path, If you try to retrieve.
So, I tweaked this extension a little. In the way I can drag drop a file on to any "Text Input" box and get the file full path. And thus I can able to get the file full path in FF3 Firefox 3.
This is an example that could work for you if what you need is not exactly the path, but a reference to the file working offline.
http://www.ab-d.fr/date/2008-07-12/
It is in french, but the code is javascript :)
This are the references the article points to:
http://developer.mozilla.org/en/nsIDOMFile
http://developer.mozilla.org/en/nsIDOMFileList