I made a web app using Java (jersey servlets on backend) and AngularJs on frontend. I want to open in new tabs or download some local files. I tried using:
<a href="file:///{{course.path}}" target="_blank" ><span> {{course.filename}} </span></a>
where course is JSON like:
{type: "pdf", path: "C:/Users/Tom/Desktop/Courses/course2.pdf", areaSubject: "It", created: 1434700150341, filename: "course2"}
When I click on it, it opens a blank page (about:blank) and nothing appears.When I type on browser file:///C:/Users/Tom/Desktop/Courses/course2.pdf the content appears.
How can I make it works when click tag? I use Chrome.
Related
We are running an ASP NET CORE MVC service (.Net core 2.2) that acts as our client.
I've added a simple HTML with an img tag to one of our views.
<a class='icon-suspend-wait txt-color-orange'>
<img src = '/Content/img/icons/icon-suspend-wait.png' alt='Waiting for suspend' />
<span class='vertical-middle'>Waiting for suspend</span>
</a>
Now, I've added a new png file named "icon-suspend-wait.png" under
Content\img\icons folder
icons folder screenshot
When I navigate to the website I can see the added HTML part but not the icon.
So I opened chrome devTools AND under the "Elements" tab, I can see the new HTML part (the ).
elements section
But under the "Source" tab I can't see the icon I've added:
source section
When I try to open the icon link in a new tab from the "Elements" tab, I get the following error:
404 error
What i tried to do:
Clean and recompile the project.
Hard refresh for the browser.
Disable the cache from the DevTools (Network -> Disable Cache).
Nothing seems to work.
What am I missing ?
If you want to serve files outside of web root,you need to add the following configuration in StartUp.cs:
...
using System.IO;
namespace ClientSideDemo5
public class Startup
{
...
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseHttpsRedirection();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(env.ContentRootPath, "Content")),
RequestPath = "/Content"
});
app.UseRouting();
...
}
}
img:
<img src = '~/Content/img/icons/icon-suspend-wait.png' alt='Waiting for suspend' />
I am comparatively new to web development , trying to open Django URL by "href" link in HTML file.
But URL response not loading fully in browser. While same link(URL), when opened directly in browser, url response loads fully.
Below is the sample Django view
def sampleview(request):
return HttpResponse("URL response loaded fully")
Sample URL for view
url(r'^sampleurl/$', views.sampleview, name='sampleurl')
When opening URL link directly in browser
Browser shows the response as "URL response loaded fully"
While when opening the link through href attributes of html view,
like
Sample link</li>
browser do not loads the response
Have tried following:
i) Making the link as `href="/sampleurl/" instead of href="/sampleurl"`
ii)Using url name in the `{% url 'sampleurl' %} instead of href="/sampleurl"`
but failed to resolve the issue
I'm trying to create an HTML button that will open an image in the form of a base64 string in a new tab. I made a trial version that works fine with static images:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a href="static/static_filename.png" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
Now I would like to do things dynamically (the application involves each user creating a new image, so serving from a single static filename will not work). My first attempt:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a href="data:image/png;base64,{img_io}" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
Where img_io is the base64 encoded image string.
Clicking the button does nothing, and prompts the message Not allowed to navigate top frame to data URL in the Chrome developer console. I tried adding download explicitly:
<button type = "button" id = "submit_btn" class="contact100-form-btn">
<a download="filename.png" href="data:image/png;base64,{img_io}" class="contact100-form-btn" target="_blank">
Download
</a>
</button>
This causes the image to download successfully on Chrome, but does not work on Firefox. Does anyone know how to make the base64 image string open in a new tab? Or as a fallback a create direct download option that works across browsers? Preferably in pure HTML, as this is part of a python based web app and I know next to nothing about Javascript.
Thanks
I have an Angular 4 website, which allows the users to download an image from an Amazon S3 bucket, to do this I use an anchor with the download attribute, but instead of downloading the image it gets opened in a new tab.
I tested it with Firefox, Chrome and Safari.
This is what I have in the template:
<a mat-raised-button color="accent" [href]="downloadPath" download matTooltip="Download file to pc." *ngIf="isFinalReport()">
<mat-icon>file_download</mat-icon>
DOWNLOAD
</a>
The download path is something like this: https://s3-sa-east-1.amazonaws.com/bucket-name/environment/imageName.jpg
I have also tested it with several images from around the web and doesnt work with any, but if I use a local image (C:/Users/User/Desktop/images/image.jpg) it works perfectly.
Any idea why this doesnt work and how to fix it?
If you need more information please let me know.
Thanks.
To directly download the image , you can try with
<a [href]="javascript:downloadImage(downloadLink);"></a>
downloadImage(downloadLink) {
this.mediaService.getImage(downloadLink).subscribe(
(res) => {
const a = document.createElement('a');
a.href = URL.createObjectURL(res);
a.download = title;
document.body.appendChild(a);
a.click();
});
}
}
Took some research, but I found that using the backend is the best approach to this problem. I was creating an anchor tag that upon clicking should download the s3 url, but instead it would open a new tab with the object. The problem is most likely caused by one or two things. One is that browsers do not allow for cross origin downloads directly. The second revolves around your Reponse Content Disposition. Here is my approach to getting s3 to download directly to the filesystem:
Backend (I use Django and boto3):
def get_file(self, obj):
client = boto3.client('s3', aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY)
return client.generate_presigned_url(
'get_object',
Params={
'Bucket': settings.AWS_STORAGE_BUCKET_NAME,
'Key': obj.key,
'ResponseContentDisposition': 'attachment',
},
ExpiresIn=600)
Frontend (using Angular):
<a [href]="what_i_returned_from_backend" [download]="answer.png" target="_self" rel="noopener noreferrer">Download</a>
I have an application by mean-stack that hosts a website and an Excel add-in. html5 is enabled, and it has
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
In the Excel add-in, I have a button that opens a page in the website by Dialog API:
$scope.openDialog = function () {
Office.context.ui.displayDialogAsync("https://localhost:3000/preview/tmp/6wr-4PqdBrYQwjp3AAAD", {}, function () {})
}
When I click on this button in Excel Online in Chrome, it opens a dialog box with the following url (note that # and several %2F are systematically appended), but it does not prevent from well displaying the page.
https://localhost:3000/preview/tmp/6wr-4PqdBrYQwjp3AAAD?_host_Info=excel|web|16.00|en-us|b6f37f78-e519-7d03-0069-b9c4317a362c|isDialog#%2Fpreview%2Ftmp%2F6wr-4PqdBrYQwjp3AAAD%3F_host_Info=excel%7Cweb%7C16.00%7Cen-us%7Cb6f37f78-e519-7d03-0069-b9c4317a362c%7CisDialog
However, when I click on this button in Excel Online in Firefox, the url changes quickly to the following url, which turns out to display the homepage of the website:
https://localhost:3000/home#%2Fpreview%2Ftmp%2F6wr-4PqdBrYQwjp3AAAD%3F_host_Info=excel%7Cweb%7C16.00%7Cen-gb%7C919fff78-e51f-dc20-0c3c-871b7d0ec25d%7CisDialog
So my questions are:
1) Why does Office.context.ui.displayDialogAsync add systematically # and %2F to the url of my website? Is it possible to prevent this from happening?
2) Is it possible to make a url (regardless of # and %2F) that Firefox accept?
Edit 1: It seems that if I don't use html5-history-api, it will work. So does not know how to disable html5-history-api for that displayDialogAsync? (The reason why I have to use html5-history-api after office.js is here.)
It is not displayDialogAsync that is doing this. It is a frequent issue with Angular routing and Angular location strategy. Search for "angular app is adding hash to my urls" and you will find a lot of information about it and solutions.