I have been working on a HTML/JavaScript program which requires to be downloaded on to you local computer. I am wanting the program to load .mp3 files form the users music folder and display it. How can I do this locally without PHP.
For security reasons,
All the popular browsers does not let you load files from the local computer by default, unless the user select the file (or drag and drop it) on the browser (html5 example here).
Also, the browsers do not let you see a folder's content so that you know the files inside it.
In order to have full access to the file system with javascript, you need something else.
Web App as a computer app
For now, the best way to build a computer application using Web technologies (HTML, Javascript, CSS), is either NW.js or Electron
NW.js
From their github
NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.
You can start by building your code as a NW.js app (Getting started doc on their github)
Electron
Form their page
If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.
Node.js
You can use Node.js 's API for file system access (fs doc)
Related
I have a web project that I made with HTML-Javascript. I want to use the XML file (in local project folders) in this web project in javascript. Then I want to make a few changes in this XML file and overwrite the same xml file again. How can I do that?
JavaScript runs in the browser and is isolated from the local system. So the usual way is to upload/download the file. However here are several possibilities.
A small server application
Develop and start a small server application for example with node.js. The server part will provide the file system access.
Use a wrapper
A more advanced version of the previous solution, you encapsulate the web application using a wrapper like Electron.
File System Access API
Use the File System Access API available in some of the new Chromium based browsers.
We are converting our java-swing based desktop app into web based using javascript + react. Our current swing app uses local file operations heavily and performs lot of read/write actions on client OS. As you know in browser environment it is not very easy/possible performing local file access because of security restrictions. I know there is File API in html5, but all file related operations needs user iteraction (file browse action should be originating from a real human, not by script). Additionally we have als other native features such as port reading etc which are not possible with browser and javascript.
Can we trigger a java program from an html page in same manner for example the application zoom can start its native executable directly from an link. I think during the install of native executable zoom app, it registers himself to windows regedit etc. Can we make same thing for an java app?
I am looking a functionality like follows for a web application,
User select a local folder with high resolution images.
Resize this images and send to server for processing.
Make folders in the local file system and copy the original high resolution images according to the server response
Can we achieve this without using any locally installed application but with a web application only. Please guide me, which method/technology can I start with.
Browsers will not allow to access local file system due to security reasons. Image any website able to play with local files. Browser provides sandbox where your js app can run.
You best options could be to use webstorage. You have limited capacity there though and it is not accessible directly to user. Different browsers can be varying implementations.
You can do this with node.js and sharp or Imagemagick.
As others have mentioned in browser Javascript cannot access a local file system for security reasons. So you'd have to provide an upload interface to upload the image to a node server first, then you can convert the image into a buffer/data stream resize the buffer and save it again on the server ready to be downloaded.
NodeJs is a Javascript runtime
https://nodejs.org/en/
Express is a application framework you can build a webserver that can execute your javascript
https://expressjs.com/
(You've already said you'd prefer not to but) You could build it as an node desktop application using electron which would have access to the filesystem, but it would be a self contained app not a in browser application.
https://electronjs.org/
Sharp and imagemagick plugins are the most popular nodejs based image processors
https://www.npmjs.com/package/sharp
https://www.npmjs.com/package/imagemagick
Hope this helps you get started
I am developing Web Application using MEAN(Mongo, Express, Angular, Node) JS stack.
I would like to use PhoneGap to compile my clients for Android/iphone native app. At the same time I want to keep same client-side Views & AngularJS code to remain usable for desktop browsers. I am using bootstrapper for Responsive design and it works fine for me on mobile browsers.
I saw, Phonegap require us to include some of it's own Javascript files, and I will be required to have few more .js files in footer of index.html.
If I pressume, I should not be using server side .jade engine for index.html file, and all my .html should remain in client side.
will index.html created for phoneGap will cause problem, if I use it for desktop browser? Should I have different index.html for browser and phoneGap input. Can grunt help me in customizing index.html files.
What are the other things which I should take care of for my needs?
My advice for you is to separate the projects, Phonegap or Cordova Apps doesn't have a running server, they serve the html files through the file:// protocol.
If I pressume, I should not be using server side .jade engine for
index.html file, and all my .html should remain in client side.
You presumed correctly, no .jade templates should be used, your views should be plain html files or, if you want, load them as scripts so you don't have to load them on page request increasing app performance.
will index.html created for phoneGap will cause problem, if I use it
for desktop browser? Should I have different index.html for browser
and phoneGap input. Can grunt help me in customizing index.html files.
Yes it will, if you try to use an index,html from phonegap on a desktop browser you will get a lot of javascript alerts. Since phonegap.js is expecting to get some events that are fired by cordova when running on the device. And this gets worse if you have Cordova plugins.
WaveMaker is a powerful ajax based UI builder, but its JSON-RPC API standard is incompatible with our web service, which only has a RESTful API. As a result, we would like to design an UI without using any service using WaveMaker, and only extract part of its source code that runs on browser side (discarding all services)
Unfortunately, we can neither view or test the extracted code (all .html files show an empty page), a javascript reference in index.html is pointing to runtimeLoader.js, which we cannot find anywhere. So, is it possible to deploy the browser side code on a web container (not an application container like Tomcat) without runtimeLoader.js? If this is not possible, how do I change the source code so it can be tested without using WaveMaker?
If you don't mind having a java server in the mix, you could "import" REST calls to your API into the application. The XHR service (new in 6.5) targets JSON returning services. The 'Build-a-Service' does best with XML returning services. The browser would then call the WM java server, which in turn calls your REST services.
An easy way to get started with a WaveMaker client only app is to use the phonegap build option. This will build a zip file of a stand alone app. If you unzip that into say an apache served folder, you will render pages, etc. Note this build is targeted towards mobile devices via phonegap, so you will want to make adjustments if you are targeting desktop browsers.
Also, runtimeLoader.js can be found in the client runtime lib folder. e.g. /studio/lib/runtimeLoader.js of the installation.