I'm trying to create an image upload feature for a user profile update part of an Ionic/Angular application. The upload feature is part of the form and I am unable to retrieve the image and the filename. How would I get both items? Below is my code:
Form (View):
<div class="item-input">
<!--list item-->
<div data-ng-repeat="user in users">
Username: <input type="text" placeholder="Enter the event name" name="username" ng-model="user.username" required>
Password: <input type="password" placeholder="Enter the password" name="password" ng-model="user.password" required>
Email: <input type="text" placeholder="Enter the email" name="email" ng-model="user.email" required>
Hometown: <input type="text" placeholder="Enter your hometown" name="hometown" ng-model="user.hometown" required>
Firstname: <input type="text" name="firstname" ng-model="user.firstname" required>
Lastname: <input type="text" name="lastname" ng-model="user.lastname" required>
Birthday: <date-picker ng-model="user.birthday"></date-picker>
Image: <input type="file" name="file" ng-model="filename">
<button ng-click="upload(file)">Upload</button>
<button class="button button-block button-positive" ng-click="editprofile(user)">
Edit Account
</button>
<button class="button button-block button-positive" ng-click="deleteprofile()">
Delete Account
</button>
</div>
Controller
.controller('ProfileUpdateCtrl', function($http, $state, $http, $cordovaOauth, $stateParams, $rootScope, $scope, UserFac) {
//removed the working features to focus on the uploading part.
$scope.upload = function(file) {
var filename = $scope.file.name;
//need to know how to get the data of the image and save as formdata
}
});
I've created a sample uploading of image using angularjs. It retrieves the image and it's filename. I hope it may helps you.
HTML:
<div ng-app="test">
<div ng-controller="UploadCtrl">
Image:
<input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />
<img ng-src="{{ thumbnail.dataUrl }}" /> <!--Display the image -->
</div>
Controller:
angular.module('test', []);
angular.module('test') .controller('UploadCtrl', function($scope, $timeout) {
// Read the image using the file reader
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function(files) {
if (files != null) {
var file = files[0];
if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
$timeout(function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file); // convert the image to data url.
fileReader.onload = function(e) {
$timeout(function() {
$scope.thumbnail.dataUrl = e.target.result; // Retrieve the image.
});
}
});
}
}
};
});
JS Fiddle: https://jsfiddle.net/um8p6pd7/2/
Good luck!
You need to use $cordovaFileTransfer for uploading the file to the server.
Install the $cordovaFileTransfer plugin and then you will be able to upload file to the server and at the server side you need to make the path to get the file and save it on to the folder.
Related
I have a form where I am using dropzone.js for file upload. Now I am validating all the input fields. But i'm not able to validate the file before submission. If the file is uploaded, then the submission should work. Otherwise it should throw an error like - "please upload the file". How can i achieve this?
HTML code:
<form action="/action">
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" required>
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<textarea class="form-control" id="message" name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="form-row">
<div id="resume" class="dropzone form-control"></div>
</div>
<input type="submit" class="btn btn-primary mt-10" id="item-submit" value="submit">
</form>
Javascript :
<script type="text/javascript">
$(document).ready(function () {
$("div#resume").dropzone({ url: "/change-this-later" });
var dropzone3;
Dropzone.autoDiscover = false;
dropzone3 = new Dropzone('#resume', {
maxFiles: 1,
});
$('#item-submit').click(function(e) {
e.preventDefault();
e.stopPropagation();
if ($('form#resume').valid()) {};
});
});
</script>
You can add a callback event which is called if the upload is successful
//indicates file upload is complete and is successful
var uploaded = false;
$("div#resume").dropzone({
url: "/change-this-later",
success: function (file, response) {
uploaded = true;
}
});
//Check the value of 'uploaded' when validating rest of fields
So I come around this. Since I submit all my images and fields in the same button, I just acceded to the files array in side the dropzone and validate that it's lenght wasn't 0. $animalImage is my dropzone.
var validateImages = function (animal) {
if ($animalImage.files.length == 0) {
swal({
title: 'Advertencia',
type: 'info',
html: "Debe de guardar al menos una imágen",
showCloseButton: true,
focusConfirm: false
});
return false;
}
return animal;
};
Hope it helps, side note a submit trough ajax so I just used dropzone for the user experience.
I have managed to load the image on my page using HTML and JS but I can't seem to post the image to my MongoDB and it won't show on my 'home' page.
HTML:
<div class="container">
<h1 style="text-align: center">Post a New Guitar</h1>
<div class="col-md-6">
<form action="/guitars" method="POST">
<div class="input-group">
<label>Item Name</label>
<div class="input-group">
<input class="form-control" type="text" name="name" placeholder="Name">
</div>
<label>Upload Image</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Browse… <input type="file" id="imgInp">
</span>
</span>
<input type="text" class="form-control" readonly>
</div>
<img id="img-upload"/>
<div class="input-group">
<button class="btn btn-lg btn-primary btn-block">Submit!</button>
</div>
Go Back
</div>
JS:
$(document).ready( function() {
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
$('.btn-file :file').on('fileselect', function(event, label) {
var input = $(this).parents('.input-group').find(':text'),
log = label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img-upload').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
});
When submitting the form, I want it to display the image that has been uploaded using JS and for it to be 'saved' to my database.
What do you mean by "post the image to MongoDB"? You shouldn't be saving image in the database.
What you want to do is when you upload in image, store it in a publicly accessible location in your server. What you save in the database is not the image itself but the location of the image on the server.
Image stored in the server:
/home/public/image.jpg
Image path stored in Mongo DB:
{
path: '/home/public/image.jpg'
}
When you go back to your html page, you just need to query the path of the image in Mongo DB and use that value as a source in your image tag.
`<img src="${path}" />`
I am trying to Update the data instead of adding (create) a new data when the image is changed (image is in base64)
I had also followed: http://jsfiddle.net/4Zeuk/12/ like what i tried to do below but i had tried my best at it but it update is not working. There are no errors.
Just for your information i am using ngCropper. https://github.com/koorgoo/ngCropper
EDIT: updated controller code
Angular code
app.controller("ProductAddCtrl", function($scope, $timeout, $resource, Product, Products, $location, Cropper) {
$scope.product = {item_name: '', price: '', category: ''}
var file, data;
$scope.saveImage = function(dataUrl) {
if (!file || !data) return;
if ($scope.product.currentImage){
Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
($scope.preview || ($scope.preview = {})).dataUrl = dataUrl;
Product.update({id: $scope.product.id }, {product: { item_name: $scope.product.item_name, category: $scope.product.category, price: $scope.product.price, item_image: dataUrl, filename: file.name}},function(){
// $location.path('/');
console.log($scope.product)
}, function(error) {
console.log(error)
});
});
} else {
Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
($scope.preview || ($scope.preview = {})).dataUrl = dataUrl;
Products.create({ product: { item_name: $scope.product.item_name, price: $scope.product.price, item_image: dataUrl, filename: file.name }}, function(){
// $location.path('/');
}, function(error){
console.log(error)
});
})
}
}
$scope.onChange = function() {
if ($scope.product.currentImage) {
$scope.product.item_image = $scope.product.currentImage.item_image;
$scope.product.filename = $scope.product.currentImage.filename;
} else {
$scope.product = {};
}
}
});
Angular Template file
<div class="content-push">
<input type="file" onchange="angular.element(this).scope().onFile(this.files[0])" ng-class="{'has-error' : productForm.item_image.$invalid}" ng-model="product.currentImage" ng-change="onChange" required>
<br />
<div ng-if="dataUrl" class="img-container">
<img ng-if="dataUrl" ng-src="{{dataUrl}}" width="300" height="300"
ng-cropper
ng-cropper-proxy="cropperProxy"
ng-cropper-show="showEvent"
ng-cropper-hide="hideEvent"
ng-cropper-options="options">
</div>
<br />
<button ng-click="preview()" class="btn btn-success">Show preview</button>
<button ng-click="zoomin()" class="btn btn-default">Zoom In</button>
<button ng-click="zoomout()" class="btn btn-default">Zoom Out</button>
<!-- <button ng-click="saveImage()" class="btn btn-default">Save</button> -->
<input type="submit" value="{{ product.currentImage.item_image ? 'Update' : 'Save' }}", class="btn btn-default" ng-click="saveImage()">
<div class="preview-container">
<img ng-if="preview.dataUrl" ng-src="{{preview.dataUrl}}" width="100" height: "100">
</div>
<select name="sellCategory" class="form-control" id="sellCategory" ng-model="product.category" required>
<option ng-repeat="option in categories.availableCategories" value="{{option.category}}">{{option.name}}</option>
</select>
<input type="text" ng-model="product.item_name" class="form-control" placeholder="Item Name" required>
<input type="text" ng-model="product.price" class="form-control" placeholder="Item Price" required>
</div>
I grasped the concept wrong.
Let's say i have multiple file upload feature in, instead of configuring angularjs to upload file one by one (via PUT request), i would select each file in base64 format (for preview) and then input the fields (like price, category and name of item) on the client side in angularjs instead of POSTing the PUTting each and every data.
So after everything on client side is set with image preview (i intend to have four) and data, then i would save (POST) it to the backend instead.
Thanks to everyone who looked at my question.
I'm using angularjs frontend and Play framework backend to process posted data.
The challenge i'm facing is that the form is not resetting after successful posting of data I click submit.
My View is as below and is as below.
<form name="signupForm" ng-submit="signup()" novalidate>
<div>
<label for="email">Email</label>
<input name="email" class="form-control" type="email" id="email" placeholder="Email"
ng-model="email">
</div>
<div>
<label for="password">Password</label>
<input name="password" class="form-control" type="password" id="password"
placeholder="Password" ng-model="password">
</div>
<button type="submit" class="btn btn-primary">Sign up!</button>
</form>
My Angular controller is as below
angular.module('clientApp')
.controller('SignupCtrl', function ($scope, $http, $log) {
$scope.signup = function() {
var payload = {
email : $scope.email,
password : $scope.password
};
$http.post('app/signup', payload)
.success(function(data) {
$log.debug(data);
});
};
});
I'm using chrome browser. How do i get to clear the email and password fields after clicking submit?
Set the $scope.email and $scope.password to null like
$http.post('app/signup', payload)
.success(function(data) {
$log.debug(data);
$scope.email = null;
$scope.password = null;
$scope.signupForm.$setPristine(); //Set form to pristine mode
});
what am trying to do is to get data from the form use it in my controller in HTTP post call but it's not working
I know i might have problem with inheritance of scopes but icant solve it.
here is my controller code:
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.submit = function() {
var url = 'http://localhost:3000/register';
var user = {
email: $scope.email,
password: $scope.password,
};
console.log($scope.user);
$http.post(url, user)
.success(function(res){
console.log('You are now Registered');
//$state.go('app.items');
})
.error(function(err){
console.log('Could not register');
// $state.go('error');
});
};
})
Here is the code of my Template:
<form name="register">
<div class="list">
<label class="item item-input no-border">
<input name="fullname" type="text" ng-model="fullname" placeholder="Full Name" required="">
</label>
<label class="item item-input">
<input name="email" type="email" ng-model="user.email" placeholder="Email" required="">
</label>
<p class="blue-font" ng-show="register.email.$dirty && register.email.$invalid">Please Write valid Email.</p>
<label class="item item-input">
<input name="password" type="password" ng-model="user.password" placeholder="Password" required="">
</label>
<button ng-click="submit();" ng-disabled="register.$invalid" type="submit" class="button signup-btn sharb-border white-font blue-bg-alt border-blue-alt ">
Sign Up
</button>
</div>
</form>
Note: i tried the ng-submit its not really the problem
Inside the controller.
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.user = {
email: '',
password: ''
};
$scope.submit = function() {
And this
var user = {
email: $scope.user.email,
password: $scope.user.password
};
Also drop the ; in ng-click
<button ng-click="submit()" ...>
Try to use rootScope (docs.angularjs.org/$rootScope").