Ionic - Read file from URI - javascript

Users of my application can select and crop images using Ionic Native - Crop. After they have cropped their image, I will have the URI of that image such as:
file:///storage/emulated/0/Android/data/com.myApp/cache/1535369478970-cropped.jpg?1535369482232
I want to use Ionic's File API, since it has a method readAsDataURL(path, file) which will convert the file to a base64 encoded data url, which is what I exactly need.
However, how would I properly separate the path and file from the URI of the file I have above so that readAsDataURL(path, file) is satisfied?
I also do not know what these numbers behind the .jpg?1535369482232 mean and I do not know what the name of the file would be or if it has a different directory on iOS since the URI above is provided from a test using Android Emulator.
P.S. I have tried calling the method with just the path above and no file name passed as second argument, but got the following error:
{"code":13,"message":"input is not a directory"}
How can I achieve the result I want for both iOS and Android file paths?

Your path refers 'cacheDirectory' this.file.cacheDirectory.
To get the file name.
const pathsplit = "file:///storage/emulated/0/Android/data/com.myApp/cache/1535369478970-cropped.jpg".split('/');
filename = pathsplit[pathsplit.length-1];

Related

How to preview a video upload in react-player?

I have an input of type file which allows my users to upload video files which will be of type File. In my application there also exists the react-player component which takes a URL prop that can be of type array or MediaStream according to its documentation. having done some research I found the following way to convert the File to a URL to be compatible with the react-player however it is depreciated so I do not wish to use it.
URL.createObjectURL(file)
This returns a URL for a blob or file object. I see that this has been replaced with passing a MediaStream to video.srcObject() but I am unaware how to convert a File to type MediaStream and srcObject() seems like a hacky way to access react-player which exposes its URL for the same purpose and also takes a MediaStream. To summarise how do I get a video uploaded with a file type input to be previewed in a react-player component?
Turns out URL.createObjectURL() is only depreciated for MediaStreams and you can therefore go ahead and use it for Blobs and File types.

Pdfmake Uncaught invalid image error even with correctly url

When I try to download PDF file with image generated by pdfmake I got:
Uncaught invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)
I have visited playground on their website but I got there the same error.
Here I paste the example url to image generated by my server. It works fine as you can see (paste it to the browser url).
Finally I posted code:
pdfMake.createPdf({
content:[{image: 'url from paste bin here'}]
}).download();
Honestly I have ran out of ideas.
You can include local JPGs and PNGs from your filesystem if you put them in the ./images folder from the pdfmake root. Then they will be referenced as "./images/filename.jpg" (or .png as the case may be). [EDIT: Also, images won't load above a certain filesize in preview. They will still work on server side rendering. I had a 4.7 MB PNG that would render just fine server side but no matter what, can't get it to render on the client. So just be sure to be using small images if you want to use the dev playground clientside preview feature.)

How to use a File object as css image source?

I have a reference to a javascript File object (image) which was provided by the user from a "open file dialog". How do I load this image file into a css background-image without having to read all data into a base64-string first?
The examples I have found use a FileReader to read the data and then load that into the css-tag but this seems like a bit of ineffective use of memory. Since I have the File-reference it would be nice if I could pass that into the css-tag somehow instead and let the image be streamed into memory instead. The url()-wrapper for "background-image" supports local filenames but for security reasons the full path of the File is not available to my script so I can't use that.
Any suggestions?
Let's say you have your File object in a variable called file.
var url = URL.createObjectURL(file)
yourElement.style.background = `url(${url})`
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Convert URI to FIle Object JS

In my Ionic app , Using cordova-fileChooser plugin i am able to get the Uri of the selected File .
Then Using cordova-plugin-filepath i got the absolute path of the file from the nativeURL on the phone
How do i get the file object from this path or Uri ?
I want to append it to a formData and post it .
Use cordova file transfer plugin.In this plugin you need to give the file url to upload.Reference is here link

Read a file purely in javascript on Firefox OS(B2G)

I have to read a file from the file system of my phone. Essentially its to check if the file contains a word. The file is located in the /sys folder of my phone. I know I can get the contents of the File using FileReader.readAsText(file) to get the contents as a string and then parse it for the word. But how do I make the "file" object to pass to the FileReader object. Thanks in advance!
Edit: Just wanted to add here:
Can I use the File constructor here?
var file = File("/path/to/file");
You can only read data from your app folder (via XMLHttpRequest) and from the SD Card. You cannot read data from any other place in a Firefox OS app.

Categories

Resources