In my web app, users drag images from their desktop onto the browser window. I then use FileReader's readAsDataURL to display the image in the browser, as I described here. I can then upload the image to the server. The JavaScript in the browser can know in advance what the new URL for the image is to be.
Is there a way to tell the browser: "Here is the data that you would download from this URL, but there's no need to download it because it's already available right here. Just use this."? My aim is to get the image into the browser's cache so that using the real URL (rather than the dataURL) will display the image. This means that the browser can take responsibility for unloading such images from memory when they are (temporarily) no longer displayed.
Do you have any suggestions on how to cut out unnecessary bandwidth usage?
Correct me if I'm wrong, but I understand that you want the browser to display the image using the data from the desktop, instead of from the server on which it was uploaded.
As far as I know, browser caching relies heavily on the URLs, so I don't see how you could tell the browser to use local data instead of remote data.
However, you could:
load image directly from disk (you have the local path). However, you you have the local path in the code
use local storage (see Saving and loading an image from localStorage) to save the image locally and get it
Related
There is an API I'd like to interact with. It takes URL of an image and does it's thing. The problem is that I can't specify URL of an image saved in my clipboard for example.
Is there a way to make the browser behave like a file server in the sense that the outside Internet can access browser's assets via URL without creating your own backend. What would be the easiest and painless solution?
I am writing a single page application where the user can upload photos. But I am not clear about a situation in which while user is uploading multiple photos, he closes the browser. Now when he logs in again, the browser should automatically resume the upload from the last uploading image. Is this possible? How?
I cannot store the image in local storage and upload since the image
size can go beyond the local storage capacity.
I cannot store the file path and resume by using the file path.
Since the browser security won't allow me to.
When you are working with an SPA and the browser is closed the data in the SPA is lost. Even if you want them to resume uploading(which browser security won't allow) using the path there are 2 case scenario:
1)Does the file actually exist in the old path(No)
2)What if the user deleted or moved the file.
Anyways this should not be done using browser. Better to use a tool with 3rd party. like if you shut down the client, then the client will stop sending data to the server.
If you want to upload large files on a regular basis and not have the process be interrupted by people forgetting that their browser is uploading in another tab and quitting, then you might consider using a stand-alone upload tool (http://www.flickr.com/tools/uploadr/)
However It can be achieved by designing a special type of browser.
We have an offline web app written with js/jquery/HTML5 that uses local storage to store multiple MB of data in json format that gets edited when the app is in use. This data eventually gets uploaded to our server via ajax. It works very well on both iOS and Android devices. We now want to allow users to repeatedly select an item in their data and take a picture to later be associated with that item. Pictures would be uploaded to our server along with the data. Pictures would also be reduced to 50kb or less in size with a canvas element either at the time they're taken or when they're uploaded. For any given upload, they're may a hundred or more pictures.
We had planned to store a reference to pictures as they're taken to later use for uploading. We now know, in a browser, without using native app code or frameworks such as PhoneGap, that there's no way to store such a reference or path when pictures are stored in the iOS camera roll or Android gallery. We can get the picture's file name by using an input control, but that's of no use without a full path. Also, all image filenames on iOS devices are "image.jpg". We could access the pictures' image data using data URLs, but we can't reliably store it because there' not enough space in local storage for both our json-formatted data and potentially hundreds of data URLs.
So the question is, is there a way using js/jquery/html5 (not PhoneGap or native app code) to take a picture, get a reference to it for later resizing with a canvas element and then uploading via ajax?
If you want to know if is there a way to resize image in Client-side using canvas to reduce them to 50kb then yes, there is.
Here is the link : http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html
Here is a DEMO
And here is the CODE
I have tested it and it is really good.
PD. I dont like how this CODE resize the image, i changed it using another algorithm, let me know if you want it
Now i am looking for a way to listen the event when the mobile devise use the camera to take a photo and upload them. Because they are automatically rotated to left 90 grades.
I'm writing an application that uses Dropbox as the source of image files which are loaded via javascript by assigning img.src = "[Dropbox download link]". This works fine, but I'm often fetching many files at a time, and when re-loading a set of images (say, on a page reload), the browser re-sends a request for each one (which returns 304 not modified). I'd like to have the browser cache the image on the initial load so I can simply avoid the re-requests altogether, but can't figure out how to enable browser caching of these images. Can I set cache headers in this situation? The response headers from Dropbox have "cache-control" set to "no-cache".
You might be able to use HTML5's application cache. But I'm pretty sure you wont be able to serve the manifest file from dropbox either.
I want to allow a web site users to be able to download files from my site, but with the help of a client-side downloader with an ability to continue an interrupted download.
For example, I want to sent a person a file with a size of 30+ Meg. I want the user to have the best downloading experience, so I can't afford him downloading 25 Meg and then getting the download dropped due to the network problems on his side.
Therefore, I want to have a javascript downloader rendered on a download page, that will show the actual client-side file delivery, and when it is downloaded, to give an ability to a user to save the file.
Or is it not possible due to the fact that javascript won't be able to open a save file dialog and save to a file system?
I'm afraid that is not possible with JavaScript and that's why:
To continue downloading from the certain point you should send to the server the position number to start downloading from. And as JavaScript has no access to local file system, you can't get that position.
UPD: it seems that I was too hurrying with the reply.
The file size can be gotten using the HTML5 File API and after getting the file size you can pass it to the server which should support the partial downloading.
But anyway, after downloading another part of the file you should sew two pieces together in some way; standard web browser dialog will only suggest to overwrite the file.
UPD2: to work with files in some Internet Explorers you can use FileSystemObject:
var fso;
fso = new ActiveXObject("Scripting.FileSystemObject");
I'd look into making a plugin or extension. Like those DownloadThemAll extensions for firefox and Google chrome. Another alternative would be to use Flash, either alone or integrating it with javascript like hinted here: http://www.communitymx.com/content/article.cfm?cid=0922A