I am created a Laravel application to upload data with image.I am successfully done this task using following way in AngularJs
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
app.controller('rowController', function($scope,$http,$modal,Row){
$scope.saveItem=function(){
var fd = new FormData();
//fd.append('photo', $scope.myFile);
for(var key in $scope.newrow)
fd.append(key,$scope.newrow[key]);
$http.post('/api/row_material', fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data,status,headers,config){
console.log(data);
}).error(function(data,status,headers,config){
console.log(data);
});
}
}
Above POST method successfully worked for me.Now I need to update data with image using $http.put() method.I am created a method as listed below;
$scope.updateItem=function(){
var fd = new FormData();
for(var key in $scope.newrow)
fd.append(key,$scope.newrow[key]);
var uri='api/row_material/1';
$http.put(uri,fd,{headers: '{"Content-Type": undefined}'} )
.success(function (data, status, headers, config) {
alert('Updated Successfully.');
})
.error(function (data, status, header, config) {
alert('Server error');
console.log(data);
});
}
But above put method causes an error given below;
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex,nofollow" />
<style>
/* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
html { background: #eee[…]
Above put method work with out using FormDate() using following way.But Image not uploaded to server
$scope.updateItem=function(){
var uri='api/row_material/1';
$http.put(uri,$scope.newrow,{headers: '{"Content-Type": undefined}'} )
.success(function (data, status, headers, config) {
alert('Updated Successfully.');
})
.error(function (data, status, header, config) {
alert('Server error');
console.log(data);
});
}
I need your help to update data with image using FormData put method in AngularJS
I would suggest you to use ng file upload plugin. I'm not sure what you are using on the backend but this plugin will help you to send file that is selected from input tag with your data. Check all their demo to get a clear idea.
https://github.com/danialfarid/ng-file-upload
Thanks.
There are several good approaches for this..
One of them is the one given below..
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
<div ng-app = "myApp" ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
This would do for the client side. Now for the server side, you need to write a script that can handle the uploaded image correctly and place it on the destination where you intend to..
This piece from the PHP documentation discusses the PUT method and file uploads (multipart/form-data).
I can't quote any parts from it because I think everything is important. You should read it in detail but to summarize it's not possible without changes to your Apache configuration and creation of auxiliary scripts.
With Laravel you should use [Form Method Spoofing][2] (basically a variable called _method) and keep on using POST. The _method will allow you to call Laravel's PUT action correctly.
Related
Our team is developing in ServiceNow and created a table widget that needs the ability to upload files per row. Our code for the file upload consist of the following code:
In our controller, we have the following:
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
We also created a dependency called fileUpload:
var myApp = angular.module('myApp', []);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
};
}]);
Finally, we have an angular provider called fileModel:
function fileModel($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files);
});
});
}
};
}
The issue we're running into is when we contain the following within <td> tags:
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload me</button>
When the above code is out side of the <td> tags, we are able to view the attached files in our console:
Once the <input> is contained within <td>, myFile does not exist in the console. What do we need to do in order for each row of our table to have its own attachments? This is what our table looks like:
I have form having text field and file type. I want to send this to controller using form bean. here is my code.following is my js file. from where I'm sending multipart file.
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function (file, uploadUrl, uploadform) {
var fd = new FormData();
fd.append('file', file);
fd.append("jsondata", JSON.stringify(uploadform));
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function () {
})
.error(function () {
});
}
}]);
myApp.controller('myFileUpload', ['$scope', 'fileUpload', function ($scope, fileUpload) {
$scope.uploadFile = function () {
var file = $scope.myFile;
$scope.uploadform = {};
var uploadUrl = "navigation/uploadexcel";
fileUpload.uploadFileToUrl(file, uploadUrl, $scope.uploadform);
};
}]);
and my controller is..I want to map multipart file and textbox value into firmbean first and from that I want to get my file for further process.
#RequestMapping(value = "/uploadexcel", method = RequestMethod.POST)
public #ResponseBody
String upload(#RequestBody EmployeeFormBean fb) {
String res = null;
try {
MultipartFile f = fb.getFile();
System.out.println("-->"+ f.getOriginalFilename());
} catch (Exception e) {
e.printStackTrace();
}
return res;
}
my jsp code is as following
<div style="background-color: blanchedalmond">
<div ng-controller = "myFileUpload">
<input type="file" file-model="myFile"/>
<input type="text" name="template" ng-model="uploadform.templateName"/>
<button ng-click="uploadFile()">upload me</button>
</div>
</div>
but m getting error as follow...
415 Unsupported Media Type
59ms
angular...DF52B9C (line 103)
HeadersPostResponseHTMLCookies
"NetworkError: 415 Unsupported Media Type - http://localhost:8080/crmdemo1/navigation/uploadexcel"
how to resolve this issue. I dont want to do it by #resuestparam("file")
is it possible to do this using formbean.. and if yes please tell me how can I do it?
You have a problem in the content type of your request, try to add headers = "content-type=multipart/*" , consumes = "application/json" to #RequestMapping. Beside that (in your service fileUpload) change the headers: {'Content-Type': undefined} to headers: {'Content-Type': application/json}. Hope this will help you
I use angularJS directive to get file to upload and I use the directive like this way:
<input type="file" file-model="myFile">
The directive looks like this:
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUploadService', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
console.log('file upload successful');
})
.error(function() {
console.log('file upload error');
});
}
}]);
In controller:
$scope.uploadFile = function() {
var file = $scope.myFile;
if (typeof file != 'undefined' && file != null) {
console.log('file is ' + file);
console.dir(file);
var uploadUrl = "/upload";
fileUpload.uploadFileToUrl(file, uploadUrl);
}
};
The upload works fine. I would have two questions concerning improvements of this upload:
how to upload more than one file - is there a possibility to upload more than one file with this directive
if file was uploaded - how to
how to upload more than one file - is there a possibility to upload more than one file with this directive
You must set multipleon your input field to be able to select multiple files. Then, your file variable will be an array of several files(if several files were chosen) instead of just a File object.
if file was uploaded - how to
... ?
I followed this tutorial to image upload for ionic app.
https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
It works but I have one issue: in the file upload, I am returning the new filename from the server. I have to save it to a variable in the controller. I can't save the value from services to controller.
Here is my controller, services and views
Directive & Service
.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}])
.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data){
alert(data);
})
.error(function(){
});
}
}])
Controller
.controller('MyCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadBtn1 = false;
$scope.uploadSpin1 = true;
$scope.uploadFile = function(){
var file = $scope.myFile;
$scope.uploadBtn1 = true;
$scope.uploadSpin1 = false;
console.log('file is ' + JSON.stringify(file));
var uploadUrl = "http://example.com/app/upload.php";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
HTML
<input type="file" file-model="myFile"/>
<button type="button" ng-click="uploadFile()"
ng-hide="uploadBtn1" class="ng-hide">upload me</button>
<ion-spinner icon="ios-small" ng-hide="uploadSpin1" class="ng-hide"></ion-spinner>
I also added the loading spinner when the upload starts and I want to hide it when the upload ends.
Thanks
I have made a few changes to the example in question. The service is now implemented as a factory which returns a promise.
You can then wait in your controller for the promise to return and then handle the data in your controller.
codepen example
var uploadFile = fileUpload.uploadFileToUrl(file, uploadUrl);
uploadFile.error(function(data){
alert('data returned - handle me', data);
});
In my example, I have changed the returned data to a string and passed this back to the controller which then alerts the user of this data.
I used the AngularJS example provided in http://jsfiddle.net/JeJenny/ZG9re/ to upload a file from the local machine.
I work with angularJS(frontend) and symfony2(backend),and I have to send an email attachement(as a rest web service) but I have a problem,I didn't get any email attachment,this is the error that I get in the console:
this is my code:
<div ng-controller="MailNewCtrl1">
<input type="file" nv-file-select="" id="id_file" uploader="uploader" file-model="myFile" >
<button id="id_submit" class="btn btn-info w-xs" ng-click='usersend();'>send</button></div>
and this the controller:
'use strict';
angular.module('app', [
'ngAnimate',
'ngCookies',
'ngResource'
])
.controller('MailNewCtrl1', ['$scope', '$http' ,'fileUpload' , function($scope,$http,fileUpload) {
$scope.errors = [];
$scope.msgs = [];
$scope.usersend = function() {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
var file = $scope.myFile;
console.log('file is ' + JSON.stringify(file));
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
$http({method: 'POST', url: 'theURLsendMail?myFile='+file}).success(function(data, status, headers, config){
if (data.msg != '')
{
$scope.msgs.push(data.msg);
alert("sucess send");
}
else
{
$scope.errors.push(data.error);
}
}).error(function(data, status) { // called asynchronously if an error occurs
// or server returns response with an error status.
$scope.errors.push(status);
});
}
}]);
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
app.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
I even cheked the rights on the folder to store,it contains all the privilages
thanks for help