How to share a file using Web Share Target API? - javascript

How can I share a file using Web Share Target API?
I managed to make my Progressive Web App appear when I try to share a file from the gallery app on my phone. My question is how can I take the file and send it to the server or fill a HTML input with type="file" with the shared file?
This is what I have right now
In manifest.json
"share_target": {
"action": "/qtransfer-p/send.php",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "fileToUpload",
"accept": [".pdf", ".png", ".jpeg", ".doc", ".docx", ".pdf", ".xls", ".xlsx", ".txt", ".mp4", ".mp3", ".wav", ".rar", ".zip"]
}
]
}
}
In sw.js (service worker)
self.addEventListener('fetch', event => {
const url = new URL(event.request.clone().url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/qtransfer-p/send.php') {
event.respondWith(Response.redirect('/qtransfer-p/send.php'));
event.waitUntil((async () => {
console.log("1");
const data = await event.request.clone().formData();
console.log("2");
console.log(data);
const client = await self.clients.get(event.resultingClientId || event.clientId);
console.log("3");
const file = data.get("fileToUpload");
console.log("file", file);
client.postMessage({ file, action: 'load-file' });
})());
console.log("ok");
return 0;
}
});
Right now, when I share a photo, I get in console:
1
ok
Uncaught (in promise) TypeError: Failed to fetch
So I think the problem is on the "const data = await event.request.clone().formData();".
Someone please help! I am trying to solve this for 2 weeks!

If you'd like to send a file directly to your web server, you can skip the service worker involvement.
Your current manifest.json setup will result in a POST request being sent to the /qtransfer-p/send.php at your origin, encoded as multipart/form-data, whenever someone shares a supported file to your installed PWA.
As long as you don't intercept that request in a service worker, I believe it will just be sent directly like any other HTTP POST, and could be processed server-side.

Related

Patch custom object with kubernetes javascrtip SDK

I'm using External Secrets to sync my secrets from azure. And now I need a programmatic way to trigger the sync. With kubectl the command is
kubectl annotate es my-es force-sync=$(date +%s) --overwrite
So, I try to use k8s js sdk to do this. I can success fully get the External Secret
await crdApi.getNamespacedCustomObject("external-secrets.io", "v1beta1", "default", "externalsecrets", "my-es")
However, when I try to update it with patchNamespacedCustomObject, it always tells me "the body of the request was in an unknown format - accepted media types include: application/json-patch+json, application/merge-patch+json, application/apply-patch+yaml"
Here's my code
const kc = new k8s.KubeConfig();
kc.loadFromString(kubeConfig);
const crdApi = kc.makeApiClient(k8s.CustomObjectsApi);
let patch = [{
"op": "replace",
"path": "/metadata/annotations",
"value": {
"force-sync": "1663315075"
}
}];
await crdApi.patchNamespacedCustomObject("external-secrets.io", "v1beta1", "default", "externalsecrets", "my-es", patch);
I am referring their patch example here
const options = {
"headers": {
"Content-type": k8s.PatchUtils.PATCH_FORMAT_JSON_PATCH
}
};
is still required.

LinkedIn Marketing API- Invalid complete multipartUpload request

I'm trying to upload a video to the Linkedin API as per the marketing API documentation. I've done the following so far:
Registered for a multi part asset upload and received the response containing an array of unique multipart URLs to push the corresponding chunks to
Fetched the chunks from an Amazon S3 bucket where they live using the Range header
Successfully uploaded all those chunks via PUT to their corresponding URLs, and stored their ETag and HTTP Status code values.
Created the finalise POST request body as per the link above using the etags and status codes.
Unfortunately my request fails with:
'com.linkedin.vector.utils.logic.LogicLayerInvalidException: Invalid complete multipartUpload request ...(stringified payload)'
The only part of the request body I haven't added from the example given is the "metadata" field- there's nothing in the documentation to explain what this is or where it's generated from. I'm assuming that's what is missing. Can anyone point me in the right direction please?
Code for the request in question is as follows:
// Loop over chunked download URLs and upload segments of S3 file.
for(let i = 0, l = uploadDetails.partUploadRequests.length; i < l; i++) {
const item: PartUploadRequest = uploadDetails.partUploadRequests[i];
const partialParams: GetObjectRequest = { Bucket: video.dynamoData.mp4Bucket, Key: video.dynamoData.mp4Outputs[0], Range: `bytes=${item.byteRange.firstByte}-${item.byteRange.lastByte}` };
console.log(`Requesting bytes ${item.byteRange.firstByte}-${item.byteRange.lastByte}`);
const s3PartialObject = await s3Client.getObject(partialParams).promise();
const response = await axios.put(item.url, s3PartialObject.Body, {
headers: {
...item.headers
}
});
const { status, headers } = response;
responses.push({
headers: {
ETag: headers.etag
},
httpStatusCode: status
});
};
// Send all chunk responses off and confirm video upload
const finaliseVideoPayload: LinkedinFinaliseVideoPostRequest = {
completeMultipartUploadRequest: {
mediaArtifact: registerVideoRequest.value.mediaArtifact,
partUploadResponses: responses
}
};
console.log(`Fetched all parts, readying finalise request with ${finaliseVideoPayload.completeMultipartUploadRequest.partUploadResponses.length} parts.`);
const json = await axios.post('https://api.linkedin.com/v2/assets?action=completeMultiPartUpload', finaliseVideoPayload, {
headers: {
'X-RestLi-Protocol-Version': '2.0.0',
'Authorization': 'Bearer ' + channel.token,
'Host': 'api.linkedin.com'
}
});
Thanks
I guess this has been already solved. Just in case if it is not.
There is a field 'metadata' which comes in the registerApi for multipart upload. This comes in the field.
uploadMechanism["com.linkedin.digitalmedia.uploading.MultipartUpload"].metadata
Apparently, this is required by the completeMultipart api.
So data will be
completeMultipartUploadRequest: {
mediaArtifact: registerVideoRequest.value.mediaArtifact,
metadata: registerVideoRequest.value.uploadMechanism["com.linkedin.digitalmedia.uploading.MultipartUpload"].metadata,
partUploadResponses: responses
}
It took me a day to figure out that the field which has no value(empty string) is required. Maybe a bug.
Hopefully this solves the issue.

Paypal Checkout client integration - Problem with returning order id promise

i have a problem integrating paypals payment gateway. I am using javascript for the client, python for the backend and the checkouts v2 api.
Creating a order on the backend works without trouble, but while waiting for my servers response the createOrder function raises a error:
unhandled_error
Object { err: "Expected an order id to be passed\nLe/</<#https://www.sandbox.paypal.com/smart/buttons?style.layout=vertical&style.color=blue&style.shape=rect&style.tagline=false&components.0=buttons&locale.country=NO&locale.lang=no&sdkMeta=eyJ1cmwiOiJodHRwczovL3d3dy5wYXlwYWwuY29tL3Nkay9qcz9jbGllbnQtaWQ9QWJmSjNNSG5oMkFIU1ZwdXl4eW5lLXBCbHdJZkNsLXpyVXc1dzFiX29TVUloZU01LXNMaDNfSWhuTnZkNUhYSW5wcXVFdm5MZG1LN0xOZ1gmZGlzYWJsZS1mdW5kaW5nPWNyZWRpdCxjYXJkIiwiYXR0cnMiOnt9fQ&clientID=AbfJ3MHnh2AHSVpuyxyne-pBlwIfCl-zrUw5w1b_oSUIheM5-sLh3_IhnNvd5HXInpquEvnLdmK7LNgX&sessionID=e2ea737589_mtc6mtu6mdi&buttonSessionID=de4bfb3626_mtc6mjm6mtk&env=sandbox&fundingEligibility=eyJwYXlwYWwiOnsiZWxpZ2libGUiOnRydWV9LCJjYXJkIjp7ImVsaWdpYmxlIjpmYWxzZSwiYnJhbmRlZCI6dHJ1ZSwidmVuZG9ycyI6eyJ2aXNhIjp7ImVsaWdpYmxlIjp0cnVlfSwibWFzdGVyY2FyZCI6eyJlbGlnaWJsZSI6dHJ1ZX0sImFtZXgiOnsiZWxpZ2libGUiOnRydWV9LCJkaXNjb3ZlciI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJoaXBlciI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJlbG8iOnsiZWxpZ2libGUiOmZhbHNlfSwiamNiIjp7ImVsaWdpYmxlIjpmYWxzZX19…", timestamp: "1593537805136", referer: "www.sandbox.paypal.com", sessionID: "e2ea737589_mtc6mtu6mdi", env: "sandbox", buttonSessionID: "de4bfb3626_mtc6mjm6mtk" }
Error: Expected an order id to be passed
Error: Expected an order id to be passed
12V21085461823829 // ticks in a few seconds later
Console screenshot
The problem seems to be that createOrder does not wait for the promise before raising the error, or that the promise is not given in the correct way. Something like that. Anyways here is the client side code:
paypal.Buttons({
// button styling removed for clarity
createOrder: function() {
// purchase information
var data = {
'track_id': vm.selectedTrack.id,
'lease_id': vm.selectedLease.id,
}
// post req to api with lease and track ids
// create payment on server side
fetch('http://localhost:5000/api/paypal/create-purchase', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(data),
}).then(function(res) {
return res.json();
}).then(function(data) {
console.log(data.order_id)
return data.order_id
})
}
// conatiner element to render buttons in
}).render('#paypal-button');
And the server side:
#app.route('/api/paypal/create-purchase', methods=['POST'])
def paypal_create_purchase():
# cart validation removed for clarity
# create paypal purchase
environment = SandboxEnvironment(client_id=app.config['PAYPAL_PUBLIC'], client_secret=app.config['PAYPAL_PRIVATE'])
client = PayPalHttpClient(environment)
paypal_request = OrdersCreateRequest()
paypal_request.prefer('return=representation')
paypal_request.request_body (
{
"intent": "CAPTURE",
"purchase_units": [
{
"amount": {
"currency_code": "USD",
"value": lease.price
}
}
]
}
)
try:
# Call API with your client and get a response for your call
response = client.execute(paypal_request)
order = response.result
print(order.id)
except IOError as ioe:
print (ioe)
if isinstance(ioe, HttpError):
# Something went wrong server-side
print(ioe.status_code)
# note that it is the same key as on the client
return jsonify(success=True,order_id=order.id)
I found this similar thread, but i dont consider the origin of the error to be the same as in that thread (incorrect json key on client)
Also see this relevant page in the docs which supplies this code:
createOrder: function() {
return fetch('/my-server/create-paypal-transaction', {
method: 'post',
headers: {
'content-type': 'application/json'
}
}).then(function(res) {
return res.json();
}).then(function(data) {
return data.orderID; // Use the same key name for order ID on the client and server
});
}
Damn, just as i was typing out the last part of the post i noticed the error. A missing return before my fetch call. Will leave this up for other people with the same mistake.

Error serving HTML files from an Azure function

I am trying to open, read and return an HTML files using Azure functions. I am developing locally and the logs says that the function executed successfully however on the browser I am getting 500 internal server error. Am I doing something wrong in here?
const fs = require('fs');
const path = require('path');
const mime = require('../node_modules/mime-types');
module.exports = function (context, req) {
const staticFilesFolder = 'www/build/';
const defaultPage = 'index.html';
getFile(context, req.query.file);
function getFile(context, file) {
const homeLocation = process.env["HOME"];
if(!file || file == null || file === undefined){
context.done(null,{status:200,body:"<h1>Define a file</h1>",headers:{
"Content-Type":" text/html; charset=utf-8"
}});
}
fs.readFile(path.resolve(path.join(homeLocation, staticFilesFolder, file)),
(err, htmlContent) => {
if (err) {
getFile(context, "404.html");
}
else {
const res = {
status: 200,
body: htmlContent,
headers:{
"Content-Type": mime.lookup(path.join(homeLocation, staticFilesFolder, file))
}
}
context.done(null,res);
}
})
}
};
Note
I am sure that 404.html exists and index.html exists. When I log the contents of htmlContent it is giving the correct output.
functions.json
{
"disabled": false,
"bindings": [
{
"authLevel": "anonymous",
"type": "httpTrigger",
"direction": "in",
"methods":["get"],
"route":"home",
"name": "req"
},
{
"type": "http",
"direction": "out",
"name": "res"
}
]
}
Response on Chrome
If I removed "Content-Length" header the status code changes to 406.
Update 1 The code seems to be running normally on Azure Portal but it is not working when running it locally.
It looks like you are combining two methods of returning data from an http triggered function(context.res and context.done()): https://learn.microsoft.com/en-us/azure/azure-functions/functions-reference-node#accessing-the-request-and-response
Since you are using context.res, try removing context.done();
You are making an incorrect use of context.res, you shouldn't be overwriting it but instead leveraging the methods provided by the Response class provided in the Azure NodeJS worker. If you are using using VSCode you'll get intellisense for these methods. Otherwise see: https://github.com/Azure/azure-functions-nodejs-worker/blob/dev/src/http/Response.ts
Your code should look something like this instead.
context.res.setHeader('content-type', 'text/html; charset=utf-8')
context.res.raw(htmlContent)
Using context.res.raw or context.res.send will already perform the context.done call for you.
Make sure you use content-type=text/html; charset-utf8 instead of content-type=text/html or you'll trigger an issue with the returned content-type. Instead of returning content-type=text/html you end up getting content-type=text/plain which will fail to render your html.
Addressed on: https://github.com/Azure/azure-webjobs-sdk-script/issues/2053

How do i call GAS Execution API's run method from container bound script?

I have made an target project script as instructed by google in the documentation and followed all the steps for deploying as a API Executable.Enabled the Google apps script execution API also.
In documentation, they have mentioned a Execution API's run method. By using this we can call the projects method. i don't know how to use this in GAS.
This is the target project's script,
/**
* The function in this script will be called by the Apps Script Execution API.
*/
/**
* Return the set of folder names contained in the user's root folder as an
* object (with folder IDs as keys).
* #return {Object} A set of folder names keyed by folder ID.
*/
function getFoldersUnderRoot() {
var root = DriveApp.getRootFolder();
var folders = root.getFolders();
var folderSet = {};
while (folders.hasNext()) {
var folder = folders.next();
folderSet[folder.getId()] = folder.getName();
}
return folderSet;
}
I'd tried following method to call execution API's run method, but it required access token, how can i get the access token in this code.
var access_token=ScriptApp.getOAuthToken();//Returning a string value
var url = "https://script.googleapis.com/v1/scripts/MvwvW29XZxP77hsnIkgD0H88m6KuyrhZ5:run";
var headers = {
"Authorization": "Bearer "+access_token,
"Content-Type": "application/json"
};
var payload = {
'function': 'getFoldersUnderRoot',
devMode: true
};
var res = UrlFetchApp.fetch(url, {
method: "post",
headers: headers,
payload: JSON.stringify(payload),
muteHttpExceptions: true
});
But in response i'm getting this,
{
"error": {
"code": 401,
"message": "ScriptError",
"status": "UNAUTHENTICATED",
"details": [
{
"#type": "type.googleapis.com/google.apps.script.v1.ExecutionError",
"errorMessage": "Authorization is required to perform that action.",
"errorType": "ScriptError"
}
]
}
}
How can i solve this? Code explanation would be appreciable. Thank you.
How about this sample script? From your question, I could know that you have already done deploying API Executable and enabling Execution API. In order to use Execution API, also an access token with scopes you use is required as you can see at Requirements. Have you already retrieved it? If you don't have it yet, you can retrieve it by checking the Auth Guide. By preparing these, you can use Execution API.
Following sample is for run getFoldersUnderRoot() in the project deployed API Executable. Please copy and paste this sample script to your spreadsheet script editor. Before you use this, please import your access token and script ID of the project deployed API Executable to the script.
Sample script :
var url = "https://script.googleapis.com/v1/scripts/### Script ID ###:run";
var headers = {
"Authorization": "Bearer ### acces token ###",
"Content-Type": "application/json"
};
var payload = {
'function': 'getFoldersUnderRoot',
devMode: true
};
var res = UrlFetchApp.fetch(url, {
method: "post",
headers: headers,
payload: JSON.stringify(payload),
muteHttpExceptions: true
});
Result :
Here, the result of getFoldersUnderRoot() is returned as follows.
{
"done": true,
"response": {
"#type": "type.googleapis.com/google.apps.script.v1.ExecutionResponse",
"result": {
"### folder id1 ### ": "### folder name1 ###",
"### folder id2 ### ": "### folder name2 ###",
}
}
}

Categories