I'm working with AngularJS and AWS S3 and I'm trying to view the files(.pdf, .docx, .ppt, etc..) in the browser but I'm stuck.
I'm trying to use the google docs view:
<iframe src="http://docs.google.com/gview?url=MY_AWS_S3_URL&embedded=true"></iframe>
But I'm getting this error in console's browser and obviously the view of this doc is not working.
Anyone know what is happening? Could be a S3 permissions error or maybe its because angularjs doesn't support it?
EDIT:
I've tried this to show .pdf files and it works but just for .pdf files.
<object width="400" height="500" type="application/pdf" data="your_url" id="pdf_content">
<p>ERROR!!</p>
</object>
First of all, say thanks to #Michael-sqlbot for told me about EncodeURIComponent.
The second step was made trustly the URL for AngularJS following this thread.
The fact is, I had to made this to my S3 URL:
encodeURIComponent(my.s3_url);
And then I had to call $sce library to my controller (like I explained, we have to make trustly the URL for AngularJS) like this:
JS
.module('module.name')
.controller('exExExample', [
'$scope',
'$location',
'$sce',
'info',
function($scope, $location, $sce, info) {
this.my.s3_url = info.url;
// Here I encode my AWS S3 url
this.my.complete_url ='http://docs.google.com/gview?url=' + encodeURIComponent(my.s3_url) + '&embedded=true';
//Using a function of the library $sce called trustAsResourceUrl()
this.my.complete_url = $sce.trustAsResourceUrl(this.complete_url);
}]);
HTML
<iframe ng-src="{{exemple.my.complete_url}}" ></iframe>
And it worked fine, so I hope could this explanation help somebody like it helped me.
Related
I'm pretty new to Rails development and I can't understand how to embed a PDF file in the browser. I already looked for others questions on the same subject like this and I'm dumbfounded. Already changed all the answer said but it just doesn't work.
This is my function
# create pdf function
def pdf
menu_pdf = File.join(Rails.root, 'app/assets/files/menulq2.pdf')
send_file(menu_pdf, filename: 'menulq2.pdf.pdf', disposition: 'inline', type: 'application/pdf')
end
And now I don't know what to do next.
The SO Answer you link to is about downloading/sending PDF files to/from your server. You needed to scroll down farther to read about displaying PDFs within your HTML views.
There's no reason to have a SomeModel#pdf method in your Model unless each record links to a specific PDF (e.g. if the model were Restaurant and you had a PDF menu for each restaurant.
You can just use an HTML embed tag:
<embed src="http://example.com/the.pdf" width="500" height="375" type="application/pdf">
As long as the path for 'app/assets/files' is in the asset pipeline
, you can use asset_path helper:
<embed src="<%= asset_path('menulq2.pdf') %>" width="500" height="375"
type="application/pdf">
The benefit here is if your assets are getting precompiled, the filename might be changed from menulq2.pdf to something like menulq2-60aa4fdc5cea14baf5400fba1abf4f2a46a5166bad4772b1effe341570f07de9.pdf, in which case, you as the developer, don't actually know what the PDF's filename actually is.
So the asset_path helper allows you to specify the simple filename and not worry about what asset compliation might have done to the name.
If that's too fiddly, or you know this asset isn't getting precompiled, you can hard-code it into the HTML:
<embed src="/assets/files/menulq2.pdf" width="500" height="375"
type="application/pdf">
To hard-code the URL you need to make sure you are serving static files by setting this to true in your environment files (/config/environments/*.rb):
For Rails 4: config.serve_static_files = true
For Rails 5+: config.public_file_server.enabled = true
I have few files in doc/docx/pdf format stored on server's folder and their path are saved in database. I wish to fetch the path of these files from database and then display it on my website.
In the database the files are stored in this format
id path
1 abc/request/file1.docx
2 abc/request/file2.pdf
3 abc/request/file3.docx
To display the file i used the following method
$a = $data->path;
$b = 'http://example.com/';
$r = $b.$a;
<iframe src="http://docs.google.com/gview?url=<?php echo $r; ?>&embedded=true" style="width: 100%; height: 600px;" frameborder="0"></iframe>
Issue
Earlier the file was getting displayed but all of a sudden it is not getting displayed now
I did the following checks to see the validity of file
1) File is in proper format and is not corrupted and does exist on server folder
2) The console is not giving any errors
3) Tried to run http://docs.google.com/gview?url=http://example.com/abc/request/file1.docx on browser, there also the file is not getting displayed, however the other example url given on net are working
Can anyone please tell how to correct the error. And I would also appreciate if anyone could tell any other way(using jquery, javascript or any but reliable way) to display the files on website without disturbing the formatting of the original file
For PDF, you can use ViewerJS to render.
For doc/docx, consider using Microsoft Office Viewer as a walkaround if Google Docs Viewer is not stable enough to you
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http%3A%2F%2Fieee802%2Eorg%3A80%2Fsecmail%2FdocIZSEwEqHFr%2Edoc' width='100%' height='900px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
P/S: Don't know why the code snippet is not working, but you can take a look here: https://jsfiddle.net/gcuzq343/
you can use
1. google docs viewer
<iframe src="http://docs.google.com/gview?url=http://example.com/my-document.doc&embedded=true"></iframe>
2. Microsoft viewer
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://example.com/my-document.doc.doc' width='800px' height='600px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
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 object tag like this:
<object type="text/plain" data="http://www.theurl.com/thefile"></object>
The file I am accessing has no file-extension, but I would like to embed it as plain text. However, this code just causes a download of the file to start.
Is there any way to fix this?
You can use the built-in fetch() method and access the file with .then() afterwards.
<script>
fetch("http://www.theurl.com/thefile")
.then((r)=>{r.text().then((d)=>{console.log(d)})});
</script>
But that throws the "CORS"-error so you have to enable Cross-Origin for the hosted document. Otherwise it forbids you to fetch it.
Here is a working example of fetch():
<script>
fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
.then((r)=>{r.text().then((d)=>{console.log(d)})});
</script>
I've been learning MEAN stack technologies for a week now. I'm having a problem using a custom service in Angular. I try to get a .json file, but when the app loads & I examine the loaded resources in the web inspector, the ison file is showing the code from my index.html file. Does anyone know why this is happening and how to fix it?
This is the custom service:
angular.module('StudentService', [])
.factory('Students', ['$http', function($http) {
return $http.get('app/students.json');
}]);
I don't understand how it could be loaded with the title 'students.json' but show up in the web inspector as html code. Any help would be greatly appreciated.
Change your code like this
$http.get('app/students.json')
.then(function(res){
$scope.todos = res.data;
});
return $scope.todos;