Image corrupted or truncated Phonegap - javascript

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.

Related

Error: 413 “Request Entity Too Large” Html + MVC WCF service

Basically, I created one page into HTML then i want to send two files XML & SVG. Both files are converted to text and then send to the WCF service in the MVC project. but it gives "Error: 413 “Request Entity Too Large”. I tried a small file & its works. but more than 200kb is not working well.
i tried to convert stream, but I had no luck. so I decided to convert it into string & pass it.
My HTML Page -
My WCF code -
also, i checked online solution for that but its already done.
ERROR -
If anyone knows, how to convert string to Stream in javascript, then tell me. I am able to accept stream value.
You can set the Maximum limit for receiving files in WCF like this:
WebServiceHost webServiceHost = new WebServiceHost(typeof(UploadService), uri);
WebHttpBinding binding = new WebHttpBinding();
binding.MaxReceivedMessageSize = Int32.MaxValue;
webServiceHost.AddServiceEndpoint(typeof(IUploadService), binding, "WebServiceHost");
webServiceHost.Open();
And you can try setting the upload size limit in HTML web.config.
I found the solution after spending 1-2 days. look into this url
https://cmatskas.com/upload-files-in-asp-net-mvc-with-javascript-and-c/

Loading buffer data from database as PDF

I have been developing a web app where the user can upload a PDF file, and then later retrieve it and view it. What I have been doing to achieve this is having the PDF uploaded to a PostgreSQL database as bytea datatype (the column is called "attachment"), and then having nodeJS offer up this data to be fetched back and turned back into a PDF to view.
However I have been struggling to convert the data back into a valid PDF. This is the method I am using so far.
var file = new Blob([res[i].attachment], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
document.getElementById("pdf_box").data = fileURL;
The #pdf_box identifier refers to an object element in a HTML file which is used to display the PDF (this has been shown to work when I provide the file location of a dummy PDF file to the data attribute of this element).
The res[i].attachment is also shown to provide valid buffer data in JSON format, with an example provided below:
"attachment":{"type":"Buffer","data":[91,111,98,106,101,99,116,32,70,105,108,101,93]}
When I load the created fileURL into the data attribute of #pdf_box however, I get an error indicating along the lines of an invalid PDF file. My research so far appears to indicate this may be because the data is coming in as buffer whereas it needs to be in byte form, but I haven't found much that helps show me how this may be achieved or if there is a way to convert between the forms with the data I have access to? I have also seen occasional reference to a method called pdf.create(), but I cannot find documentation on this and I assume it must belong to a third-party library for JS.
If you know of any information that can help me with understanding what my problem is and what to search to figure out a solution, it would all be greatly appreciated, thank you.
To all reading this question, this method does not seem possible and would likely be incredibly inefficient to implement. If you send a string to nodeJS larger than the MTU of your link to this server (anywhere between 68 bytes and >1500 bytes depending on every component of your network) the packet will be silently dropped with no attempts to resolve or throw an error. What you must do is take the approach of using "multipart/form-data" encoding to send any files to the server (more on this found here).
It should also be mentioned that uploading a file to the database is not recommended in any capacity (due to databases being quite inefficient storage for large amounts of data) and what should be done is to upload a reference to the file path or URL to find the file at. Then on the client-side this file could be rendered as such when you have retrieved the file location...
<object id="pdf" data="../files/test.pdf"></object>
To change the data attribute, the following can be done...
document.getElementById("pdf").data = "../files/test2.pdf";

How to Upload,display and save image in a database table using jQuery javascript

How to upload , display and save image in a database. jQuery JavaScript using API calls .
I have four fields in db
File I'd
Filename
Filesize
Filepath
I don't see any mention of server side languages such as PHP listed here, but you need some sort of server side implementation to upload an image and deal with the database.
Ill help you go in the right direction so you know what to look up and look for.
Uploading an image
To upload an image you would conventionally use a form element with an input of type file. The form action would be your php upload script. The upload script can be complex, but they tend to be the same once you get the hang of it. Take a look at this page: https://www.w3schools.com/php/php_file_upload.asp. It has a full php upload script.
Store in database
To 'store' the image in the database you just need to save the path to the image. This means you will need to setup your SQL database, and a table. Then use PHP's SQL database functions to INSERT the link into the table, along with your other data.
Display the image
To display the image you will need to use a php script to gain access to the database, and then use a specific ID to get the image path out of the table and output it to the page.
Conclusion
Uploading files is an age old problem, and is tough until you've done it a few times. In the comments i saw mention of dropzone.js, which is really great for handling the uploading of multiple images but it does not actually do the uploading, you still need to write some php. Dropzone is purely a front end tool.
Hope that helps you move in the right direction!

How to cache an image from URL before displaying it

Basically, this app should contain a collection of objects in a view showing a representative image of each object (i.e. a movie should show its poster).
Talking about movies, I am trying to use the IMDB APIs in order to retrieve the metadata for a certain movie title, including its poster. However, hotlinking won't let me display the images once their URLs are obtained from the APIs (I keep getting the "GET [...] 403 Forbidden" error...).
Since I am using the JSONStore feature in order to cache the data, I would like to know if there is a possibility to store those images in JSONStore and then display them like a normal browser would do. I am trying to do all this sort of things from the front-end side, not the back-end one, using AngularJS, HTML5 and JavaScript.
Do you have any suggestions for this kind of problems?
Thank you.
Suggested solution: What you'd need to do is to encode the images to base64 and this way you could store the binary image as a string inside your JSONStore collection.
When you then need to display it you will need to base64 decode the string back into an image and display it in your HTML

Store filepath/image locally on smartphone and upload later?

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.

Categories