We Keep Coding

Changing Profile Picture, and then Saving new one

I am writing a program that has a profile page and I want to be able to switch the profile picture. I am able to change it but I am not sure how to go about saving the new picture from the files.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-container">
<image id="profileImage" src="https://t3.ftcdn.net/jpg/03/46/83/96/360_F_346839683_6nAPzbhpSkIpb8pmAwufkC7c5eD7wYws.jpg" />
</div>
<input id="imageUpload" type="file" name="profile_photo" placeholder="Photo" required="" capture>
<script>
$("#profileImage").click(function(e) {
$("#imageUpload").click();
});
function fasterPreview( uploader ) {
if ( uploader.files && uploader.files[0] ){
$('#profileImage').attr('src',
window.URL.createObjectURL(uploader.files[0]) );
}
}
$("#imageUpload").change(function(){
fasterPreview( this );
});
</script>
This is my code to change the picture, but I don't know how to save the new one. Every time I refresh the page, the picture goes back to the default.

If using local storage is an option, I think it would solve your issue. I am not very comfortable in jquery but I think you are trying to change the src attribute if a new image is provided.
You could initially store the path to the image in local storage.
localstorage.setItem('imgPath', 'https://path-to-image-here');
Then, when a new image is uploaded, just change the path in local storage. You can show this image in your profile like this:
localstorage.getItem('imgPath');

Sails.js file upload - destroying req.body and .upload() callback executing before upload is actually complete

I am building a website using Sails, a page of which contains a form. This form has multiple text inputs, and a file upload input for the user to upload an image. The information from all text inputs are stored in a Postgres database, and the image is uploaded using the .upload() function described in the sails docs here and converted to a data uri which is then stored in the same Postgres database and used to display the image on the site.
The file input is the third to last input on the page, and I noticed that two things were happening:
1) The text in the two inputs after the file input was not being passed through to the controller as part of req.body, as form inputs normally are.
2) No data uri was stored in the database for some images.
I created a new basic sails app with a form that allows you to upload an image and exactly the same thing happens here.
Upon testing I discovered that small images work fine, while larger images do not. The 'small' image I used was 66kb, while another 800kb image produced the same effects mentioned above.
The new sails app, in the callback to the .upload() function, res.views another page that simply displays the uploaded image. With the 800kb image and larger images, by the time the page was rendered, instead of displaying the uploaded image, it displayed a broken image. In the chrome dev console it gave a 404 error for the image link, but if I add a query to the end of the image url (i.e. make chrome think it's a different url so reload the same image), the image displays fine. From this I am guessing that the .upload() callback is being called before the image is actually finished uploading, and by the time I have reloaded the image it has finished uploading.
I can see in the request headers that the inputs after the file input are being sent, but doing console.log(req.body) in the controller only logs out the inputs placed before the file input in the form.
I am using sails v0.11.0, and the code I am using is as follows:
HTML form (index.ejs)
<h1>Image Upload Test</h1>
<form method="post" enctype="multipart/form-data" action="/submit">
<div>
<input type="text" name="firstInput">
</div>
<div>
<input type="file" name="image">
</div>
<div>
<input type="text" name="imageUploaded" value="false">
</div>
<div>
<input type="hidden" name="test" value="hello!">
</div>
<button type="submit">Upload</button>
<script type="text/javascript">
$('input:file').change(function() {
$('input[name=imageUploaded]').val('true')
});
</script>
</form>
config/routes.js
module.exports.routes = {
'/': 'ImageController.show',
'/submit': 'ImageController.create'
The controller (ImageController.js)
module.exports = {
show: function(req, res) {
res.view('index.ejs');
},
create: function(req, res) {
var fileName = 'image' + Date.now() + '.jpg';
req.file('image')
.upload({saveAs: __dirname + '/../../assets/images/' + fileName}, function(err, uploadedFiles) {
if (err) return res.serverError(err);
console.log('file uploaded');
console.log();
console.log(req.body);
res.view('uploadedImage', {fileName: fileName});
});
}
};
The page to display the uploaded image (uploadedImage.ejs)
<%if (typeof(fileName) !== 'undefined') {%>
<a href="/">
<img src="/images/<%=fileName%>" style="width:100%; height:100%;">
</a>
<%}%>
Can anyone explain why this is happening and help me to fix it?
Thanks

As per sails file upload documentation, All the text fields must be uploaded before file field, otherwise they dont get passed to action.
Sails documentation File Upload sails

Angularjs download image and display

I'm trying to download an image with Angularjs and then save it to mongodb and display it in the future.
First I just try to download image binary and display it and it doesn't work.
$scope.downloadProfileImage = function()
{
//Getting the user that logged in through facebook
$authentication.getUserInfoWithoutLocation(function(respone)
{
//getting the url for the profile picture from facebook
FB.api('/'+respone.id+'/picture',function(respone)
{
//the response hold the url of the profile picutre..trying to download it
$http.get(respone.data.url).success(function(success)
{
//success is the image binary,encoding it to base64 and bound to it
$scope.img = Base64.encode(success)
})
})
})
}
in the html I just have <img ng-src="{{img}}"/>.
this doesn't work.. why?
even if I remove the base64 encoding and bind $scope.img to success it still does now show the image..
please help me.
Thanks!.

In order to display an image encoded in base64 it has to be in following form:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
So you probably have to add data:image/png;base64, in front of your $scope.img. Of course it depends what your image format is (png, jpeg, gif).

Can you just use the URL in ngSrc?
FB.api('/'+respone.id+'/picture',function(respone)
{
$scope.imgSrc = respone.data.url;
});
View
<img ng-src="{{ imgSrc }}" />

First of all check whether the image is successfully encoded into base64 or not. I think so. Now before displaying it just add this "data:image/png;base64," to the base64 string.
Here is the sample
In angularjs file
$scope.picValue="data:image/png;base64,"+base64String;
In html page
<img ng-src="{{picValue}}" />

Data URI not found in img src tag

So I'm using this library
https://github.com/jhuckaby/webcamjs
I get a data uri for the web cam image and I pass it into a template like this
this.$el.append(this.template.render({
imageUri: imageUri
}));
Where the template looks like -
<img src=<%= imageUri.imageUri %>/>
When I console log the imageUri, it is clickable in the console and when I click on it, I see the image in the browser.
However, I get an error with the template like this -
GET (imageUri) net::ERR_INVALID_URL
Why is it suddenly invalid in the img src, but not when I click on it in console?

What are the <%, is that webforms syntax? If so, you need quotes:
<img src='<%= imageUri.imageUri %>'/>
The source needs to be in quotes when it is rendered.

Get a local file from plugin to javascript

I have developped a brower plugin that Acquire a picture from a Scanner or a Camera and save the picture in the file system of the user.
The output is the filepath to the picture.
I want to preview the picture in the Broswer, using javascript...
How can I get the picture without user interaction ?
( part of a Web App only compatible with Google Chrome)

If you have the filepath returned by your browser plugin and you have identified the event when you have to display the image then you can call ShowImage(filepath) function on that event.
<script type="text/javascript">
function ShowImage(filePath) {
$("#preview").append("<img alt='img' src='" + filePath + "'");
}
</script>
Your HTML should contain the div:
<div id="preview"></div>

If you have the contents of the image already you can load them in directly, by base64 encoding it and providing an URL as follows:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />