Access the blob file saved in the indexedDB on an iOS device or iPad

Greetings, I am currently fetching a file using axios in the following manner:

   return axios({
      method: "get",
      url: URL,
      responseType: "blob",
    })
      .then((response) => {
        return {
          ...val,
          blob: response.data,
        };
      })
      .catch((_) => {
        onError(val);
      });

Once I have the file, I proceed to store it in indexDB using Dexie.

  const { id } = dataToSave;
  return db.files.put(dataToSave, id);

In the database, the file is stored as a blob. https://i.sstatic.net/vACqq.png

My intention now is to save it using the following method: download(myBlob, title, mimeType); I have tried using filesaver, downloadjs, and manual methods.

  const { title, blob, mimeType } = material;
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.style.display = "none";
  a.href = url;

  // specify the filename
  a.download = title;
  document.body.appendChild(a);
  a.click();

  setTimeout(() => {
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 1000);

The file downloads successfully only during the current browser session. Upon refreshing the page, I encounter the error code WebkitBlobResource:1.

Are there any workarounds to this issue? I am seeking a solution to either download the file (pdf, html) or open it in a new or the same tab.

Answer №1

Storing data as an arraybuffer is currently the preferred method, as using blobs may not work as expected.

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

Chatting in the hot spring with choices

I am looking to create a customizable dialog box in AngularJS where I can pass options such as title and message based on the caller. Essentially, I want to improve upon the standard alert() function. While the documentation has information on passing par ...

Need help fixing my issue with the try-catch functionality in my calculator program

Can someone assist me with my Vue.js calculator issue? I am facing a problem where the output gets added to the expression after using try and catch. How can I ensure that both ERR and the output are displayed in the {{output}} section? Any help would be a ...

The heap limit has been reached in Github Actions, causing an allocation failure

Encountering a heap out of memory error in Github Action during the last "run: npm run build". FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory Error: Process completed with exit code 1. Showcasing the workflow file: name: ...

Discovering the size of content through solely the height and width of a div: Is it possible?

Can someone help me figure out how to calculate the content length based solely on the height and width of a div? For example, if a Div has a height:200px & width:200px, I would like to know that the stored content length is 298. function calculateCo ...

What does the error "Cannot access property 'length' of null when using 'angular'" mean?

I am currently working on counting the initial li items and encountering an issue with 'Cannot read property 'length' of null' after fetching data from the server using a unit test case. Here is my code: import { ComponentFixture, Tes ...

Delegation in IOS does not function properly when the application is running in the background

Currently, I am working on implementing delegation in iOS. However, I have encountered an issue while testing in XCode. When I set a breakpoint and perform an action that triggers a response, such as an HTTP request that takes a few seconds to complete, t ...

Tips for rendering objects in webgl without blending when transparency is enabled

My goal is to display two objects using two separate gl.drawArrays calls. I want any transparent parts of the objects to not be visible. Additionally, I want one object to appear on top of the other so that the first drawn object is hidden where it overlap ...

What is the best way to include keys in my JSON data, rather than just values?

I've encountered an issue with the PrimeVue datatable I created, as it is only showing empty rows. After investigating, I believe the problem lies in my JSON data structure, where the fields do not have keys. What modifications should be made to stan ...

Arrange objects on a grid

I've got an array filled with objects, each containing 3 images, a name, and some details. I'm attempting to display these objects on Bootstrap cards, but currently each card is showing up on its own line. My goal is to arrange the cards in a gri ...

A method for transforming each word in a string to begin with a capital letter

I'm not sure if my approach to solving this problem is correct: function capitalizeFirstLetter (string) { let stringArray = string.split(' '); for (let i = 0; i < stringArray.length; i++) { let firstLetter = stringArray[i ...

I'm having trouble getting the HTML checkbox symbol to show up correctly. My goal is to create all the elements using the DOM

I am currently building all of my elements manually through the DOM tree, and I am attempting to insert a checkbox symbol in this manner: //Add date var tdDate = document.createElement("td"); tdDate.textContent = ("" + workoutList[idx].date); ...

"What is the best way to manipulate arrays in vue.js using the map function

I'm currently dealing with a Vue code that incorporates anime.js. My code has grown substantially to over 1500 lines. In order for Stack Overflow to accept my question, I have only included 5 items of my sampleText, even though it actually consists of ...

Angular data binding between an input element and a span element

What is the best way to connect input texts with the innerHTML of a span in Angular6? Typescript file ... finance_fullname: string; ... Template file <input type="text" id="finance_fullname" [(ngModel)]="finance_fullname"> <span class="fullnam ...

Encountered an issue while trying to send a parameter to a

I am facing an issue with passing a parameter from my UIViewController to my subclass of UITableViewCell. The code scenario is as follows: MessagesViewController.m : #import "MessagesViewController.h" #import "MessageTableViewCell.h" - (void)viewDidLoad ...

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

Adding individual names for elements in a list using Jackson

Is there a way to assign a unique name to each element in a JSON list using JACKSON? For instance, consider the following JSON data: {"result": [ { "name": "ABC", "age": "20" },{ "name": "DEF", "age": "12" } ]} Howeve ...

Overlapping of JavaScript Array.push() function within nested arrays causing duplication

Recently, I encountered a puzzling situation while attempting to create arrays with three levels of depth. It may seem crazy, but this approach was the most suitable solution to my problem at the time. The code snippet below illustrates how these nested ar ...

How to verify for an empty array within a condition in JavaScript

I can't figure out why my conditional statement to handle the edge case of an empty input array is not working as expected. When I test it with my current example, it returns NaN (no clue why). However, if I change the conditional to if (array.length ...

Troubleshooting problem with Ajax responseText

Can an ajax responseText be received without replacing the existing content? For instance: <div id="content"> <p>Original content</p> </div> Typically, after running an ajax request with a responseText that targets id="conten ...

Learning to Use jQuery to Send JSON Requests in Rails

I am attempting to send a JSON post request to a Rails 3 server. Here is the AJAX request I have set up: $.ajax({ type: 'POST',<br> contentType: "application/json",<br> url: url, ...