Skip to content

feat(file-transform-support): use blob-util's transform file support #1017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yittoo wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat(file-transform-support): use blob-util's transform file support #1017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27e6779
feat(file-transform-support): use blob-util's transform file support
yittoo May 8, 2026
86e7b24
chore(file-transform-support): fix the issue about cleaning pre-trans…
yittoo May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export interface PdfProps {
fitPolicy?: 0 | 1 | 2,
trustAllCerts?: boolean,
singlePage?: boolean,
transformFile?: boolean,
onLoadProgress?: (percent: number,) => void,
onLoadComplete?: (numberOfPages: number, path: string, size: {height: number, width: number}, tableContents?: TableContent[]) => void,
onPageChanged?: (page: number, numberOfPages: number) => void,
Expand Down
94 changes: 80 additions & 14 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export default class Pdf extends Component {
fitPolicy: PropTypes.number,
trustAllCerts: PropTypes.bool,
singlePage: PropTypes.bool,
transformFile: PropTypes.bool,
onLoadComplete: PropTypes.func,
onPageChanged: PropTypes.func,
onError: PropTypes.func,
Expand Down Expand Up @@ -95,6 +96,7 @@ export default class Pdf extends Component {
trustAllCerts: true,
usePDFKit: true,
singlePage: false,
transformFile: false,
onLoadProgress: (percent) => {
},
onLoadComplete: (numberOfPages, path) => {
Expand Down Expand Up @@ -124,7 +126,7 @@ export default class Pdf extends Component {
};

this.lastRNBFTask = null;

this.lastViewFile = null;
}

componentDidUpdate(prevProps) {
Expand All @@ -136,10 +138,12 @@ export default class Pdf extends Component {
// if has download task, then cancel it.
if (this.lastRNBFTask && this.lastRNBFTask.cancel) {
this.lastRNBFTask.cancel(err => {
this._cleanupViewFile();
this._loadFromSource(this.props.source);
});
this.lastRNBFTask = null;
} else {
this._cleanupViewFile();
this._loadFromSource(this.props.source);
}
}
Expand All @@ -158,8 +162,39 @@ export default class Pdf extends Component {
this.lastRNBFTask = null;
}

if (!this.props.cache) {
if (this.props.transformFile) {
// this.state.path is the .view file; unlink the original pre-transformed file.
// The .view file is cleaned up by _cleanupViewFile below.
if (this.lastPreTransformedPath) {
this._unlinkFile(this.lastPreTransformedPath);
}
} else {
this._unlinkFile(this.state.path);
}
}

this._cleanupViewFile();

}

_cleanupViewFile = () => {
if (this.lastViewFile) {
this._unlinkFile(this.lastViewFile);
this.lastViewFile = null;
}
};

_transformToViewFile = async (preTransformedPath) => {
const viewFile = preTransformedPath + '.view';
this._unlinkFile(viewFile);
const base64 = await ReactNativeBlobUtil.fs.readFileWithTransform(preTransformedPath, 'base64');
await ReactNativeBlobUtil.fs.writeFile(viewFile, base64, 'base64');
this.lastViewFile = viewFile;
this.lastPreTransformedPath = preTransformedPath;
return viewFile;
};

_loadFromSource = (newSource) => {

const source = Image.resolveAssetSource(newSource) || {};
Expand All @@ -175,10 +210,17 @@ export default class Pdf extends Component {
if (source.cache) {
ReactNativeBlobUtil.fs
.stat(cacheFile)
.then(stats => {
.then(async stats => {
if (!Boolean(source.expiration) || (source.expiration * 1000 + stats.lastModified) > (new Date().getTime())) {
if (this._mounted) {
this.setState({path: cacheFile, isDownloaded: true});
try {
const finalPath = this.props.transformFile
? await this._transformToViewFile(cacheFile)
: cacheFile;
if (this._mounted) {
this.setState({path: finalPath, isDownloaded: true});
}
} catch (e) {
this._onError(e);
}
} else {
// cache expirated then reload it
Expand Down Expand Up @@ -239,10 +281,25 @@ export default class Pdf extends Component {
});
} else {
if (this._mounted) {
this.setState({
path: decodeURIComponent(uri.replace(/file:\/\//i, '')),
isDownloaded: true,
});
const localPath = decodeURIComponent(uri.replace(/file:\/\//i, ''));
if (this.props.transformFile) {
try {
const viewFile = await this._transformToViewFile(localPath);
if (this._mounted) {
this.setState({
path: viewFile,
isDownloaded: true,
});
}
} catch (e) {
this._onError(e);
}
} else {
this.setState({
path: localPath,
isDownloaded: true,
});
}
}
}
} else {
Expand Down Expand Up @@ -270,6 +327,7 @@ export default class Pdf extends Component {
// response data will be saved to this path if it has access right.
path: tempCacheFile,
trusty: this.props.trustAllCerts,
transformFile: !!this.props.transformFile,
})
.fetch(
source.method ? source.method : 'GET',
Expand All @@ -293,7 +351,7 @@ export default class Pdf extends Component {

this.lastRNBFTask = null;

if (res && res.respInfo && res.respInfo.headers && !res.respInfo.headers["Content-Encoding"] && !res.respInfo.headers["Transfer-Encoding"] && res.respInfo.headers["Content-Length"]) {
if (!this.props.transformFile && res && res.respInfo && res.respInfo.headers && !res.respInfo.headers["Content-Encoding"] && !res.respInfo.headers["Transfer-Encoding"] && res.respInfo.headers["Content-Length"]) {
const expectedContentLength = res.respInfo.headers["Content-Length"];
let actualContentLength;

Expand All @@ -317,11 +375,19 @@ export default class Pdf extends Component {
this._unlinkFile(cacheFile);
ReactNativeBlobUtil.fs
.cp(tempCacheFile, cacheFile)
.then(() => {
if (this._mounted) {
this.setState({path: cacheFile, isDownloaded: true, progress: 1});
.then(async () => {
try {
const finalPath = this.props.transformFile
? await this._transformToViewFile(cacheFile)
: cacheFile;
if (this._mounted) {
this.setState({path: finalPath, isDownloaded: true, progress: 1});
}
this._unlinkFile(tempCacheFile);
} catch (e) {
this._unlinkFile(tempCacheFile);
this._onError(e);
}
this._unlinkFile(tempCacheFile);
})
.catch(async (error) => {
throw error;
Expand Down Expand Up @@ -365,7 +431,7 @@ export default class Pdf extends Component {
page: pageNumber
});
}

}

_onChange = (event) => {
Expand Down