I have been struggling with this for a while and I am going to provide you with as much information as possible (some maybe irrelevant) because I am completely stuck. I am using Ionic and I would like to be able to take a picture with my phone and upload it to an AWS S3 bucket. I used Cordova camera to accomplish this.
As far as I know; these pictures come out in a large base64 string and I have to convert it to a Blob, convert it to a File object then upload that file object into AWS. However, when I do this it always uploads it as something other than an image. Whenever I open it I get an error saying:
"Not a valid bitmap file. its format is not currently supported."
https://s3.amazonaws.com/mng-moment/moment/PA/40.008446_-75.26046_1502414224619.jpg
Here is an example of a WORKING one (This used to work it somehow broke):
https://s3.amazonaws.com/mng-moment/bestMoments/40.008446_-75.26046_1499659199473.jpg
I tried to open each one in a text editor to see what is going on. For the first one (The broken one) I get this:
When I try to open the working one in a text editor I get this:
Now it seems like a conversion problem but I think I am converting it correctly.
Here is the code I am using to upload (You can see the console.logs later on the post):
core.js
awsServices.js
If you look at the comments in the code I labeled some of the console logs. I will display them here for more information:
A - (uploadToAWS):
B - (awsServices.upload):
This is how I convert the dataURI to a Blob (Called in uplpoadToAWS - The first screenshot):
This is what gets passed into the 'dataURI' parameter in the code right above:
If there is any more information please let me know. I've been scratching my head at this for a while. Any help is appreciated. Thanks!
As stated in MDN File API:
A File object is a specific kind of a Blob, and can be used in any context that a Blob can. In particular, FileReader, URL.createObjectURL(), createImageBitmap(), and XMLHttpRequest.send() accept both Blobs and Files.
So, i think your problem reside in your uploadToAws function because you first create a Blob and then use the Blob to create a File, when I think you simply should initialize the File object with the byte array returned by dataURItoBlob since the File object is in fact already a Blob object.
Related
I'm using PDFMake to generate some PDF reports on client side.
When I specify the definition for document and pass it to createPdf(DEFINITION_HERE) I get my PDF and it looks nice and shiny. But I'm saving it in the DB as Base64 encoded string and when I try to reopen it with data URI (ie: data:application/pdf;base64,JVBER...) the document is completely malformed.
My DB call looks like this:
await pdfFile.getDataUrl(async (result: string) => {
await myServiceLayer.generatePdfReport(result, fileName, creator);
});
Anyone else had this issue with PDFMake library? Any ideas on what could be the cause of this?
OK, so after trying different things and debugging left and right, I stumbled upon this:
https://github.com/bpampuch/pdfmake/issues/318
So I removed call to .download() on my PDF file and checked for Base64 again, now it had correct value and file looks as it should.
So in a nutshell, if we call multiple methods on PDFMake, usually something will get messed up.
I had my .download() call just before my .getBase64() as I wanted to first download the file for the user and then also store it in DB as Base64, as .download() happened .getBase64() kept on giving me Base64 output which resulted in malformed PDF file.
In the official documentation and many other solutions posted online, the following code is supposed to be the way of writing data to a file in Cordova
function writeFile(fileEntry, dataObj) {
fileEntry.createWriter(function (fileWriter) {
fileWriter.write(dataObj);
});
}
writeFile(someFileEntry, blob);
In the documentation, they explicitly shown that a blob can be passed as the "dataObj", but whenever I passed a blob as "dataObj", the resulting file only has 2 bytes of data. After inspecting the file, I found that the contents of the file only contain a single string
{}
hence the 2 bytes.
I've tried passing a string as the "dataObj", and the contents of the resulting file was the exact same string, so string works I guess? But the data I'm wishing to write to a file is a blob that contains video data recorded from a canvas, so either I'll have to
somehow convert the the video blob into a string and write the string into the file
somehow fix the "fileWriter.write" function
But I've gone nowhere with these solutions. I've tried "blob.text()" or using a "fileReader" to get the contents of the blob as a string, but the resulting file is always broken. And fixing the "fileWriter.write" function is way out of my depth. Can someone help me out on this?
I am having the same issue. I think it might have something to do with the following as stated on the cordova-plugin-file docs:
But I find that odd since the examples all use FileWriter.write(blob) but it says that the platforms do not support that function.
I'm Developing a WordPress plugin for customers to design custom T-Shirts, with the option of uploading their own images. The plugin takes several screenshots and emails them to a print department.
In Javascript I convert the screenshots to base64 data, which is then sent via Ajax to a PHP file, this creates a folder for the customer's design, creates the images from the data and stores the screenshots in there.
Most screenshots/base64 data send across just fine, for example just adding in text creates no problems. However if the user uploads an image and it's scaled up too much it causes various errors (sometimes 400 error, sometimes 404 and sometimes 500).
Running this through my local setup on Windows with Wamp, it's fine. I can upload images and scale them to 12x with no issues. However when I try this with the live site, I get the above problems if I scale any of the images past 4x, and with most images this happens if I even try to scale them up at all past 1x.
The resolution/file size of the image seems to have an effect, though not in an obvious way. I can send a huge plain red square, or normal image at 1x scale.
At first I thought this was a POST data limit issue, except the live site's POST limit is double that what I had set on my WAMP setup, which doesn't have this problem.
Also, and even stranger. I tested uploading the image but replacing the base64 data with simple characters (so the scaled up image exists in the page but it's base64 data isn't sent via POST), and I still have the same issue. So I don't think it's a simple POST limit issue.
Cannot for the life of me find a solution to this, any help would be hugely appreciated.
Figured a way round it, I'll give my solution in case anyone else has the same issue and comes across this post.
Basically I converted my base64 image data to a blob, and appended that to a newly created formData object. I found that also appending my nonce and action (amended to work with the admin-ajax way of using AJAX) to the formData helped deal with most issues on the javascript side. In the AJAX request I set processData and contentType to false.
As for the PHP side, I set a variable equal to the specific $_FILES array element I just sent. I used file_get_contents() on that variable (i.e the blob data), and wrapped that in file_put_contents() to actually write the image.
That's the quick version. If anyone wants a more detailed explanation let me know.
I am using a library called Croppie.js that crops images. What I am trying to do is :
Upload a picture thanks to an input type=file that only accepts image files
Edit it thanks to Croppie.js methods
Put the generated image back into the file input, replacing the original image
Croppie.js is able to generate a blob thanks to its function result. Therefore here is what it would look like :
$("#confirm-photo-edit").click(function(){
$("#photo-to-crop").croppie('result', 'blob').then(function(editedImg){
// Here something like $("#photo-input").files.push(editedImg);
});
});
Thus my questions are :
Do I have to convert from Blob to File ?
How do I replace the original image that's in the input by the edited one, editedImg ?
Thanks.
This is not possible the access the file itself of an input with the type file in most browsers. This is because of security reasons. However it is possible do store your file as a character based string representation. For Example a base64 string. Almost every programming environment has something to decode base64 too.
I am new to jsp and s3 . I am trying to solve a problem which is:
I need to save some media file say some kind of Images on s3 which I am doing by using s3client.putObject function of AmazonS3. From here I am getting the url of s3.
url is like https://abc.s3.amazonaws.com/18463/doc/xyz_1.jpg.
From some other part of project now I need to get the object and render it to browser. I am not able to solve this issue. How will I get the s3Object and render it in the form of Image.
I have tried to solve it by using StreamingOutput . I am getting the inputstream. but it is something which is weird. generally when the base64 format of image stream is appended with <img src="data:image/jpeg;base64,'+ escape(result)> it converts into the image format. but this is not happening in this scenario.
I am totally clueless how can I achieve the solution.
Any help will be highly appreciated.