Are you familiar with the WebShare API for sharing files?

Question

Are you familiar with the WebShare API for sharing files?

Hello, I am looking to share images using the new API. When I have an upload form for a file, I can easily share that file with the API. However, I am having trouble trying to share a local file. Here is my attempt:

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 I'm facing is that I don't know how to implement a server-side file into this script. Something like var file = baseurl+"images/cover.jpg"; I tried using jQuery $.get but it didn't work.

javascript api file share sharing

Answer 1

Answer №1

My approach to solving this was to fetch a blob and then create a File object from it. Here's how I did it:

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

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

    if(navigator.canShare && navigator.canShare({ files: fileArray })) {
      navigator.share({
        text: 'sample_text',
        files: fileArray,
        title: 'sample_title',
        url: 'sample_url'
      });
    }
  });

Answer 2

My approach to solving this was to fetch a blob and then create a File object from it. Here's how I did it:

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

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

    if(navigator.canShare && navigator.canShare({ files: fileArray })) {
      navigator.share({
        text: 'sample_text',
        files: fileArray,
        title: 'sample_title',
        url: 'sample_url'
      });
    }
  });

Answer 3

Answer №2

To implement the same functionality in TypeScript using async/await (assuming that you have already verified the availability of navigator.share):

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

Answer 4

To implement the same functionality in TypeScript using async/await (assuming that you have already verified the availability of navigator.share):

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

Answer 5

Answer №3

I managed to make it work by fetching a blob and creating a File object, following this approach:

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

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


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

    // Including title separately since navigator.canShare only accepts files as input
    shareData.title = "Image-Title"

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

    } else {
    console.log("Your system does not support sharing files.");
    }
 
});

Answer 6

I managed to make it work by fetching a blob and creating a File object, following this approach:

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

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


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

    // Including title separately since navigator.canShare only accepts files as input
    shareData.title = "Image-Title"

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

    } else {
    console.log("Your system does not support sharing files.");
    }
 
});

Are you familiar with the WebShare API for sharing files?

Answer №1

Answer №2

Answer №3

Similar questions

Bizarre idiosyncrasy in Internet Explorer 7/8 regarding Javascript

Exploring the significance of a super in Object-Oriented Programming within JavaScript

Guidelines for breaking down a produced string within the console.log statement in JavaScript

The value chosen by the user is not retained by the Select function

Error: Vue.js application requires the "original" argument to be a Function type

Leverage jQuery Dialog to dynamically display data from a table in a user-friendly manner

I encountered a blank page issue when incorporating ui.bootstrap into my controller within Angular

Utilizing JavaScript for manipulating arrays and displaying images

Mixing colors in THREE.js vertex shader based on height levels

Transform the character encoding from a non-standard format to UTF-8

unable to view the outcome of an ajax request

Transfer content within <pre> tags to the clipboard using a Vue.js application

Process JSON data from an input using Javascript

What is the best way to include a php file within a div element?

navigation through sibling views using query-based route in ui-router

Avoid the ability for individuals to interact with the icon embedded within a button

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

Selenium JAR test case encountered a halt when it reached JavaScript commands

Track the number of button clicks on the website without ever resetting the count

Converting a JavaScript object into HTML output