Hy i want to share images with the new api. If i have a upload-form for a file, i can share that file with the api, i break my head trying to share a local file. Here my try:

function sharePage(){
const title     = document.title;
var filesArray  = [];
$.get(baseurl+"images/cover.jpg", { async: false }, function(data) { filesArray.push(data); });
setHashtag('share');
if(navigator.share){
    if(navigator.canShare && navigator.canShare({ files: filesArray })) {
        navigator.share({
            text: 'FILE',
            files: filesArray,
            title: title,
            url: baseurl
        });
    }else{
        navigator.share({
            text: 'NO FILE',
            title: title,
            url: baseurl
        });
    }
}else{
    document.location.href="whatsapp://send?text="+baseurl;
}

EDIT: The problem is, that i don't know to implement a serverside-file to this script something like var file = baseurl+"images/cover.jpg"; I tried with jquery $.get but it doesn't work

Hy i want to share images with the new api. If i have a upload-form for a file, i can share that file with the api, i break my head trying to share a local file. Here my try:

function sharePage(){
const title     = document.title;
var filesArray  = [];
$.get(baseurl+"images/cover.jpg", { async: false }, function(data) { filesArray.push(data); });
setHashtag('share');
if(navigator.share){
    if(navigator.canShare && navigator.canShare({ files: filesArray })) {
        navigator.share({
            text: 'FILE',
            files: filesArray,
            title: title,
            url: baseurl
        });
    }else{
        navigator.share({
            text: 'NO FILE',
            title: title,
            url: baseurl
        });
    }
}else{
    document.location.href="whatsapp://send?text="+baseurl;
}

EDIT: The problem is, that i don't know to implement a serverside-file to this script something like var file = baseurl+"images/cover.jpg"; I tried with jquery $.get but it doesn't work

• javascript
• api
• file
• share
• sharing

• You need to provide a clear problem statement. What do you expect this code to do? What does it actually do? Are there any error messages displayed in the browser's debugger? Are you testing this in a browser that supports the API (which currently appears to be Chrome for Android and nothing else)? – Quentin Commented Jan 6, 2020 at 16:40
• @Quentin Yes i checked it with this page on my android w3c.github.io/web-share/demos/share-files.html and loading a image in this form works fine. the code is from web.dev/web-share what i want is to share a image without uploading, i want share a image from server – Mac Dechmann Commented Jan 6, 2020 at 18:32

3 Answers 3

I get it working by requesting a blob and generating a File object. Someting like this:

fetch("url_to_the_file")
  .then(function(response) {
    return response.blob()
  })
  .then(function(blob) {

    var file = new File([blob], "picture.jpg", {type: 'image/jpeg'});
    var filesArray = [file];

    if(navigator.canShare && navigator.canShare({ files: filesArray })) {
      navigator.share({
        text: 'some_text',
        files: filesArray,
        title: 'some_title',
        url: 'some_url'
      });
    }
  }

Same in TypeScript with async/await (assuming you checked navigator.share is available):

const image = await fetch(imageUrl);
const blob = await image.blob();
const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });
navigator.share({ text: 'some_text', files: [file] } as ShareData);

I get it working by requesting a blob and generating a File object. Someting like this:

fetch("Url-image-complete")
.then(function(response) {
    return response.blob()
  })
.then(function(blob) {

    var file = new File([blob], "Name-image-whith-extension", {type: 'image/jpeg'});
    var filesArray = [file];
    var shareData = { files: filesArray };


    if (navigator.canShare && navigator.canShare(shareData)) {

    // Adding title afterwards as navigator.canShare just
    // takes files as input
    shareData.title = "Name"

    navigator.share(shareData)
    .then(() => console.log('Share was successful.'))
    .catch((error) => console.log('Sharing failed', error));

    } else {
    console.log("Your system doesn't support sharing files.");
    }
 
});