Reading images and documents - javascript

How might an old (4+ years) cordova setup load images and documents for display to a user?
Moving to the current Cordova has broken the display of images and documents, but I can't see where I should be looking to fix this. There's a javascript function called fetchFile() which looks promising, but this returns an error and says the file is not available (for .jpg, .pdf and .doc), but I can't see where it would be getting it from. Can anyone suggest where I should look?
Some (but not all) files used the ExternalFileUtil plugin, but the only other plugins I can see are BarcodeScanner and SQLite plugins

Related

(ReactJS) Saving a file to a particular user-selected folder

Working on a Data Management System in React. I want to open the explorer window to let the user choose where they want to download a particular file stored on a server. I want to override the browser setting. Only need Chrome functionality.
Researched a lot about this, I know it's apparently a browser-side security feature
But as of recent, Chrome's apparently started supporting some File System access api so if someone could help me out with that, I'd be much obliged.
Tried the saveAs package, tried this tutorial and a bunch of other stuff to no avail.
I did find some solutions for writing text to a .txt file but the problem here is that the downloaded file could be of literally any type.

Checking for a valid file across domains from local file

Background:
We have a paid service that we download zip files from. The zip files are in a very predictable format like this
"file_<date>_Level1.zip"
"file_<date>_Level3.zip"
"file_<date>_Level7.zip"
"file_<date>_PG.zip"
The only interface to download there files are from a website that uses adobe flash and you have to traverse a navigation tree 4 levels deep, download a file, then traverse another tree 4 levels deep and download the next file. There are over 100 files and it takes a user about 1.5 days to do this.
Because the file names are very predictable - and have been for years, I am trying to generate a webpage that they can open locally on their laptop and the links point directly to the download, so when they click on the link it automatically downloads the file. something like:
www.contoso.com/resources/downloads/file__<date>_Level1.zip
www.contoso.com/resources/downloads/file__<date>_Level3.zip
www.contoso.com/resources/downloads/file__<date>_PG.zip
Every week, these files are updated and not all of the levels are there, so when I dynamically generate these links, about 25% of them fail.
Question:
I am looking for a way to check if the download link is valid, and if not perhaps gray it out or add an image that is now visible that is like a red x indicating that the file is not there.
What I tried:
I tried using AJAX, jquery, php, all kinds of things, and I mostly ran into what I believe are CORS issues? About cross-domain requests? I have spent probably 2 days on this with tons of trial and error and research. It seems like it would be such a simple thing: "Does the zip file exist at this url?"
Since the webpage with download links is really just a simple html file that they will probably have on their desktop, I also tried disabling CORS with something like chrome --disable-web-security --user-data-dir and other options.
So frustrated, any help is appreciate, also my level of AJAX, jquery, php etc. is basic, my career has been spent in SQL Server, Azure, etc.
Thanks,
Matt

Trouble requiring too many images in React Native

I have javascript file that looks like below. It has lots of object (1000+). As we cannot use dynamic name for images in react-native this is my work around.
"grinning": {
"image": require('./images/1f600.png'),
"shortname": ":grinning:",
}
I am requiring this file in some other react native function and looping to display all the images. But getting internal error on requiring too many images in javascript file.
{"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for details"}
In terminal it says
fs operation timeout
This works if i remove few entries from the file.
Any suggestion or better approach
There are known issues with the Fresco library in charge of handling images, and memory limits:
Memory issues with PNG images
React Native Android depends on Fresco
for loading and displaying images. Currently we have disabled
downsampling because it is experimental, so you may run into memory
issues when loading large PNG images.
So maybe try compressing your images if you can, and only require them when they have to be rendered.
You should also check the bug tracker. Here is a comparable issue and its fix:
#phones24 wrote:
I optimized my app so it's not cached too many images. I also added
some more JPEG compression and scale the images down a bit. I also
wrote a path that adds error information to the event.

Drag and Drop file and folder uploading

I have ran into a problem: I need to allow a website visitor to drag and drop files AND folders, and handle the upload. Since it is supposed to be a image upload, I need to differentiate between those two before doing any actual uploading.
Question: How to know if dropped item is a file, or a folder? Using webkitGetAsEntity is almost ideal, but obviously, it does not work on neither IE or Firefox (need support for both of them).
Libraries used: I can use AngularJs, jQuery and simple javascript. Using other libraries is not possible.
Can anyone give me any suggestions here?

How to use PDF.js to load file included in web app (not from "file:" URL?

I want to be able to show PDF files within my Chrome app using PDF.js but the documentation is non-existent. I've been unable to find any simple examples or tutorials that show the code to load a PDF from a relative URL, show the page, and navigate through the PDF. They have very complex examples where 95% of the code does other things and it's very difficult to parse these and find the relevant functions. I would like to:
Include the relevant code in my app (is this the "pdf.js" created by "node make generic" and nothing else? Or do i need to include other JS files as well?)
Be able to show PDF files that are inside my myapp.crx file
Does pdf.js require "LocalStorage"? Will localStorage continue to be allowed in Chrome extensions/apps or is it deprecated?
Can someone tell me if #2 is possible and how to find some example code or documentation on the proper classes/functions to call and files to include/build?
node make generic outputs to the build/generic directory. This directory contains two subdirectories, "build" and "web".
"build" contains "pdf.js", which is the actual PDF engine.
"web" contains a viewer, similar to the one at http://mozilla.github.io/pdf.js/web/viewer.html.
After copying both of those previous directories to your app, you should be able to load the PDF file using chrome.extensi/web/viewer.html?file=path%2Fto%3Ffile.pdf
PDF.js does not require localStorage.It's used if available for persisting settings such as scroll position, but if unavailable, PDF.just continues to work without it.
There is one significant issue though: PDF.js loads the localization files using synchronous XMLHttpRequest. This is not allowed in a Chrome app. You could solve this issue by serializing all files in the locales, put it in a single JavaScript file, load this in viewer.html, and simplify l10n.js to read the translations from the file I just described.
Just to clarify: normally you should be able to access a file baked into your CRX by providing a relative or absolute path to it within the CRX's internal directory structure, e.g.:
'myfiles/pdfs/example.pdf'
With PDF.js, I guess that's what "path-to-file.pdf" should be in Rob's answer above, verbatim.

Categories