Ionic Framework & Cordova & Parse | Upload image to Parse - javascript

I was working on a little app and I was trying to upload images to Parse. These images are taken with camera using the cordova camera plugin (I am using ngCordova). Well my question is, the camera plugin can return the image in base64 or an url. I've read that is not a good practice manipulating base64 encoded images because this leads to memory problems. The alternative I think was using Cordova File Transfer plugin but the problem is Parse does not support "multipart/form-data". So, What method should I use to upload images to Parse? I also thought of using Javascript Parse SDK which lets me upload files in base64 but I am still concern of memory leaks.
Thanks you all very much

You can probably set chunkedMode on the file transfer plugin to false to avoid multipart being sent. The problem is that then you've still got to read the whole thing into memory in order to send it and you won't be able to get the progress callback. I don't know if this matters but it should help to get around the restriction.

Related

node.js create / modify Exif inside the JPEG

Is there a native Javascript module that allows creating / modifying EXIF and IPTC sections inside the JPEG file ?
Note: I already have the Exif data of the image that I am receiving from iPhone along with the image. Since he image does not include all the metadata in itself, I want to combine it and save it on my server.
I came across a one module in my search but that seems abandoned and it never implemented writing of EXIF.
https://github.com/logicalparadox/exifdata
Does anyone know of a pure Javascript module that I can use ?
I did find a C library "libexif" that can do the job. I have not tested it yet. I'm still trying to stay with Javascript.
Write exif data to jpg using libexif
Thanks in advance.
PiexifJS did the job for me. Runs on the browser and on node. No external dependencies.

What is best way to compress file and text "inside browser" before sending to server?

Actually I trying to upload large text and pdf files. I want to compress file chunks in browser only. So i can encrypt and send these lite chunk through ajax smoothly without hanging browser. I am seeking help related to file chunk compression. And at server side easily can decompress using java library. Can anyone suggest me best way to do it ?
It should be in client side and inside browser(IE11,Google Chrome).
Gzip is a popular method for compressing data before sending it over the web.
There are many javascript libraries, such as https://github.com/beatgammit/gzip-js which will compress a string/byte array for you.
Java has Gzip functionality built-in through java.util.zip.GZIPInputStream;; a simple google search will make it easy to learn how to use it.
There are several JS libs that can help you with that, if the zip format is acceptable. JSZip is one of the most well known ones.

Is is possible to increase the maximum upload size on wordpress?

Basicaly I'd like to find a way to increase the maximum upload size, I'm only talking about wordpress because it happens to be the platform Im working on but what I need is to find a way to go around php setting on the server as wordpress seems to use those setting as default.
Note that I'm only looking at uploading pictures, no other sort of files.
I have found several pages on google explaining either how to edit wordpress setting (in my case this is not something that would work), or changing the php setting on the server side, and I simply cannot do that.
I have thought of a few ways to reach this goal but don't know where to start as I'm not that good in picture processing. I was thinking about evaluating the picture size and dividing it into several files (is it something do-able in js ?), then upload them onto the server and assemble them from there in php (that I can do).
Can you tell me what you think about it ? I'm not asking anybody to do the work, i'm just looking for a hint or just for somebody to tell me where to start from in js or whatever other language I need to use on the front end.
Thanks a lot.
Yes, it is certainly possible to split a file via JS into chunks and to senk these ones individually.
Declare a file input field:
<input type="file" id="input">
Access the first file (there could be more if using the multiple attribute):
var selected_file = document.getElementById('input').files[0];
You now have a File object which also inherits the Blob interface. You can therefore call Blob.slice in order to split the data into chunks.
Upload those chunks via AJAX
Combine the chunks again on the server side
Further readings:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
https://developer.mozilla.org/en-US/docs/Web/API/File
https://developer.mozilla.org/en-US/docs/Web/API/Blob
The restriction is at the server level.
You MUST adjust your server configuration in order to trickle down to WordPress.
If you set WordPress configuration to a max of 40MB, and Apache (or other web server software) still has a 2MB limit, you won't ever be able to post more than 2MB.
One option would be to use a Flash-based upload tool which can perform some pre-processing to downsize the image before uploading.
If you really want to get fancy, you could develop your own Flash-based upload tool to chunk uploads into 2MB parts (or whatever your server's maximum post size is) and some server-side script to re-assemble the pieces, just like the internet does with packets.

Extracting jpeg EXIF information using jQuery

I'm trying to extract EXIF information from images using jQuery.
I've tried using a script I found here but I can't get it to read exif data from externally hosted image files. I've posted a simple example page here. The code is tiny so you can just view-source to see what I tried.
Does anyone know either what I'm doing wrong or if there there is another way to do it?
-Matt
The plugin works off requesting the image again via a binary XmlHttpRequest, something you just can't do on a remote domain due to the same-origin policy...the browser does a pretty good job of (by default) separating which domains interact with others, this is one of those cases (for security reasons).
Sorry the answer sucks, but I don't think you're not going to be able to do this on a remote image, on a domain you don't control.
You'll either have to proxy the images on the same hostname or get the external host to send appropriate access control headers to allow you to request data on their site through JavaScript.
I always wondered how people seem to think anything could be done with javascript.
Given a remote image, isn't it obvious you could(should) download the image on the server and do the special processing there?
Also, what makes you think jQuery can do things javascript doesn't?
What you are looking for is, at it's best, something that needs to be supported in plain javascript.
Really, parsing a remote binary file locally? Sure it's a nice hack, but why not settle for the real/pro solution, make the server parse the image?
Rant aside, the JS lib cannot work on remote files, and this can't be ever done with plain JS.
You should be downloading the file on your server and parsing it from there.

Pure Javascript image handling library (in binary form, not through DOM)

Since File API will enable access to the content of local files it is now possible to do image resize before upload (a fairly common task) without any additional technology like Flash or Silverlight. Except that I can't find any Javascript library that would be able to handle images in binary form. Is there any? Maybe there is some in Flashe's ECMA script that could be adapted, but I simply can't find anything.
Although I haven't find such libs, I have found a way how to accomplish the described task:
Read image as Data URL
Load an image into a canvas tag and resize it
Encode canvas image data into some image format, for example JPG. Or use Canvas.toDataUrl() and then (optionaly) some base64 decoder.
Client side image resizing and upload with pure javascript. That's cool, isn't it?
Even if you do find something that understands images in pure javascript, you would still need the DOM to render it, making it incredibly slow.
Don't know if this is what you want, but there are some scripts on Userscripts.org that handle images: http://userscripts.org/scripts/show/38736
One problem with calavera.info's answer (sorry I cannot seem to comment directly on that answer) is that the call to either CanvasRenderingContext2D.getImageData or Canvas.toDataURL mentioned in the third bullet will fail. They each throw a SECURITY_ERR: DOM Exception 18 as the image is not from the same origin or domain as the document that owns the canvas element. That seems inevitable since the image comes from the local file system (via an input type="file" tag), but the page comes from your web server.

Categories