WebShare Api sharing files?

Question

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

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, Jan 06 '20 at 16:40
@Quentin Yes i checked it with this page on my android https://w3c.github.io/web-share/demos/share-files.html and loading a image in this form works fine. the code is from https://web.dev/web-share/ what i want is to share a image without uploading, i want share a image from server — Mac Dechmann, Jan 06 '20 at 18:32

score 29 · Answer 1 · answered Apr 18 '20 at 20:56

29

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'
      });
    }
  }

answered Apr 18 '20 at 20:56

Jonatã

391
5
4

1

This helped a lot! Cheers! – steveniclas Feb 10 '21 at 20:31
I am not able to share url and files together, it works either url or files , any workaround? – Abhishek Maurya Jul 11 '22 at 18:10

score 6 · Answer 2 · answered May 07 '21 at 16:27

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);

score -1 · Answer 3 · answered Dec 30 '20 at 17:07

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.");
    }
 
});

WebShare Api sharing files?

3 Answers3