How to consume an octet stream from protected endpoint using vue-pdf a vuejs implementation of pdfjs - pdf

I want to use the vue-pdf library that is an implementation of pdfjs for vuejs 2.x in order to do the following
Download a PDF from an oauth2 protected endpoint using axios
Render the PDF (octet-stream) using vue-pdf library
and the tricky parts are
Access protected resources
Render PDF that comes as octet stream
Currently there are no examples in the repo to show case these.

After fiddling around with the library, I managed to do achieve the rendering of a pdf from a protected endpoint using the following approach
Make an axios ajax request for the protected resource using necessary auth header and the response type as responseType: 'blob'
Magically create a URL from the downloaded blob object
Set the blob URL in a data variable that is then used by <pdf> component
I have created a Pull Request to the vue-pdf repository with a working example. In the PR replace the URL of axios request with a REST endpoint that returns an octet-stream and you should be all good.
The resulting pdf viewer shown below

Related

Ktor Framework using content negotiation with framemaker

New to Kotlin and Ktor. I generated Ktor app using both Jackson Serialization and Framemaker. I allowed sample code to be included.
Using Chrome browser and accessing the endpoint returning text worked fine. The other endpoint returning html returned json instead???
I noticed that if i remove the install of the Content Negotiation plugin, html is returned correctly.
Am i correct in assuming that i cannot mix the use of the Content Negotiation plugin and endpoints that also return html?

Add a parameter to Strapi V4 request header

I am using Strapi V4 as my CMS and using ECS S3 as the media storage.
I am using https://www.npmjs.com/package/#strapi/provider-upload-aws-s3 as the provider upload plugin.
I am able to upload media assets to the bucket but get error 403 forbidden when I try to GET the assets from the bucket.
I have done the necessary additions to plugins.js and middlewares.js files.
I am now trying to add a parameter "x-emc-namespace": "my-bucket-key" to the request header in the HTTPS call that Strapi API makes to the bucket.
I have tried the Strapi webhooks approach mentioned here but that didn't help in adding a parameter to the request header.
So, my question is how to add a parameter in the Strapi v4 request header.

DownLoad VichBundle file Api Platform

I'm using API platform with VichBundle to store file on the back side and React Native on the Front side.
I've followed the documentation of API platform and the upload part is working well, but I don't know how to download the document.
When I make a GET request I have the entity with the url of the file but I can't do a GET request with this url because there is no route to this file.
Can somebody give me an exemple of how to download file with api platform and Vichbundle.
Thanks
If you are following Api Platfom's documentation your files should be uploaded to your project's ./app/public/media/ folder and available making an HTTP GET request to http(s)://<yourdomain>/public/media/<filename>.<extension>. Just open the URL in your browser.
To get the exact url query yout API for me mediaObject information (for example, /api/media_objects/{id}) and check the contentUrl property.

AWS API Gateway + Lambda: favicon issue

I have an microservice running on AWS Lambda (ASP.NET Core 3.1) and published using API Gateway with custom domain.
Running locally, everything works fine, site works, images are loaded, favicon too.
Deployed to Lambda+API, site works, images are loaded (PNG, JPG), scripts are loaded, however favicon.ico is not loaded. Returns invalid image. There is no special configuration for PNG, JPG, CSS, JS or any other static content, it works out of the box.
Is there any gotcha for favicons?
The following solution worked for me.
Rather than using API Gateway to serve favicon.ico, upload it to S3 and make it a public object. Obtain the HTTPS url to this object from the S3 console. Then in your Lambda function, redirect to it.
In my case, this was an AWS Chalice (Python) application, so the routing logic was implemented as follows:
#app.route('/favicon.ico')
def favicon():
return Response(body='', headers={'Location': 'https://s3.amazonaws.com/YOUR_BUCKET_NAME/favicon.ico'}, status_code=301)
Although not strictly necessary, you can also include markup in HTML to indicate the location of the favicon, such as the following:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
The following solution allowed me to serve favicon via API gateway + Lambda with creating or using other resources.
The API used is a REST API and the application I am running on my lambda is a Plotly Dash application.
For the deployment of my API I set the following in template.yaml (fyi: below is not the complete template)
Resources:
DashApi:
Type: AWS::Serverless::Api
Properties:
BinaryMediaTypes:
- "image/*"
MyLambdaFunction:
Type: AWS::Serverless::Function
Properties:
Events:
DashEndpoint:
Type: Api
Properties:
Path: /{proxy+}
Method: ANY
RestApiId:
Ref: DashApi
The important thing here is to set BinaryMediaTypes because this will tell your API which data to pass as binary data and which to pass as utf-8 encoded data. In this example I set all image types as binary, but you also set all content types as binary with "*/*", or list specific image types only.
Perhaps for many web servers this is already enough, however for Plotly Dash applications you have to set another setting. For those applications I use the aws-wsgi package for handling the response. The call in this library will decode everything as utf-8 by default, unless it's told otherwise specifically. For this you have to set the base64_content_types input parameter (list of strings).
Note: the asterix wildcard doesn't work here since awsgi does a literal comparison of Content-Type with all entries in the list
def lambda_handler(event, context):
base64_content_types = ['image/vnd.microsoft.icon', 'image/x-icon']
return awsgi.response(app.server, event, context, base64_content_types )
With these two settings set, I got favicon to load.
I hope this information still helps somebody. I list it here anyways because there is very little to be found on the web on solving this issues without using an S3 bucket.

vue-typeahead says you need to provide a HTTP client

When I try to load vue-typeahead in my browser it says 'you need to provide a http client.' How exactly do I do this?
I am using webpack (the default configuration that comes with laravel 5.5). I have copied the usage example verbatim from here, https://github.com/pespantelis/vue-typeahead, and placed it in its own file, typeahead.vue.
I have then added the file as a vue component as follows:
Vue.component('typeahead', require('./components/admin/shared/typeahead.vue'));
The webpack bundling works fine (npm run dev), and I can see that the component loads in my browser, but when I type a few characters and trigger the http request, I get the error message.
Axios is loaded as part of bootstrapping my Vue instance, but presumably it needs to be passed to the vue-typeahead somehow?
The docs are not very clear.
But look in the samples directory: You have to set the $http property on the Vue prototype.
You have to use a http client that provides an interface compatible with the axios package
https://github.com/pespantelis/vue-typeahead/blob/master/demo/main.js
Looks like the source only uses get(url, params), so if you want to roll your own http client instead of using axios it’s not a ton of work.