I need to generate a downloadable (direct) link in nextcloud within Javascript.
After reading Direct Download, my approach was:
const url = window.OC.linkToRemote('ocs/v2.php/apps/dav/api/v1/direct');
fetch(url, {method: 'post', body: 'fileId=3'})
.then((res) => res.json())
.then((json) => console.log(json));
I still get a successful page (code 200), but the body states:
Error
App not installed:
Sadly I can't find anything in logs.
How can I create a direct downloadable link by using javascript in Nextcloud?
Related
I'm using the following package to download a ZIP file directly in the browser. For that I'm using following code in the frontend:
await this.$axios
.get(
`/inspections/defects/download/${this.$route.params.uuid}`, {
responseType: 'arraybuffer' // This is the problem
}
)
.then((response) => {
const url = window.URL.createObjectURL(
new Blob([response.data], { type: 'application/octet-stream' })
);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.zip');
document.body.appendChild(link);
link.click();
});
And from the backend I just directly use
app.get('/download/:uuid', (req, res) => {
// get filename from db, but it's 99,9% the same as the example provided in the readme of the npm package.
s3Zip
.archive({ region: region, bucket: bucket }, '', 'abc.jpg')
.pipe(res)
})
When I try to "send & download" via postman, it works perfectly, it downloads a zip with the image in it for around 5MB which is correct.
Now when I try to download it via the axios code, I get either
Or
After some research I always come to the same solution and that is to set the responseType and it seems to work for everyone. However, if I try to do that I get the following console errors, and I can't find any related issues when I google it:
I've also tried with different content types, but can't seem to get my head around it. Especially because it works in Postman.
Related issue, but that was fixed by using arraybuffer:
https://github.com/orangewise/s3-zip/issues/45
According to https://stackoverflow.com/a/58696592 axios doesn't support file streaming right now. I used native fetch and now it works fine.
The dozens of examples on how to do it with axios are pretty misleading.
If I put below script in theme.liquid(Shopify storefront), I get expected result:
<script>
const GRAPHQL_URL = 'https://<my-store>/admin/variants/search.json?query=sku:big-mug-black';
const GRAPHQL_BODY = {
'method': 'GET',
'headers': {
'Content-Type': 'application/json',
},
};
fetch(GRAPHQL_URL, GRAPHQL_BODY)
.then(res => res.json())
.then(console.log)
.catch(console.error);
</script>
But If I try to execute same piece of code from JavaScript program, I get 404({errors: "Not Found"})
const GRAPHQL_URL = `https://<my-proxy>.herokuapp.com/https://<my-store>/admin/variants/search.json?query=sku:big-mug-black`;
const STOREFRONT_ACCESS_TOKEN = '<my-token>';
const GRAPHQL_BODY = {
'method': 'GET',
'headers': {
'Authorization': `Basic ${btoa('<my-api-key>' + ':' + '<my-password>')}`,
'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
'Content-Type': 'application/json',
},
};
fetch(GRAPHQL_URL, GRAPHQL_BODY)
.then(res => res.json())
.then(console.log)
.catch(console.error);
Note: I can fetch all products using same program, so its not an permission issue. Is there something I need to add/remove to achieve same result in my local JavaScript program? Thank you.
I might have solution just for your need.
You gonna need following accesses:
read_products - for finding product
read_script_tags - for read existing script tags
write_script_tags - for writing new script tag
First on your application create console action that will be run automatically every X hours. That action shall download all existing products. You gonna need save them to local database.
Things to remember during downloading all products.
Api limits watch for them in headers (X_SHOPIFY_SHOP_API_CALL_LIMIT)
Pagination, there is variable link in headers (Api pagination)
When you have stored all products locally, you can create search method for it using SKU.
When you have working method you can create find method in your controller. You will use this method to create request from shopify page to your server.
After creating this you can add JS by yourself or even better automate it with script tags.
ScriptTag on Shopify are basically javascript code that you host on your side and they are automatically loaded TO EACH page in shopify (except basket).
POST /admin/api/2021-01/script_tags.json
{
"script_tag": {
"event": "onload",
"src": "https://djavaskripped.org/fancy.js"
}
}
With that you can add javascript that can be used to create find request on your website. And you can return result back.
I created simplified graph for that.
.
I'm fetching data (I'm working with ReactJS) from an API's endpoint. Cors is enable.
My problem is, when I'm trying to display images (with or ), Cors is blocking access to images.
I tried to add crossOrigin='anonymous' to but it didn't work.
I do not have any access to the server.
I can fetch and display all the other datas.
I'm a little bit despaired, so if you have any idea to help me to display my images, it will be so great !!! :)
How I fetch my datas :
fetch(myURL)
.then(response => response.json())
.then(data => this.setState({ items: data.items }))
.catch(error => {
console.log(error);
this.setState({
error: true
});
});
You can either use a Proxy Server or Disable Same Origin Policy in your browser.
Here's a detailed tutorial :
https://daveceddia.com/access-control-allow-origin-cors-errors-in-react-express/
Has anyone successfully uploaded a video via React Native Formdata()? The code below attempts to upload a .mov file from the camera roll URI but in fact only the first frame of the video (a JPEG) gets uploaded. What's the issue here?
var movVideo = {
uri: uriFromCameraRoll,
type: 'video/quicktime',
name: 'something.mov',
};
var body = new FormData();
body.append('video', movVideo);
body.append('title', 'A beautiful video!');
fetch('https://mysite/upload_asset', {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data'
},
body: body,
}).then((response) => response.json())
.then((responseJson) => {
//only the first frame of the video got uploaded
console.log(responseJson);
});
Had the same issue. Looks like React Native does not return the correct stream for videos with asset library URIs. Pictures seem to work fine. I would need to dig deeper before submitting an issue though.
I suggest you take a look at react-native-fetch-blob, which provides an improved fetch polyfill with Blob support. This implementation handles videos from the camera roll just fine. Also, the changes needed to use this module are minimal (include the polyfill, wrap URI with RNFetchBlob.wrap).
I am new to fetch in react native and followed this tutorial.
I am trying to send a json body to an private api server, I checked the server log and found out that the body content is empty.
Here is the code in react native
authenticateLogIn(){
fetch('<URL>', {
method: 'POST',
header: {'Content-Type': 'application/json', 'Accept': 'application/json'},
body: JSON.stringify({'username': '<username>', 'password':'<password>'})
})
.then((incoming) => incoming.json())
.then((response) => {
console.log(response.header);
Alert.alert(JSON.stringify(response.body));
})
.done();
Maybe because it shoueld be headers? (with the s)
It might be because your JSON body isn't being parsed correctly. bodyParser https://github.com/expressjs/body-parser is part of the middleware that parses request bodies and needs to be configured.
req.body kept coming back empty for me until I added app.use(bodyParser.json() into server.js file. Make sure you import body-parser.