We Keep Coding

Saving user uploaded image to folder and/or server

I have an app, that allows users to upload an image, crop it and with other data save it all as html file to be used as a footer for emails. The image is given to them as base64.
Howver turns out this is not supported by Outlook, since it doesnt accept b64 data as img source.
So my idea was to save the cropped image to a file, let's say /public/avatars/avatar.png and link it's directory as a source. However I'm having trouble finding a way how to save images to to a file using JS. My allowed stack is JS and React, no node.js.
How would I do that? I can have the file as either b64 ot canvas element, so i'm flexible here, as long as it's saved to file.
I'm open to other solutions too.

You can't save a file with client language only. You have to save it to a server, own server or external server or a service like AWS.
The best solution without server-side (strangly) is to use a API for save image and get link from this API. Then you can use this link to Outlook.
You can use https://aws.amazon.com/fr/cloudfront/ free for one year with 50Go and 2 millon request monthly.
If you do not exceed 300,000 images per year you can use this service : https://cloudinary.com/pricing
You can also use https://www.deviantart.com/developers/ but that's not really the point of service.
Weird solution :
Be careful, the login and password of your FTP user will be available in the source of your code. Minimum rights must be administered.
You can use this script for talk to FTP server from JS (not tested but seems worked) : http://www.petertorpey.com/files/ae/scripts/FTPConnection.jsx
You can try something like that :
var ftp = new FtpConnection("ftp://URL") ;
ftp.login("username", "password");
ftp.cd("FOLDER") // For move to folder
ftp.put(file,"FILE.PNG") ; // File must be a File JS Object
ftp.close() ;

Custom Upload Images using CKEditor, BLOB field and Rails 4

I'm currently using CKEditor in my site. The user may upload some images to the server using the button for Upload Image in the CKEditor.
There is a textarea field with id #article_conteudo on the page that uses the CKEditor, here is the javascript code to configure the editor:
CKEDITOR.replace('article_conteudo', {
filebrowserImageUploadUrl: '/article/upload/'
});
The URL /article/upload/ points to a method file_upload in an articles_controller:
def file_upload
image = ArticlesImage.new
image.imagem = params[:upload].read
image.save
end
The images are stored in a BLOB field in a MySQL Database.
The images are saved in the database with no problems. But, after saving, nothing happens in the Editor. I'm not sure what is the expected response for the Upload Action of the CKEditor on this case. I'm not sure, also, if CKEditor uploads support the use of BLOBs.
How can I implement this functionality in my project?
If it can't be done with CKEditor, is there any other plugin that can do it?
Thanks for your help
PS: The use of BLOB is MANDATORY for the project, I cannot use other methods

it depends of what you need.
If you want to display images on your browser, you have to create the JSON response involved.
And then, the fileUploadResponse of the CKEditor would be able to display your images (or files) on your editor.

How to save an image converted from a canvas, on the computer, in a user-friendly manner?

I'm using Nihilogic's library Canvas2Image to convert canvas drawings to PNG, and to give the users of my application the possibility to download that image.
What I need is to be able to give the downloadable file a name and the png extension (e.g. "goalboard.png") and not have it download just as an octet stream with no recognizable extension and the name "download", because the average Joe won't know what to do with such a file. And I need to do this on the client-side, because sending that byte stream to the server, depending on the quantity of data in it, can take up to 20 seconds (it's a big canvas!). Not to mention retrieving the image afterward...
So, how do I do this?

One of these should solve your problem (with canvas you can extract the image in base64 format):
Using HTML5/Javascript to generate and save a file
Reading a local file, encoding to base64, I would like to give the user an option to save the result to file

I had a big RaphaelJs canvas too and needed to allow the user to run a script that would save lots of canvas as png images.
I tried to transform my raphael into an svn, then my svg to a png and then using wget but that of course didn't work because my canvas where generated by javascript and wget can't deal with that. In the end I realised that I could just have my webapp to build a page with just the svg canvas and use phantomjs ( a headless browser) to save it as a png. It works briliantly.
It is as simple as that.
1. Make your webapp to build a page with just the svg canvas.
2. Create a svgToPgn.js file with the following code :
var page = require('webpage').create();
page.open('URL_TO_YOUR_HTML_PAGE', function() {
page.render('PATH_TO_PNG/example.png');
phantom.exit();
});
3. Download Phantom (http://phantomjs.org), unzip it and in the bin directory you will find the phantomjs executable. Run :
./phantomjs svgToPgn.js
Your png file will be saved in : PATH_TO_PNG/example.png

And I need to do this on the client-side
Well that requirement kind of kills your chances. Sorry.
You can't do what you want to do, the best you've got is displaying the image and telling the user to right-click save-as.

Convert image from clipboard to base64 encoded data with JavaScript [duplicate]

Background:
I'm developing an HTML5 webapp for my company which is basically a Rich Text Editor (similar to Google Docs) that stores information in a database.
We are using CKEditor 3 as richtext editor and Jquery to acomplish this.
We've chosen Google's Chrome as the preferred browser.
Our app is currently in alpha testing period, having a group of 18 tester (which are the same ones that will use the app). These people is heterogeneous, but almost all of them of them have basic computer skills, mostly limited to MS Word and MS Excel.
.
Problem:
Most of our users still use word to elaborate the document, mainly due to its capacity of generating rich flowcharts. When they copy/paste the generated content to Chrome, images are pasted as link to a local file (auto generated by the OS, in a users/*/temp folder). This means the server can't access these files and the resulting documents (generated PDFs) don't contain the images.
.
Question
How can I force pasted images to be encoded in base64, similiar to what happens in Firefox?
.
Notes
If it's possible to "upload" to server an image referenced as src="file://c:\something", that would solve my problem as I can base64 encode that image later.
We can't switch to firefox since it doesn't fully solve our problem (if an image is "pasted" alongside with text, firefox doesn't base64 encode it) and raises other issues such as an horizontal scrollbar appearing when the text is too long to fit in the textarea.

Yes and no I believe.
It is possible to intercept the paste event and fetch the pasted image as a file, then use FileReader to read the file as a Data URI (base 64 encoded PNG).
However, Word seems to send a reference to a local file, which generates a security exception (at least on Chrome) because of a cross-domain request (http://... and file:///...). As far as I'm concerned there is no way to get the actual contents of such local files, and the contents are not sent as clipboard data itself.
If you copy a "pure" image (e.g. out of Paint), you can get the base 64 encoded data as follows: http://jsfiddle.net/pimvdb/zTAuR/. Or append the image as a base 64 encoded PNG in the div: http://jsfiddle.net/pimvdb/zTAuR/2/.
div.onpaste = function(e) {
var data = e.clipboardData.items[0].getAsFile();
var fr = new FileReader;
fr.onloadend = function() {
alert(fr.result.substring(0, 100)); // fr.result is all data
};
fr.readAsDataURL(data);
};

FileAPI doesn't update the files size when user makes file changes (non-webkit browsers)

I figure I'd demonstrate the problem with an example first,
jsfiddle: http://jsfiddle.net/e2UfM/15/
(Tested with FF 12, and Chrome 18.0.1025.168)
Usage:
Load in a text file from your local machine.
Hit "load file".
Hit "display file size" - note the size.
modify & save the text file on your local machine.
Hit "display file size" again. Note how in webkit browsers (Chrome) the file size changes, but in Firefox it didn't update the file size
Non-webkit browsers do not update their size attribute when users make changes to the local file that they have selected whereas Chrome for example does. Both browsers update the contents of the file.
Is there a way to get Firefox to update the file size similar to how Chrome does in this situation?
Simple Real World Example:
User selects a file that's too large for the form, they hit the submit button and get notified that their file is too large (via an alert, "size" bar (see below), etc)
They modify the file locally, and hit submit again.
In Chrome, the file size updates. When the user hits the submit button again, it will validate it's updated size once more and allow the upload. In Firefox, the user must re-select the file on the form before it will see the file size change.
A partial workaround for Firefox - #ZER0's answer
Real world example (in-depth):
One purpose of the File API is to verify file sizes on the client side before uploading to a server if I'm not mistaken.
Consider the scenario where there is a 2MB upload limit in a form and the user chooses a 1MB file. Both Firefox and Chrome will see that the file size is less than 2MB and add it to the form. Let's also say there is a neat bar that shows how big of a file they have chosen, and if it meats the file size limit or not:
But then the user decides to make a minor change to the contents of that file locally before they submit the form and bump the size over 2MB.
In Google Chrome, I can handle this gracefully on the client side. I can check the file size again when the user submits the form, and verify that it is still in fact under 1MB before sending it to the server. But even before the user submits the form, in Chrome, I can go as far as updating the little bar image dynamically as they make changes locally as such:
This "bar" (or any other form on instant notification such as an alert) is useful if the user is filling out a large form. I'd like the user to know instantly when their file is too large and so that they can correct it then, and not just when they submit the form.
In Firefox, because the file size never updates, it will gladly upload the 2MB file thinking that it is still 1MB! I use server side logic to double check the file size, but I'd rather save a server trip.
How I came across the bug:
The above examples are in place to relate to more people as more people have probably dealt with file uploads in forms vs. using the slice function in the File API. This is specifically how I am running into the issue.
In my form, the user selects a file and when they hit submit only the last 10,000 bytes are displayed on the screen in a textarea to confirm that it's really the file that they want.
Consider a file with a size of 50,000 bytes. A user chooses it in the form, and both Chrome and Firefox show bytes 40,000 - 50,000 in the textarea.
Now the user adds some content to the file, and bumps the same file to 70,000 bytes!
Google Chrome will properly update the textarea to contain bytes 60,000-70,000. In Firefox, because the size will remain constant, it will still only show bytes in the range 40,000-50,000.
Edit: Updated the jsfiddle to demonstrate that FF can still read the updated file contents. It's just that the file size does not change with those new contents.
Edit: https://bugzilla.mozilla.org/show_bug.cgi?id=756503 (bug report)
Edit: Examples have been added & updated in response to #Eduárd Moldován's comment & #ZER0's answer. Thanks!

It seems that you're get the size property from the directly, and because the value in this form element is not changed it's likely that Firefox doesn't update the size property as well.
As workaround, you can check the length of the content you have read. So instead of file.size have evt.target.result.length.
However, it's definitely a bug to me so you have done well to add it on Bugzilla!
Update:
You can still use the string version of slice. Otherwise, if you prefer (or the result is a particular type of data), you can create from evt.target.result a new Blob object (The File Object use this interface) where you can use both size property and slice method.