I use { Share } from 'react-native'.
I shared message successfully, no problem.
Now, I generate dynamically a PDF and save it at local.
Is it possible to share the PDF like when I share an url? I didn't find solutions.
After thinking, if PDF isn't possible to share. I have the idea to create dynamically HTML file with react native, then I can share the html file, but it's the same problem. There are no informations about sharing file with { Share}.
I think it's possible with the { Share } from 'react-native' because I saw the same thing on another app on Android.
I had the same problem with the share of react native. I just used this library React Native Share.
And you can pass the url to the file in your file system and it will work properly:
Share.open({
title: "This is my report ",
message: "Message:",
url: "file:///storage/emulated/0/demo/test.pdf",
subject: "Report",
})
This seems to work with the basic Share library from React Native, as long as you have the file:// URL of your PDF file:
Share.share({
url: `file:///path/to/your/file.pdf`,
title: 'Download PDF'
})
I've only tested on iOS, so YMMV.
here is my code currently are used in my app for share image link:
shareMessage =async (PhotoLink) => {
try {
const result = await Share.share({
title:"title goes here",
// url:,
message: "see the photo"+JSON.stringify(PhotoLink),
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
alert(error.message);
}}
...
onPress={() => this.shareMessage(this.props.route.params.url)}
the share component imported from react native;
you can use the like of your PDF to share;
my problem is how can I share link with a small image...you know...like telegram ... when you share a photo, like+ massage+photo will share in a frame.
I don't know how!
I had the same issue.
Fixed it by adding file:// in-front of path.
Share.open({
title: `Share ${fileName}`,
url: `file://${filePath}`,
type: 'audio/mp3',
})
Related
I am testing the adobe document cloud view sdk on https://www.thacherandrye.com/dinner , https://www.thacherandrye.com/the-shed , https://www.thacherandrye.com/brunch
Sometimes, the file preview is not working and all I can get on the screen is a large white space(No errors in the console). Whenever I load the page for the first time, in a browser or incognito window, the file appears on the preview but after reloading or moving to another page with a preview, the file seems to disappear.
I checked for the key being wrong/expired but then it should not have loaded the file even for the first time.
Below is the Javascript code I am using for the api:
$(document).ready(function() {
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({ clientId: SOME_KEY, divId: $('#adobeDcViewId{Id}').val() });
adobeDCView.previewFile({
content: { location: { url: $('#hdnUrl{Id}').val() } },
metaData: { fileName: $('#hdnFileName{Id}').val() }
},
{
showDownloadPDF: $('#hdnRestrictDownload{Id}').val() !== 'true',
showPrintPDF: $('#hdnRestrictDownload{Id}').val() !== 'true'
});
});
});
Tech stack: .net framework 4.7.2, jQuery 3.6.0
I tried to help you on our forums, but I don't know if you saw my response. This line worries me:
$('#adobeDcViewId{Id}').val()
The value that needs to be passed to divId needs to be a string, and needs to match the ID of the div element. Also, #adobeDcViewId{Id} doesn't look like a valid CSS selector to me.
Can you try changing this to a hard-coded value of the div on your site?
In my Nuxt PWA I have a function that converts my HTML to Canvas using this package. The generated image is in base 64. Now I want to be able to share that image via: Whatsapp, Facebook, email, Instagram etc. I have found several packages but they all don't seem to support sharing files only URLs and Text.
This is my share function:
shareTicket(index) {
html2canvas(this.$refs['ticket-' + index][0], {
backgroundColor: '#efefef',
useCORS: true, // if the contents of screenshots, there are images, there may be a case of cross-domain, add this parameter, the cross-domain file to solve the problem
}).then((canvas) => {
let url = canvas.toDataURL('image/png') // finally produced image url
if (navigator.share) {
navigator.share({
title: 'Title to be shared',
text: 'Text to be shared',
url: this.url,
})
}
})
When I take out the if (navigator.share) condition I get an error in my console that navigator.share is not a function. I read somewhere that it only works on HTTPS so I uploaded to my staging server and tried but still got the same error.
Just to be clear I want to be able to share the generated image itself and not a URL.
Tell me if this URL works for you: https://nuxt-share-social-media.netlify.app
If it does, you can find the Github repo here: https://github.com/kissu/so-share-image-bounty
The code is
<template>
<div>
<div id="capture" ref="element" style="padding: 10px; background: #f5da55">
<h4 style="color: #000">Hello world!</h4>
</div>
<br />
<br />
<button #click="share">share please</button>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
methods: {
share() {
// iife here
;(async () => {
if (!('share' in navigator)) {
return
}
// `element` is the HTML element you want to share.
// `backgroundColor` is the desired background color.
const canvas = await html2canvas(this.$refs.element)
canvas.toBlob(async (blob) => {
// Even if you want to share just one file you need to
// send them as an array of files.
const files = [new File([blob], 'image.png', { type: blob.type })]
const shareData = {
text: 'Some text',
title: 'Some title',
files,
}
if (navigator.canShare(shareData)) {
try {
await navigator.share(shareData)
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message)
}
}
} else {
console.warn('Sharing not supported', shareData)
}
})
})()
},
},
}
</script>
Inspired from #denvercoder9!
More info about the answer
I've used an IIFE because I was not sure how the whole thing works, but it's works great in a method context!
I've added a missing async because ESlint and in case you wanted to make something after
I've used $refs because this is how you should select specific parts of the DOM in the Vue ecosystem
I've striped some things to keep it simple, hosted on Netlify to have some simple HTTPS and tested it on Chrome (v91), working perfectly fine!
Here is the link again to the MDN documentation of the Web Share API.
Compatibility
This is my experience for the browsers (tested on the MDN example and on my app, exact same results)
where
working
iPad chrome
yes
iPad firefox
yes
iPad safari
yes
windows chrome
yes
windows firefox
no
android chrome
yes
android firefox
no
desktop linux chrome
no
desktop linux firefox
no
For me, this was a mobile only feature (like for Android). But it looks like even some desktop browsers are handling this too. I have to admit that I was really surprised to even see this one work on Windows.
Here is an interesting post from Google that correlates this compatibility: https://web.dev/web-share/#browser-support
Reading MDN again, it says
The navigator.share() method of the Web Share API invokes the native sharing mechanism of the device.
So, I guess that the "(desktop) device" mostly do not support the Share API.
TLDR: this is working totally as intended but the compatibility is really subpar so far.
I have a variation of the code below in a share() function in an app of mine and it works fine if executed on the client.
const share = async() => {
if (!('share' in navigator)) {
return;
}
// `element` is the HTML element you want to share.
// `backgroundColor` is the desired background color.
const canvas = await html2canvas(element, {
backgroundColor,
});
canvas.toBlob(async (blob) => {
// Even if you want to share just one file you need to
// send them as an array of files.
const files = [new File([blob], 'image.png', { type: blob.type })];
const shareData = {
text: 'Some text',
title: 'Some title',
files,
};
if (navigator.canShare(shareData)) {
try {
await navigator.share(shareData);
} catch (err) {
if (err.name !== 'AbortError') {
console.error(err.name, err.message);
}
}
} else {
console.warn('Sharing not supported', shareData);
}
});
};
Hello I'm trying to get access to a usb stick from an electron application written in reactjs.
Since electron is a google chromium I thought I can use the USB Web-Api: https://developer.mozilla.org/en-US/docs/Web/API/USB
So I created a component like this:
import React from 'react';
const UsbAccessButton = () => (
<button
className="usb-access-button"
onClick={() => {
navigator.usb
.requestDevice({ filters: [{ vendorId: 0x0951 }] })
.then(device => {
console.log(device.productName);
console.log(device.manufacturerName);
})
.catch(error => {
console.log(error);
});
}}
>
Get USB Access
</button>
);
export default UsbAccessButton;
The vendorId is the correct one for my specific USB stick. But when I click on the button I get a error like this:
DOMException: No device selected. usb-access-button.component.jsx:14
But I want to list the devices available so the user can choose between. So maybe I didn't understand some parts of the docs or what is causing problems here?
UPDATE:
When I run this app inside my default chrome browser I get the dialogue to choose between the usb devices. So it looks like this error is more related to electron itself.
It is not currently (January 2020) possible to have a device chooser for WebUSB in Electron - see the issue here: https://github.com/electron/electron/issues/14545
At the moment the suggested solution is to use the thegecko/webusb polyfill, that uses the node-usb library instead.
I'm currently working on a simple share function where I can share a news article via the URL (I.E. https://www.nrps.nl/Nieuws/Nieuwsitem.aspx?ID=812). I'm using React Native Share for this (code below). When sharing on Facebook it shows up as dnndev.me instead of nrps.nl, what I expected it to be. Clicking the dnndev.me link redirects to https://www.nrps.nl/Nieuws/Nieuwsitem.aspx?ID=812&fbclid=IwAR3Eq-j1wX8GUVvSEvhFNu85k8U_vjmV0l4_ycF-AUhoV61YBIieRGJgQg4 instead of https://www.nrps.nl/Nieuws/Nieuwsitem.aspx?ID=812, but the content is the same. (if I shouldn't show any of this, please edit it out. I don't know what the extra string means)
From what I can tell, dnndev.me seems to be a development environment.
The questions:
What is dnndev.me, besides some sort of host?
Can I do anything to work around it showing up as dnndev.me or can I only inform NRPS that they haven't done so already?
RN code:
let message = `${news.Title}\n${news.Image}\n${news.MessageUrl}`
news.title is a simple string. news.image is a URL to an image, news.MessageUrl is the URL of the news article itself. I've tested it with only the MessageUrl and it has the same result.
try {
const result = await Share.share({
message: `${message}`,
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
console.log("Sharing dismissed")
}
} catch (e) {
console.log(e);
}
EDIT:
What I want to happen is to have the auto generated square / content field (or however it's called) like follows:
https://imgur.com/EalEbmZ
dnndev.me is a web server. As a web server, it notifies facebook of any problems in managing and operating facebook data and also solves any problems.
webSite of dnndev.me
And the fbclid behind the existing parameters is the visitor tracking system ID.
The acronym for fbclid is: "Facebook Click Identifier". It means a
Facebook click identifier.
It's about Facebook clicks.
These are parameters introduced for accurate statistics from this data.
We're also going to exchange data with Google Annalysis and AdSense.
Make more accurate estimates of visitors.
To share Facebook, you can use the following modules to work around it: This solution is contained in the Facebook developer's official document.
$yarn add react-native-fbsdk or npm install --save react-native-fbsdk
$ react-native link react-native-fbsdk
Note For iOS using cocoapods, run:
$ cd ios/ && pod install
Usage
import { ShareDialog } from 'react-native-fbsdk';
let message = `${news.Title}\n${news.Image}\n${news.MessageUrl}`
const shareLinkContent = {
contentType: 'link',
contentUrl: "https://www.nrps.nl/Nieuws/Nieuwsitem.aspx?ID=812",
contentDescription: message,
};
...
this.state = {shareLinkContent: shareLinkContent,};
...
shareLinkWithShareDialog() {
var tmp = this;
ShareDialog.canShow(this.state.shareLinkContent).then(
function(canShow) {
if (canShow) {
return ShareDialog.show(tmp.state.shareLinkContent);
}
}
).then(
function(result) {
if (result.isCancelled) {
alert('Share operation was cancelled');
} else {
alert('Share was successful with postId: '
+ result.postId);
}
},
function(error) {
alert('Share failed with error: ' + error.message);
}
);
}
Firstly sorry for my English.
Well, my problem is this. I'm using this library for read QRcodes in my WebApp. My QR codes contain links to other parts of my application, but when it redirect me, the camera is not turned off because (I think) that is using AngularJS routes. My question is, how I can force to reload the page when it redirect me ? By this way the camera will be turn off.
This is my code for turn on the cámera and read the QR:
app.controller("ReadQRCtrl", function() {
$(document).ready(function() {
$('#reader').html5_qrcode(function(data) {
window.location.href ="http://localhost/SCTraker/Application/appIndex#/"+data;
},
function(error) {
console.log(error);
}, function(videoError) {
console.log(videoError);
}
);
});
});
Resolved!! It a bug of the library, I uploaded the library to my GitHub: https://github.com/emilioxiri/html5_qrcode