Upload Image Files Temporarily on Client Before Uploading to Server - javascript

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

Related

Is it possible to display user images with javascript without having to save them to some backend?

I want to display user images without having to save them online.
I have the user's absolute path to the image on their computer but when I try to display that it treats it as a relative path.
Is it possible to display an image with only frontend work and no backend? I want my app to be as trustworthy as possible so I don't want to save the user's images online.
#JamacCrew, Welcome to StackOverflow!
Your application cannot have access to the machine of a user so you cannot display images stored on their machines. You don't want to save the images on your server, so your user will have to give you the link to the images that are stored on a platform like dropbox or google. You can then save these links in your database and use them to display the images.

html5 file api, storing user selected directory in sessionStorage?

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).

What's the right approach to saving and loading files on client-only web apps?

I'm developing an application that will allow the user to create his/her own data, and since I don't have a backend or a database, everything just lives on the user's session.
My ideal solution would be the following:
User works with the application, clicks on "Save", gets a download prompt, downloads a file to his/her filesystem
User clicks on "Load", a file input dialog gets shown, user picks his/her file, and the data is back again on the app.
I thought in using the FileSystem API, but it will just work on a sandboxed environment which defeats the ability for the user to work with the data in another browser.
I know I can simulate a download by just stringifying the data dropping it into a window to make a download. However, when I want to load this data again using input type=file, I don't have the ability to read the actual contents of the file, so it's a one-way path.
Some other apps usually just displays the contents of the file to the user and make the user copy/paste content, but I would like to simplify to the user.
Finally, I would like to support at the very least the latest version of desktop browsers.
What option would be the most suitable for this situation?
You should offer files for download, then read them from <input type="file"> using FileReader.

How can I code my web page to download a file from a site visitor's computer?

I am creating a html5 and javascript web page that allows you to draw your own picture. The page itself works, but I want to make it so my web application will create a folder in their Appdata (or Application Data if they're on a mac) directory.
Then I also want to make it so when a user logs back on to the website, all of their work is saved and they can pick up where they left off.
So basically, I want to be able to create a file on a client's directory, then be able to download that file once they have saved a change to their drawing. Is there a way I can do this? Thanks.
All of these things can be done by using the HTML5 file APIs.
Here are some links which will help you with your task:
http://www.html5rocks.com/en/tutorials/file/dndfiles/
http://www.html5rocks.com/en/features/file_access
Storing state can be accomplished by using one of the following technologies:
Cookies
localStorage
indexeddb
WebSQL

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.

Categories