How do I upload a multipart form in AngularJS? - javascript

Form view:
<form enctype="multipart/form-data" ng-submit="upload(file)">
<input type="file" ng-model="modal.file" accept="image/gif" app-filereader /><br />
<br>
<textarea name="description" placeholder="Description" ng-model="description" id="" cols="30" rows="10"></textarea>
<br>
<input type="hidden" name="user" ng-model="user" value="{{ user }}" />
<br>
<input type="submit" value="Submit" class="network-sensitive button button-block button" />
</form>
Directive:
.directive('appFilereader', function(
$q
){
var slice = Array.prototype.slice;
return {
restrict: 'A'
, require: '?ngModel'
, link: function(scope, element, attrs, ngModel){
if(!ngModel) return;
ngModel.$render = function(){}
element.bind('change', function(e){
var element = e.target;
$q.all(slice.call(element.files, 0).map(readFile))
.then(function(values){
if(element.multiple) ngModel.$setViewValue(values);
else ngModel.$setViewValue(values.length ? values[0] : null);
});
function readFile(file) {
var deferred = $q.defer();
var reader = new FileReader()
reader.onload = function(e){
deferred.resolve(e.target.result);
}
reader.onerror = function(e) {
deferred.reject(e);
}
reader.readAsDataURL(file);
return deferred.promise;
}
});
}
};
});
Upload function in my services:
upload: function(file) {
var token = $window.sessionStorage.token;
var url = 'http://url.co/api/posts/creates';
var $cache = $cacheFactory.get('$http');
var deffered = $q.defer();
var data = $cache.get(url);
if(!data) {
$http({
url: url,
method: "POST",
params: { access_token: token },
data: file,
headers: {'Content-Type': undefined },
transformRequest: angular.identity
}).then(function(res) {
deffered.resolve(res);
});
} else {
deffered.resolve(data);
}
return deffered.promise;
}
I've not included the controller code as it's just relaying the form data from the modal to the service and that part's working.
The problem I'm having is that the file is being submitted as encoded data (my knowledge is a bit shaky about binary data and blobs etc). And my API (written in Symfony2) is expecting a normal file submission as opposed to the data string.
So how would I convert that binary blob into an image file I can then submit? Or am I missing something?

use this module https://github.com/danialfarid/angular-file-upload
is very simple to use.
ex:
var $file;//single file
$scope.sendFiles= function(){
$upload.upload({
url: yourUrl,
method: "POST",
data: { data: $scope.yourOtherObject },
file: $file
}).success(function (data, status, headers, config) {
// file is uploaded successfully
console.log(data);
console.log("File upload SUCCESS");
}).error(function (data, status) {
console.log("File upload FAILED");
});
}
$scope.onFileSelect = function ($files) {
for (var i = 0; i < $files.length; i++) {
$file = $files[i];//set a single file
}
};
HTML CODE
<input type="file" name="myfile" ng-file-select="onFileSelect($files)" />
<button ng-click='sendFiles()'>Send file</button>

The problem is the $http service, by default use content-type as application/json and in your case it must be application/x-www-form-urlencoded
To solve this you can use the following directive: https://github.com/nervgh/angular-file-upload/wiki/Module-API, it also has support for send data along with the files.
Another aproach is to use the formData object along with XmlHttpRequest in your directive, like this:
var data = new FormData();
var xhr = new XMLHttpRequest();
data.append('file', files[i], files[i].name);
xhr.open('POST', scope.mseUploadFile);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
if (scope.callback) {
scope.$apply(function () {
scope.callback({ $data: result });
});
}
}
else if (xhr.readyState == 4 && xhr.status == 400) {
scope.$apply(function () {
if (scope.onError) {
scope.onError({ $error: xhr.responseText });
}
handleError(xhr.responseText);
});
}
};
xhr.send(data);

Related

how send multi image From img src to controller in asp.net mvc [duplicate]

I have a file in my view
<form id="upload" enctype="multipart/form-data">
<input type="file" name="fileUpload" id="fileUpload" size="23" />
</form>
and an ajax request
$.ajax({
url: '<%=Url.Action("JsonSave","Survey") %>',
dataType: 'json',
processData: false,
contentType: "multipart/mixed",
data: {
Id: selectedRow.Id,
Value: 'some date was added by the user here :))'
},
cache: false,
success: function (data) {}
});
but there is no file in the Request.Files. Whats wrong with the ajax request?
Upload files using AJAX in ASP.Net MVC
Things have changed since HTML5
JavaScript
document.getElementById('uploader').onsubmit = function () {
var formdata = new FormData(); //FormData object
var fileInput = document.getElementById('fileInput');
//Iterating through each files selected in fileInput
for (i = 0; i < fileInput.files.length; i++) {
//Appending each file to FormData object
formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
//Creating an XMLHttpRequest and sending
var xhr = new XMLHttpRequest();
xhr.open('POST', '/Home/Upload');
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
return false;
}
Controller
public JsonResult Upload()
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i]; //Uploaded file
//Use the following properties to get file's name, size and MIMEType
int fileSize = file.ContentLength;
string fileName = file.FileName;
string mimeType = file.ContentType;
System.IO.Stream fileContent = file.InputStream;
//To save file, use SaveAs method
file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root
}
return Json("Uploaded " + Request.Files.Count + " files");
}
EDIT : The HTML
<form id="uploader">
<input id="fileInput" type="file" multiple>
<input type="submit" value="Upload file" />
</form>
AJAX file uploads are now possible by passing a FormData object to the data property of the $.ajax request.
As the OP specifically asked for a jQuery implementation, here you go:
<form id="upload" enctype="multipart/form-data" action="#Url.Action("JsonSave", "Survey")" method="POST">
<input type="file" name="fileUpload" id="fileUpload" size="23" /><br />
<button>Upload!</button>
</form>
$('#upload').submit(function(e) {
e.preventDefault(); // stop the standard form submission
$.ajax({
url: this.action,
type: this.method,
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data.UploadedFileCount + ' file(s) uploaded successfully');
},
error: function(xhr, error, status) {
console.log(error, status);
}
});
});
public JsonResult Survey()
{
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
// save file as required here...
}
return Json(new { UploadedFileCount = Request.Files.Count });
}
More information on FormData at MDN
You can't upload files via ajax, you need to use an iFrame or some other trickery to do a full postback. This is mainly due to security concerns.
Here's a decent write-up including a sample project using SWFUpload and ASP.Net MVC by Steve Sanderson. It's the first thing I read getting this working properly with Asp.Net MVC (I was new to MVC at the time as well), hopefully it's as helpful for you.
I have a sample like this on vuejs version: v2.5.2
<form action="url" method="post" enctype="multipart/form-data">
<div class="col-md-6">
<input type="file" class="image_0" name="FilesFront" ref="FilesFront" />
</div>
<div class="col-md-6">
<input type="file" class="image_1" name="FilesBack" ref="FilesBack" />
</div>
</form>
<script>
Vue.component('v-bl-document', {
template: '#document-item-template',
props: ['doc'],
data: function () {
return {
document: this.doc
};
},
methods: {
submit: function () {
event.preventDefault();
var data = new FormData();
var _doc = this.document;
Object.keys(_doc).forEach(function (key) {
data.append(key, _doc[key]);
});
var _refs = this.$refs;
Object.keys(_refs).forEach(function (key) {
data.append(key, _refs[key].files[0]);
});
debugger;
$.ajax({
type: "POST",
data: data,
url: url,
cache: false,
contentType: false,
processData: false,
success: function (result) {
//do something
},
});
}
}
});
</script>
If you posting form using ajax then you can not
send image using $.ajax method,
you have to use classic xmlHttpobject method for saving image,
other alternative of it use submit type instead of button

how to pass file/attachment to controller through ajax in asp.net? [duplicate]

I have a file in my view
<form id="upload" enctype="multipart/form-data">
<input type="file" name="fileUpload" id="fileUpload" size="23" />
</form>
and an ajax request
$.ajax({
url: '<%=Url.Action("JsonSave","Survey") %>',
dataType: 'json',
processData: false,
contentType: "multipart/mixed",
data: {
Id: selectedRow.Id,
Value: 'some date was added by the user here :))'
},
cache: false,
success: function (data) {}
});
but there is no file in the Request.Files. Whats wrong with the ajax request?
Upload files using AJAX in ASP.Net MVC
Things have changed since HTML5
JavaScript
document.getElementById('uploader').onsubmit = function () {
var formdata = new FormData(); //FormData object
var fileInput = document.getElementById('fileInput');
//Iterating through each files selected in fileInput
for (i = 0; i < fileInput.files.length; i++) {
//Appending each file to FormData object
formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
//Creating an XMLHttpRequest and sending
var xhr = new XMLHttpRequest();
xhr.open('POST', '/Home/Upload');
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
return false;
}
Controller
public JsonResult Upload()
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i]; //Uploaded file
//Use the following properties to get file's name, size and MIMEType
int fileSize = file.ContentLength;
string fileName = file.FileName;
string mimeType = file.ContentType;
System.IO.Stream fileContent = file.InputStream;
//To save file, use SaveAs method
file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root
}
return Json("Uploaded " + Request.Files.Count + " files");
}
EDIT : The HTML
<form id="uploader">
<input id="fileInput" type="file" multiple>
<input type="submit" value="Upload file" />
</form>
AJAX file uploads are now possible by passing a FormData object to the data property of the $.ajax request.
As the OP specifically asked for a jQuery implementation, here you go:
<form id="upload" enctype="multipart/form-data" action="#Url.Action("JsonSave", "Survey")" method="POST">
<input type="file" name="fileUpload" id="fileUpload" size="23" /><br />
<button>Upload!</button>
</form>
$('#upload').submit(function(e) {
e.preventDefault(); // stop the standard form submission
$.ajax({
url: this.action,
type: this.method,
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data.UploadedFileCount + ' file(s) uploaded successfully');
},
error: function(xhr, error, status) {
console.log(error, status);
}
});
});
public JsonResult Survey()
{
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
// save file as required here...
}
return Json(new { UploadedFileCount = Request.Files.Count });
}
More information on FormData at MDN
You can't upload files via ajax, you need to use an iFrame or some other trickery to do a full postback. This is mainly due to security concerns.
Here's a decent write-up including a sample project using SWFUpload and ASP.Net MVC by Steve Sanderson. It's the first thing I read getting this working properly with Asp.Net MVC (I was new to MVC at the time as well), hopefully it's as helpful for you.
I have a sample like this on vuejs version: v2.5.2
<form action="url" method="post" enctype="multipart/form-data">
<div class="col-md-6">
<input type="file" class="image_0" name="FilesFront" ref="FilesFront" />
</div>
<div class="col-md-6">
<input type="file" class="image_1" name="FilesBack" ref="FilesBack" />
</div>
</form>
<script>
Vue.component('v-bl-document', {
template: '#document-item-template',
props: ['doc'],
data: function () {
return {
document: this.doc
};
},
methods: {
submit: function () {
event.preventDefault();
var data = new FormData();
var _doc = this.document;
Object.keys(_doc).forEach(function (key) {
data.append(key, _doc[key]);
});
var _refs = this.$refs;
Object.keys(_refs).forEach(function (key) {
data.append(key, _refs[key].files[0]);
});
debugger;
$.ajax({
type: "POST",
data: data,
url: url,
cache: false,
contentType: false,
processData: false,
success: function (result) {
//do something
},
});
}
}
});
</script>
If you posting form using ajax then you can not
send image using $.ajax method,
you have to use classic xmlHttpobject method for saving image,
other alternative of it use submit type instead of button

Angularjs : FileUpload not working

I am trying to upload a file based on the tutorial in the below link,
http://www.encodedna.com/angularjs/tutorial/angularjs-file-upload-using-http-post-formdata-webapi.htm
but the problem is the File is not present in the formdata request and the http.POST request gets failed on calling. I am spending a lot of time on this and I am not able to spot any mistake. could someone please help me resolve this.
// NOW UPLOAD THE FILES.
$scope.uploadFiles = function (id) {
formdata.append('pid', id);
debugger;
var request = {
method: 'POST',
url: '/api/Project/PostProjectFiles',
data: formdata,
headers: {
'Content-Type': undefined
}
};
console.log(request);
// SEND THE FILES.
$http(request)
.then(function (d) {
alert(JSON.stringify(d));
})
.catch(function (d) {
alert(JSON.stringify(d));
console.log(d);
});
}
var formdata = new FormData();
$scope.getTheFiles = function ($files) {
//debugger;
angular.forEach($files, function (value, key) {
formdata.append(key, value);
});
console.log($files);
};
myApp.directive('ngFiles', ['$parse', function ($parse) {
function fn_link(scope, element, attrs) {
var onChange = $parse(attrs.ngFiles);
element.on('change', function (event) {
onChange(scope, {
$files: event.target.files
});
});
};
return {
link: fn_link
}
}]);
I suspect the above getthefiles() method more bcos the $files contain the files but the formdata doesnot contain the files.
HTML Code,
<div class="col-sm-8 panelpadding">
<div>
<input type="file" id="file1" name="file1" ng-model="project.file1" ng-files="getTheFiles($files)" class="col-sm-4" />
</div>
<div class="col-sm-12 text-center">
<button type="button" ng-click="uploadFiles(41)">Upload Documents</button>
</div>
</div>
I have also tried all these ways to catch the filedata but it is not successful. Everytime I get [object object] in the httprequest.
var httpRequest = HttpContext.Current.Request;
var FileObject = httpRequest.Params[0];
var FObject = httpRequest.Form[0];
id = Convert.ToInt32(httpRequest.Params[1]);

how can i use post and files with ajax?

i'd like to know how can i use $_POST and $_FILES using ajax, i'm trying to upload an image and insert a value on my database with post.
i've tried but it doesn't work.
index.html
<div class="form-group">
<label> img </label>
<input type="file" name="img" id="img" />
<input type='hidden' id='value' value='<?=$_GET["p"]?>' />
</div>
ajax.js
$(document).ready(function() {
$('#upload').click(function() {
var value = $('#value').val();
var img = $('#img').val();
var string= 'value=' + value + '&img=' + img;
$.ajax({
type: "POST",
url: "ajax.php",
data: string,
dataType: "json",
success: function(data) {
var success = data['success'];
if (success == true) {
console.log('success');
} else {
console.log('error');
}
}
});
return false;
});
});
ajax.php
<?php
if(isset($_POST["value"]) && isset($_FILES["img"])) {
echo json_encode(array("success" => true));
} else {
echo json_encode(array("success" => false));
}
?>
The best approach is convert image to base64 first. This conversion is done in the change listener.
var files = [];
$("input[type=file]").change(function(event) {
$.each(event.target.files, function(index, file) {
var reader = new FileReader();
reader.onload = function(event) {
object = {};
object.filename = file.name;
object.data = event.target.result;
files.push(object);
};
reader.readAsDataURL(file);
});
});
$("form").submit(function(form) {
$.each(files, function(index, file) {
$.ajax({url: "/ajax-upload",
type: 'POST',
data: {filename: file.filename, data: file.data},
success: function(data, status, xhr) {}
});
});
files = [];
form.preventDefault();
});

Send file using PUT method Angularjs

I am using angularjs. I have created a file upload function using angularjs with laravel. The file upload with FormData is working fine. But when I try to send file through PUT method there is no response from the server side.
I have gone through the following answers.
Uploading a file with jquery and sending as a PUT and How to upload a file using an HTTP "PUT" using JQuery? but I cannot able to find solution.
Here is my code.
<input type="file" ng-file-model = "formData.files" multiple>
The directive for my code
app.directive('ngFileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.ngFileModel);
var isMultiple = attrs.multiple;
var modelSetter = model.assign;
element.bind('change', function () {
var values = [];
angular.forEach(element[0].files, function (item) {
var value = item;
values.push(value);
});
scope.$apply(function () {
if (isMultiple) {
modelSetter(scope, values);
} else {
modelSetter(scope, values[0]);
}
});
});
}
};
}]);
Here is my function which converts my form data into FormData
constructFormData : function( data ) {
var fd = new FormData();
for (var key in data) {
var value = data[key];
angular.forEach(data, function (file, i) {
fd.append('files['+i+']', file);
});
}
return fd;
},
Here is my Controller
var formData = GeneralService.constructFormData($scope.formData);
FileService.update( formData )
.success(function( data ){
if(data.status == 403) {
$location.path('/403');
}
if(data.success) {
console.log(data);
} else {
ValidationService.showValidationErrors(data.errors);
}
});
Here is my service
update : function(formData) {
return $http({
method: 'PUT',
url: $rootScope.baseurl +'/files',
data: formData,
dataType: 'json',
headers: {'Content-Type': undefined}
});
},
The Server side (laravel)
routes.php
Route::put('/files', ['uses' => 'FilesController#update']);
FilesController
public function update(Request $request) {
$data = $request->all();
print_r($data);
}
the above print_r function displays nothing.
I am get the posted data using print_r($request->all());, It gives empty data. I don't know where I make mistake. If I am asking this question by wrong please apologize.
I have the same issue and finally i found this code
var formData = new FormData();
angular.forEach($scope.data, function (value, key) {
formData.set(key, value);
});
$http.post(uploadUrl, formData, {
transformRequest: angular.identity,
headers : {'Content-Type': undefined}
});

Categories