Unable to save vcard on iPhone using Chrome browser

I am encountering difficulties when trying to download a vCard on iPhone Chrome. I am making an API call from the href link which is supposed to return a .vcf file for downloading the vCard. This functionality works seamlessly on desktop browsers such as IE, Chrome, and Firefox, as well as on iPhone Safari and Samsung Chrome. However, when attempting to download on Chrome for iPhone, it throws an exception, as shown in the provided image: https://i.sstatic.net/ezc9A.jpg

The API linked to the href is structured as follows: GET:

The code responsible for returning the vCard's .vcf file looks similar to this:

var vCard = BuildVCard(profile, profileUrl); vCard returns a Vcard

return new FileActionResult( new StringContent(vCard.ToString()), "text/vcard", CreateVCardFileName(profile));

CreateVCardFileName returns a string.Format("{0}.vcf", fileName);

The entities displayed in the Fiddler headers indicate something like this:

Content-Disposition: attachment; filename=Uma.vcf Content-Type: text/vcard

Is this issue related to iOS-Chrome compatibility? Do I need to include any additional configurations or specific MIME types for successful vCard downloads?

Thank you for your assistance and time.

Answer №1

My attempt to implement this feature on a website was partially successful. Redirecting to a "Please open in safari" page worked fine, but I faced issues with downloading the .vcf file on Chrome mobile by directly linking to it. Instead of initiating the download, it either led me to a blank external page or displayed an error similar to what you experienced.

Even after replicating the exact live demo on my own server, the button for downloading to any phone continued to malfunction compared to the original demo. My theory is that the issue may be due to different PHP versions running on the sites, but I could be mistaken.

How to add a contact to the iPhone's Address Book from a Web Page?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to pass a value from an addEventListener to another object for use?

In my project, I am trying to create three sliders that can adjust the color of a div when changed. Each slider functions properly, and I am able to track the value changes in the console. However, I am facing a challenge when attempting to assign that val ...

Using AngularJS to implement ngView within a custom directive

I've been attempting to implement ng-view within a custom directive, but it doesn't seem to be functioning properly and I'm not receiving any console errors. Here's the code for my directive: (function() { 'use strict'; ...

How to implement an instance method within a Typescript class for a Node.js application

I am encountering an issue with a callback function in my Typescript project. The problem arises when I try to implement the same functionality in a Node project using Typescript. It seems that when referencing 'this' in Node, it no longer points ...

producing base64 encoding that results in a blank image

I have some code that is supposed to get an image from a video using canvas. However, when I save this base64 code into an image, I end up with a black image. What could be causing this issue? Here is my JavaScript code: var input = document.getElementBy ...

What makes the ng-file-upload Upload service so special?

Why do I need to use the Upload service with ng-file-upload in this specific way? Upload.upload({ url: '/postMyFormHere', data: { fileToUpload: model.file, someField1: model.field1, someField2: model.field2, ...

Maintaining a consistent distance from the baseline while adjusting the font size dynamically in an HTML text element

Looking to lock a text element to the baseline while also resizing its font dynamically when the window is resized. I created a demonstration on jsfiddle. However, the issue arises when the window size changes; the distance from the bottom of the window i ...

How to utilize Vue.js method to retrieve child prop?

In my Vue.js project, I have created two components. The main component uses a child component called NoteRenderer, which includes a prop named data_exchange. My goal is to update this prop from the main component when a button is clicked. I attempted to a ...

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

Passing the value emitted from the vue-multiselect.js component to the main view

I am trying to pass data from my MultiSelectFilter component to my Home.vue view, but I am not seeing any results when using console.log. Even after checking the documentation on using the @input event for capturing changes in selection (), I can't se ...

Attempting to utilize PFUser within a NodeJS environment

I have been utilizing the PFUser class to generate user accounts for individuals using an iOS application to access a Parse-Server. Now, I am looking to transition this user management functionality from an iOS app to a web app (specifically NodeJS). Init ...

Iterating recursively through a tree structure to update properties using Mongoose

I have a unique structure resembling a tree that I've set up to store comments. Each "comment" acts as a node with a "parent" property linking it to another "comment" node. Additionally, I've included a "replyCount" field on each node to keep tra ...

Navigating through each element of an array individually by using the onClick function in React

I'm currently working on a project that involves creating a button to cycle through different themes when pressed. The goal is for the button to display each theme in sequence and loop back to the beginning after reaching the last one. I've imple ...

Configure the right-to-left directionality for a particular widget only

Is it possible to align the label inside a TextField component to the right, similar to "labelPlacement" on FormControlLabel? I am aware of using the RTL library with mui-theme, but that applies to the entire application. Is there a way to apply it to jus ...

Tips for sending information to a child component from a parent in Vue.js

Is there a way to pass the image url to this vue component? I am moving the code to a separate php file that will contain the <script> tag used by Vue, but it seems like it won't recognize the passed data from a parent component. Vue.component( ...

Acquiring the API through the callback function within a React application

I wrote a function that connects to an API and fetches data: import {API_KEY, API_URL} from "./constants"; export const getOperations = async (id, successCallback) => { try { const response = await fetch(`${API_URL}/tasks/${ ...

Explore the Plist for Results

Could someone assist me with this? I have loaded a plist file when my app starts up and I have a search input. I need to be able to search from the plist when text is inserted into the input. self.plistFile = [[NSBundle mainBundle] pathForResource:[NSStr ...

click event on ion card

Attempting to handle a click event within an ion-card using Ionic 5.0.2 version has presented some challenges. Despite my efforts, I have not been successful in handling the event with the expected function. Here is a snippet of my code: Dynamic card list ...

Building a dynamic and fast Vite project using "lit-ts" to create a visually appealing static website

I recently put together a project using Vite Lit Element Typescript and everything seemed to be running smoothly on the development server. However, when I tried running npm run build, only the compiled JS file was outputted to the /dist folder without any ...

Mapping an object in a table only results in the final value being displayed

I am facing an issue with my data object containing an array of data that I have mapped inside a table. The problem arises when I try to retrieve the id value of any item in the table's rows using console.log(). It always returns the id of the last it ...

Error in ReactJS: Trying to call a function from within a map function in ReactJS, but

Attempting to make a call to getElementByKey() function while mapping a collection: {this.state.sections.map(function(section) { return (<Tab key={section.value} title={section.label}> {this.getElementByKey(se ...