Using the Cordova File Plugin

[@abhay2192]

I want to save a file in the DCIM folder of the device. Will this work for it?

[@abhay2192]

Your help will be greatly appreciated 🙏

[@SteveGriffith-Prof3ssorSt3v3]

Yes. This plugin and the Camera plugin work well to do that.

[@augmentos]

where would you get the video length stamp data to display if you were selecting a video thumbnail?

[@SteveGriffith-Prof3ssorSt3v3]

You need the media plugin to read data about the video. The thumbnail is also not something that is part of the file you need to generate that.

[@augmentos]

@@SteveGriffith-Prof3ssorSt3v3 we use an old plugin called gallery roll and after days finally got the video thumbnail to show but cant get the time of the video to show. So not sure hot to generate the timestamp to show. I'll look at the source on the media plugin. Thanks.

[@augmentos]

and on Samsung now half the thumbnails have turned sideways!! Argh haha how can there be no plugin that offers video and gallery images with times, and rightside up?! Cordova is infuriating.

[@ysotech4502]

Steve do you recommend capacitor or cordova , and can i go with ionic and cordova today i mean it's good option and if i go with cordova and ionic does i will have issues as a singel programmer

[@ysotech4502]

I know it's 3 questions but i wanaa to hear you openion

[@SteveGriffith-Prof3ssorSt3v3]

i've only done a small amount of experimenting with Capacitor to evaluate it for use with my students. I decided against it because the community is not that big yet and so much of the documentation and so many examples are geared towards Angular, which I don't teach any more. Honestly, I'm moving more to React Native and Flutter for mobile development in projects where I don't use Cordova.

[@ysotech4502]

@@SteveGriffith-Prof3ssorSt3v3 oh nice i use flutter before put i choose to not complete with it because i was new to programming and i feel like it's hard to master not hard to get into it , and about myself i love to master anything not to just get some ideas about it

[@ysotech4502]

@@SteveGriffith-Prof3ssorSt3v3 to be honest i feel flutter better than react native alot

[@ysotech4502]

@@SteveGriffith-Prof3ssorSt3v3 especially that flutter give you very good productvity retio , react will be very slow and hard on some point , not like flutter , flutter is the best and i think to go learning it again after i under stand of the meaning of "programming , oop" , and i start think as a programmer

[@simons.6619]

Nice tutorial :) How would you go about selecting other file types e.g. PDFs etc would this be within scope of the Cordova File Plugin?

[@SteveGriffith-Prof3ssorSt3v3]

You can select any file types with this plugin. Being able to write to a PDF is a different thing but you could save one, copy one, move one, or delete one.

[@galiousmaze144]

Good day, I need your help in my project, I am using quasar framework to develop a mobile app (Android and iOS), I have list of [file object], created by So I used cordova-media-capture to be able to capture video, audio and picture from user's mobile and then push it to the above file list. Question: After capturing a video for example, the captured video stored in the device and cordova only providing me the captured file fullPath, So i need to add captured video to the file list and show it thumbnail then update to firebase storage. Can you please advise ? Kind regards

[@SteveGriffith-Prof3ssorSt3v3]

Sorry. I do not have time to help people with their projects.

[@galiousmaze144]

@@SteveGriffith-Prof3ssorSt3v3 Ok, the question is, how it is possible to upload captured video through cordova-media-capture to firebase storage, that's all Thank you in advanced :)

[@galiousmaze144]

@@SteveGriffith-Prof3ssorSt3v3 because i couldn't find video for cordova-media-capture in your playlist

[@SteveGriffith-Prof3ssorSt3v3]

@@galiousmaze144 I never made a video about it

[@SteveGriffith-Prof3ssorSt3v3]

@@galiousmaze144 I don't currently have any tutorials on Firebase.

[@lucacodes]

Hey Steve, thanks for the tutorial. Any resources on how to write directly to a location when we have a Blob stored in memory, rather than on disk? My app generates a custom file type that I'd like to store to a location but I can't wrap my head around the filewriter spec they have implemented.

[@SteveGriffith-Prof3ssorSt3v3]

If you are working with Blobs then you will be working with TypedArrays. The filewriter spec like I was showing here is for read and write but not really for manipulating files.

[@lucacodes]

@@SteveGriffith-Prof3ssorSt3v3 Not quite sure I follow. What I'd like to do is solely write, and read a custom file (no need to manipulate once they're saved, only overwrite if a new version comes in). Would the spec work for this case, or is there another plugin/library I should be looking at. The help/advice is much appreciated!

[@SteveGriffith-Prof3ssorSt3v3]

@@lucacodes There may be other plugins that people have written. Not sure. I have just used this core plugin from the PhoneGap/Cordova team to read, write, overwrite.

[@ashutoshmehere5915]

sir i want to import .db file in my app ,it has lots of data.how to do it sir.?

[@ahmedayachi5889]

thanks a lot juste one question how to copy the image to the device gallery?

[@SteveGriffith-Prof3ssorSt3v3]

If you look in the comments in the provided code GIST I show the methods for each object and provide the links to the documentation that list the names of the different standard locations. The Entry object has a copyTo method, just like I use in the demo. Here are the iOS locations - cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/index.html#ios-file-system-layout. Or using the Camera plugin you can save directly to the gallery when taking the picture.

[@ahmedayachi5889]

@@SteveGriffith-Prof3ssorSt3v3 just i needed the gallery location and i completely forgot about the system layout provided in the documentation so ty so much

[@ysotech4502]

كيف حالك احمد والله اني سعيد جدا ان في عربي غيري مهتم في جافا سكربت و كوردوفا (Cordova) اذا تحب يصير في تواصل بينا ونستبدل خبراتنا ف اكون جدا سعيد ب التواصل معك

[@ahmedayachi5889]

@@ysotech4502 i would be happy to

[@thorsten2164]

Hi Steve, thank you for the very good tutorial. One question, in the cordova documentation the call of the resolveLocalFileSystemURL function is: window.resolveLocalFileSystemURL(), you use it without "window". What is the reason for that? Regards from Germany, Thorsten

[@SteveGriffith-Prof3ssorSt3v3]

Window is the root global object in the browser. All the methods are inside it. Just like the document object. You can write window.document or just document.

[@felixtopappz7338]

How can i allow users to save image from my app to their device ..That there are image posts on my app how can implement users saving images as we have on twitter

[@SteveGriffith-Prof3ssorSt3v3]

That is exactly what I am showing in the video.

[@hartonorj3987]

Sir, can you make a tutorial for uploading camera images to the server using Cordova

[@SteveGriffith-Prof3ssorSt3v3]

I already have a couple videos about uploading images with fetch kzbin.info/www/bejne/q5OrepSvf7Cbl8U kzbin.info/www/bejne/gKWuepanj8l_gq8

[@robertodelrio3249]

thank you! very good and useful tutorial! you save me a lot of time :)

[@milinddabhade5280]

hello i need to ignore font settings in android is there any solution for this in cordova

[@SteveGriffith-Prof3ssorSt3v3]

What font settings?

[@milinddabhade5280]

@@SteveGriffith-Prof3ssorSt3v3 the android device default font setting is creating the issue in my app design if its large then my app responsive is not working

[@SteveGriffith-Prof3ssorSt3v3]

@@milinddabhade5280 you can set any font you want through CSS. That does not prevent the user overriding font sizes though. That is an accessibility requirement.

[@DHealey]

Thanks for the explanation and the demo files. I've built the project and it works perfectly. This is the path (native url) I'm getting when I copy an image - file:///data/data/io.cordova.hellocordova/files/images/1626610770704.jpg How do I access this location on my device through a file browser (or when connected to a computer)?

[@SteveGriffith-Prof3ssorSt3v3]

Through either of those or you can browse all the files through Android Studio when the device is connected.

[@DHealey]

@@SteveGriffith-Prof3ssorSt3v3 The location isn't showing up in my file browser. Is this sandboxed so it's only accessible from the app itself?

[@SteveGriffith-Prof3ssorSt3v3]

@@DHealey yes all files that are inside an app location are sandboxes from other apps. But through browsers on the attached dev computer like android Studio's should be able to see them.

[@DHealey]

@@SteveGriffith-Prof3ssorSt3v3 I see, I need a location that the end user can access through their regular file browser. Which location should I use for this? I understand that externalDataStorage requires root privilages since API 30

[@mr.president6122]

How to upload pdf or doc files??

[@SteveGriffith-Prof3ssorSt3v3]

To upload any file from the app, use a FormData object and the fetch( ) method.

[@mr.president6122]

@@SteveGriffith-Prof3ssorSt3v3 could you please write code or some lines here? It would be easier for me to understand. Thanks in advance.

[@MrBmsco]

Thanks a lot. This is brillant. Perfect tutorial with excellent narration / voice for not native speakers of English. Nevertheless I have Uncaught Type Error: Cannot read property 'addEventlistener' of null. line 68 column 38. I am afraid the arrow function syntax is too new and complicated for me, so I cannot find what is wrong with line 68. Line 68 in my JavaScript code is "path,", not one of the two lines of addEventlistener. So, if you don't see immediately what is wrong with the / my? code, copied an pasted, you could top the brilliance with an downloadable example of code not using arrow functions? Bernd

[@SteveGriffith-Prof3ssorSt3v3]

If you want to change the arrow functions to standard ones just replace this "( ) =>" with this "function ( )" where ever you see it. If there is a variable inside the parentheses in the arrow function put the same variable inside the parentheses for the old function syntax. In the browser console you can click on the error message where it says the file and line number and it will show you the source of the error.

[@MrBmsco]

@@SteveGriffith-Prof3ssorSt3v3 Thank you again.

[@MrBmsco]

@@SteveGriffith-Prof3ssorSt3v3 I left it with the meanwhile understood arrow syntax. Still do not get this working with my NSB AppStudio Framework even after special constructions with deviceReady and DOM...loaded. Either error messages or controls do not display. Then I used PhoneGap Desktop connected with PG Mobile App on my Galaxy S10, using the unzipped apk file which had not worked before after having installed it on the same device. With the PG apps this did work perfectly. Amazing. Just in case: would you have an idea what the difference might be?

[@MrBmsco]

​@@SteveGriffith-Prof3ssorSt3v3 Got it finally. I guess - because there were more changes with my code - that I only had to repair a bit with content security policy. Thanks to you I learned how to work with fat arrow functions etc. Perfect tutorial.

[@markvansteenbeek9126]

hey i just want to create a folder to store files in i used this code and put it on a button with a onclick function "" function getPermFolder() { let path = cordova.file.dataDirectory; //save the reference to the folder as a global app property resolveLocalFileSystemURL( path, dirEntry => { //create the permanent folder dirEntry.getDirectory( "images", { create: true }, permDir => { app.permFolder = permDir; document.write("Created or opened", permDir.nativeURL); //check for an old image from last time app ran app.loadOldImage(); }, err => { document.write("failed to create or open permanent image dir"); } ); }, err => { document.write("We should not be getting an error yet"); } ); }"" and it does not work please help

[@SteveGriffith-Prof3ssorSt3v3]

Document.write is only to be used while a page is loading, not after.

[@markvansteenbeek9126]

@@SteveGriffith-Prof3ssorSt3v3 that was just for trying how far i came in the code but i fixed it

[@markvansteenbeek9126]

@@SteveGriffith-Prof3ssorSt3v3 the whole code of yourse diddent work for me so i used this: ""(function(){ document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { console.log("device is ready"); window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail); } function fail() { console.log("failed to get filesystem"); } function gotFS(fileSystem) { window.FS = fileSystem; var printDirPath = function(entry){ console.log("Dir path - " + entry.fullPath + ""); } createDirectory("testmapje", printDirPath); } function createDirectory(path, success){ var dirs = path.split("/").reverse(); var root = window.FS.root; var fullpath = root + path; var createDir = function(dir){ console.log("create dir " + dir + ""); root.getDirectory(dir, { create : true, exclusive : false }, successCB, failCB); }; var successCB = function(entry){ console.log("dir created " + entry.fullPath); root = entry; if(dirs.length > 0){ createDir(dirs.pop()); }else{ console.log("all dir created" + ""); success(entry); } }; var failCB = function(){ console.log("failed to create dir " + dir + ""); }; createDir(dirs.pop()); } })();""

[@salvadoracosta3063]

gracias amigo

[@SteveGriffith-Prof3ssorSt3v3]

de nada

[@Miscible.Riyasist]

hi, can you show us something just in a simple way on only and only how to display the file:/// image url coming back from the successCallBack ? too many nests are glitching my brain to understand the chain...while I have everything done all by myself so far I am just stuck on displaying that image sent back by the camera plugin... it's just not getting displayed god knows why and sadly, no where on the internet have I been able to find a solution that works.... function onPhotoDataSuccess(imageData) { var picPreviewBox = document.getElementById('picPreviewBox'); picPreviewBox.style.display = 'block'; picPreviewBox.src = imageData; } this isn't displaying any image unless I return the destinationFileType as DATA_URL instead of FILE_URI (which I don't want to do)

[@SteveGriffith-Prof3ssorSt3v3]

Here is the video I have on the camera plugin - kzbin.info/www/bejne/oJ2vYoWrjJ5-n9k

[@Miscible.Riyasist]

@@SteveGriffith-Prof3ssorSt3v3 Hi, firstly, sincere apologies for not even thanking you in my previous comment. A BIG THANK YOU for bringing up tutorials in such a wonderful way for all of us developers here! You are doing a great job!... I referred to that video from 2018 so here's the catch. that method no longer works for emulators/devices having android 10+ ...I have been however able to figure out the solution though. Actually, I am even using the cordova-plugin-crop ...so right after the camera success function I call the crop function which returns the native file:/// path. The path looks somewhat like file:///PATH_TO_THE_FILE_THROUGH_INCREDIBLY_NUMEROUS_FOLDERS/filename.jpg?filename which I then convert to the cdvfile path and use the path in the dom directly and then it displays me the captured and then cropped image....but yet again...i am now stuck on how to upload that file to the php file on my server in order to save the entries in the mysql as well as the picture in a folder on the server.... because cordova-plugin-file-transfer is depreciated. 😢

[@SteveGriffith-Prof3ssorSt3v3]

@@Miscible.Riyasist it's been a couple years since I worked with Cordova. So I'm not up to date with changes to the plug-ins. If uploading to the server is your issue then I would recommend using vanilla JS fetch. It is supported everywhere.

[@galiousmaze144]

@@Miscible.Riyasist HI Ms. Riya, Please let me know if you've fixed this issue, looking forward to your reply, Thank you.

[@Miscible.Riyasist]

@@galiousmaze144 hi..yes I have been able to do the job using the cordova-plugin-file .. lemme know your issues and I will be happy to help