Store filepath/image locally on smartphone and upload later? - javascript

I'm building a HTML/JS app that I will build into a PhoneGap IOS/Android app, to help a friend fill in in survey forms on her smartphone, store them on the phone and then upload them to a server when she gets 3G coverage.
My problem right now is that I want to attach photos to these forms. My plan was use jquery to serialize the path to the file, store it in localstorage and then upload via ajax later. However this doesn't seem to work.
Is there any way to store the path to an image, and then still be able to upload it later? or do I have to store the whole file somehow?

From Phonegap documentation:
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
The return value will be sent to the cameraSuccess function, in one of the following formats, depending on the cameraOptions you specify:
A String containing the Base64 encoded photo image.
A String representing the image file location on local storage (default).
It would be simpler to just put the base64 in the localstorage and get it at the time of uploading, but if you prefer you should be able to store the path, then retrieve data from it and upload when you have connectivity.
[EDIT]
I didn't think about the problem pointed out by #jaay in the comments. What if the file changes at a later time? Maybe it is just better to store base64 data.

Related

Is there a file size limit to what the data link can store?

For example, an image, video or sound file can be stored in the data link
In this case, an image can be stored with the starting link: data:image/jpeg;base64,/..... followed by many characters. However, is there a certain file size limit in which the data link cannot be capable of holding and storing it?
In my case, a user can upload an image to my site which is then sent through a server socket so others can view that image. But once uploaded, the image data link is stored within their localStorage, then emitted to the server side socket. However, there is a limit of storing 5mb within a localStorage. This then results to the user having to upload or use an image under the capable limit of localStorage. I am questioning if it is possible to just simply store the image link within a variable, as the image only needs to be sent so others can see it, it is not stored within a database.
This is my current code of storing the image from the input link they can upload the image from:
var image = e.target.result
localStorage.uploadedImage = imgto
Then sends the image through the socket:
socket.emit('<img style="border-radius: 4px; width: 16rem" src="${localStorage.uploadedImage}">`);
Is there a limit to how much the link can store of an image, no matter the quality or file size?
If you are worried about storage limits on the client side then use a Blob to store the image. The blob storage system in Google Chrome allows for Gigabytes to be stored in a blob, I would imagine that the other browsers have a similar capacity although I have never had reason to investigate such limits. See Chrome's Blob Storage System Design for details of Google's implementation.

Why to use Blob at all if I can save file pathes in database and actual files in storage?

I know that blob is a data type for binary data as integer is a datatype for int. As they say, It's used to store files directly in database (we move our audio file into blob, and save that blob in database).
Question 1) why to store blob for audio if I can just put the audio in storage for example path /var/www/audio.mp3 and in database I store path_name /var/www/audio.mp3?
Question 2) which is better ? how netflix stores movies? just blobs or what?
Question 3) Curious if there're any cons or prons if you could just give me ideas so that I know when to use them .
Putting the blob in the database, rather than a file, allows you to grow to multiple servers with load balancing. If you put the data in files, you would have to replicate the files between the server. Most databases have built-in replication features, this isn't as easy for regular files.
Better to use external storage/cdn for serving such kind of large content.
How Netflix and our works? They upload content on external bucket i. e. S3 and write file name in db for identification. According to user file access frequency that file cache on CDN/edge location. User will get awesome experience while content server from their nearest edge location
With blob you can store all kinds of stuff.
Do you communicate with an API via SOAP or JSON and want to store it in the database? Use a blob. Want to log what a user filled into a form when it threw an exception? Store the entire post as a blob. You can save everything as is. It's handy for logging if you have different data formats. I know an API which expects some data via SOAP and some as JSON. To log the communication I use blob because the response may be in XML, JSON, a number (http code 203 for empty but accepted) or an exception as array.

Upload image to a server (picasa/dropbox/etc) and retrieve the url to save it on my database

I'm developing a web application right now and i want to upload an image from a form to an external server like picasa, dropbox or any cloud server that is trustable. Then i want to retrieve the url of the uploaded image and save it to my database using javascript, html or php.
I have done everything (form, web app, database connection).
I only need a guidance guys, so i hope someone who done this before can point me to the right direction.
PD: This app will be used by users, so it should be easy to use for them (upload image, preview, fill form and save form-no account loggin or anything like that)
Thanx and i'm sorry if my english is bad.
it depends of service image, by example dropbox have an API and the PUT method to upload files, this method returns info in JSON format that you can use to store in your own database (https://www.dropbox.com/developers-v1/core/docs#files_put).
User Selects a file () >> Then you call the API methods (of the service to use) >> Catch the return data and then call your method to store info in your own DB
Can use Jquery AJAX to do API calls

Efficient way to display images(serve images) in MEAN stack application?

I am developing a MEAN stack application and i want to display the images with some responses.
Exact Requirement: There is search box , when user enter the name of the image , server should respond with that image and browser display that image.
I have maximum of 70 images with size 30kb maximum.
Should I store these inside the mongoDB and for every request node server hit the mongodb and serve that image in the response or I serve it with Angular.js?
Please recommend the efficient way to do that.
You can setup a folder for static content (CSS, images, etc) do it in your expess.js configuration probably you'll find something like this:
app.use(express.static(path.resolve('./public')));
app.use('/images',express.static(path.resolve('youPathToStaticimages')));
Then create a collection with the image metadata, like file name, size, uploaded date, friendly name and maybe tags or any other field that you can query.
Then use an endpoint / $resource combination and retrieve the data and display the images in the client with a simple HTML image tag (IMG) and use ng-src, probably within a ngRepeat.
For me that could be the easiest way to do it, also you can set some sort of cache policy to your image folder in apache or ngnix.
You've got a little over 2mb of data which can be easily cached. Transferring from the database to the web server or retrieving from disk is extra work. Load all the images into your node thread and when the keyword comes through send the cached image.

Image corrupted or truncated Phonegap

I'm using Phonegap to develop an android application. Users take photo, the photo is stored in a mysql database (medium-blob column). I store them using a simple INSERT INTO query, without changing the data. The data are sent server side using a REST call (PUT)
Here's an example of the content of this column:
thumb = '/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeG...'
It is written on the phonegap documentation that the image captured through the camera is encoded in base 64.The problem is, when i try to retrieve my images in the database, I cannot display them using this JS code :
$('#myImg').attr("src", "data:image/png;base64," + data
Any ideas of where this "Image corrupted and truncated" come from ? :(
The problem was located in the way I was sending the images.
I was sending the data through a string. I tried to pass them nested in a json object and It worked.

Categories