html5 file api, storing user selected directory in sessionStorage? - javascript

I'd like to make an application where a user can select a directory on their own computer, and I can refer to the images in that directory across page refreshes/etc. For example, the user selects a directory, or just multiple image files, and then every time the page is refreshed, display a random image from the selected directory. I don't want the images to get uploaded to my server, rather allow users to customize the experience by selecting which images get displayed on a session-by-session basis. I know it sounds like a very obscure scenario, but there is at least one circle of people I know of who will really appreciate this functionality.
Is there some way to achieve this with the HTML5 file api?
I'm currently using:
$imagesDir = 'random/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$randomImage = $images[array_rand($images)];
to serve a random image from a directory on my server at each page refresh. I'd like the user to be able to replace this directory with a directory they select on their own computer.

Grabbing them from an average (user selected) directory on the user's computer is not possible (see this answer for more in-depth info).
Basically you can not serialize/store the user-selected directory, neither do you have a directory-indexing method (for local files), so the user would still have to select each and every file (they want to share to your web-app) separately. Likewise, you can not store references to those files (beyond sessions).
You could however have them (the users) select files (images) from their computer and 'upload' them into the browser's local storage area (that is technically still on the user's computer).

Related

HTML - Choose local path to move a file

I'm going to create a web app that's going to run locally on the user's computer.
First off, the user has downloaded a JSON file that ended up on "my download files" locally on their computer.
So they are going to browse to e.g myportal.local and there they are going to select the downloaded JSON file and also they need to choose a local location (directory).
To simply the workflow
Go to myportal.local in the browser
Choose in the form the JSON file
Choose a local path on the machine
Press submit and other scripts will parse and download things to the chosen folder.
Steps 1,2 and 4 is not a problem, it’s step 3 on how to choose a local destination.
It isn't possible to do this directly in the browser.
Since the HTTP server is running on the same computer, you could use server side code to examine the structure of the computer's file system and generate a user interface in HTML for the user to pick directories with.

Temporary url for physical files in asp.net mvc

I am going to add some kind of security in my site . So i was thinking that is this possible to have temporary url to physical files .
Suppose i have a javascript file which is needed by my login page in order to run correctly . So can i do this something like dynamic suppose we have a url which is valid for current session of user when user logout that url gets expired .
The main purpose is that i don't want to disclose real path to my file
The purpose of a virtual path is to hide the real path from the browser. You can make a virtual path that is different from the physical path and the outside world will have no concept of where your actual file is.
You can map a virtual directory to any directory on your file system so it has a virtual path. Let's say you want to make the physical directory C:\temp\Images\ into a virtual directory called /Images/ and you are using IIS 7.
Open Internet Information Services (IIS) Manager.
Under sites, navigate to the site you wish to place the virtual directory in.
Right click on the site node, and click "Add Virtual Directory...".
For the alias, type Images.
For the Physical Path, type C:\temp\Images\.
Click OK.
Now you can access your image through the virtual directory /Images/img1.jpg. The browser has no idea that it is in the physical directory C:\temp\Images\.
There is an issue with what you are proposing. If you did host your JavaScript file on a "temporary URL for the current session", it means that the browser would not be able to cache the file and performance would not be optimal.
I cannot see any advantage to what you are proposing because regardless of what you do, the browser (and thus the user) will have access to your JavaScript code. The only difference is you will have a lot of complex code to generate temporary URLs that seem to serve no purpose.

How do I upload a local photo and display it on an html widget without using data

I want to design an html javascript widget for ibook that uploads a file either from the local storage or the user takes a photo. I have this code which does exactly that. But how do I save it so it can be displayed in a photo gallery. Is this even possible without having to upload online?
Select your file:
You can use a free webhosting for this. I have been using WebNG for free and for a period of over 5 years. Upload the files there, map the file names to show and you are good to go live.

How to allow user to set destination folder for downloaded files

In my web application there is a download button, when user clicks on it a file gets downloaded to the "Downloads" folder. I want to add an option where user can select the folder in which the file should be downloaded.
How can I do this? Is there any plugin available for this?
You will not be able to choose the user's download location with javascript or jquery. This can only be set from the user's end, It contains on the browser. otherwise it would violate user's security. What you can suggest is the file's name. Read more

Upload Image Files Temporarily on Client Before Uploading to Server

I am working on a project somewhat similar to Wix. Here users can create new pages and then add different elements to those pages. In Phase 1 we are working on 4 elements.
Text
Link
Panels
Image
All the changes that user makes to these elements are stored in an HTML5 storage if available (else we use cookies). These changes are only updated to db once the user clicks on Save button.
Now I want to give user the live updates on the viewer of the changes that it makes. So when a user gives an image path(local-directory/Url), I want to show him that image in <img> tag in the viewer. But I don't want to upload the file to server yet. Is there any way that I can upload the file in HTML5 storage and use it to show image? My colleague suggested that I create a temp directory on user's system and keep the files there. I want to avoid this because if the user exits the project improperly I will not be able to remove my temp folder. So any suggestions or tutorials would be nice.
Regards: Jehanzeb Malik

Categories