Multipart Form Upload Image and Json

Question

Bit stuck on this one, need to upload an image and json together using a multipart form.. not sure how to sent the content type headers or upload the image.. think i need to convert to blob.. at the moment im just sending the data i get from the file input field.

any suggestion would be great thanks

 $http({ method: 'POST', url: URL, headers: { 'Content-Type': false }, transformRequest: function (data) { console.log(data); var formData = new FormData(); formData.append("formatteddata", angular.toJson(data.model)); formData.append('media', Image) return formData; }, data: { model: shoutoutData, image: shoutoutImage} }). success(function (data, status, headers, config) { alert("success!"); }). error(function (data, status, headers, config) { alert("failed!"); });

at first you should set type as multipart. See this topics: stackoverflow.com/questions/16958448/… stackoverflow.com/questions/5392344/… — Mr Jedi
– Mr Jedi, Commented Jan 19, 2015 at 11:37
Im using angularjs, this is how you set up a multipart form.. as im getting the correct output.. Just cant seem to attach image and set the content type for each part — user3355603
– user3355603, Commented Jan 19, 2015 at 11:40
My understanding is you can't do this. I normally upload the file/s first and then use the identifier/s returned to then send the json. Take a look at this — Wayne Ellery
– Wayne Ellery, Commented Jan 19, 2015 at 11:52

squiroid · Accepted Answer · 2015-01-19 11:58:18Z

Here is the code what i did in my project to upload image and data:- HTML PAGE :- <form role="form" name="myForm" ng-submit="submitCuisine(myForm.$valid)" novalidate> <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && myForm.name.$touched }"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" placeholder="Name of cuisine" ng-model="dataform.name" required> </div> <div class="form-group" ng-class="{ 'has-error' : myForm.description.$invalid && myForm.description.$touched }"> <label for="description">Description</label> <input type="text" class="form-control" id="description" name="description" placeholder="Description for cuisine" ng-model="dataform.description" required> </div> <div class="form-group" ng-class="{ 'has-error' : myForm.category.$invalid && myForm.category.$touched }"> <label for="description">Category</label> <select class="form-control" ng-model="dataform.category" id="category" name="category" required> <option>Veg</option> <option>Non-veg</option> </select> </div> <div class="form-group" ng-class="{ 'has-error' : myForm.subcategory.$invalid && myForm.subcategory.$touched }"> <label for="description">Sub-Category</label> <select class="form-control" ng-model="dataform.subcategory" id="subcategory" name="subcategory" required> <option>Main Course</option> <option>Staters</option> </select> </div> <div class="form-group" ng-class="{ 'has-error' : myForm.price.$invalid && myForm.price.$touched }"> <label for="description">Price</label> <span class="fa fa-dollar"></span> <input type="number" class="form-control" id="price" name="price" placeholder="Price" ng-model="dataform.price" required> </div> <div class="form-group"> <label for="description">Image</label> <input type="file" file-input="files" name="file"/> </div> <button class="btn btn-primary" type="submit" ng-disabled="myForm.$invalid"> Submit</button> </form> Controller:- $scope.submitCuisine=function(isvalid){ if(isvalid){ var fd=new FormData(); angular.forEach($scope.files,function(file){ fd.append('file',file); }); fd.append('formdata',JSON.stringify($scope.dataform)); $http.post('admin/managecuisineAdd',fd,{ transformRequest:angular.identity, headers:{'Content-type':undefined} }).success(function(data){ $scope.status=data; $scope.itemlist.push(data) $scope.message="New Dish Added Successfully" }); } } Directive :- myApp.directive("fileInput",['$parse',function($parse){ return{ restrict:'A', link:function(scope,ele,attrs){ ele.bind('change',function(){ $parse(attrs.fileInput). assign(scope,ele[0].files) scope.$apply() }); } } }]);

Plunker:- http://plnkr.co/edit/yPNA0ij3Dn37tsI9w7Z2?p=preview check the post header in firebug you will find that it is showing image in encrypted form and data in the end of it.

Thanks, tweaked you code a little but put me in the right direction.. thanks for your help...

Samuel Seda · Accepted Answer · 2016-11-02 20:07:06Z

Use formData as conteiner like say @squiroid

In html code

<form ng-submit="vm.uploadFile()"> <input type="file" id="filePhoto" name="file"> <button type="submit">Save</button> </form> {{vm.previewImage()}}

In my controller

vm.previewImage = previewImage; function previewImage(){ console.info("vm.file "+vm.file); var imageLoader = document.getElementById('filePhoto'); console.info(imageLoader); imageLoader.addEventListener('change', handleImages, false); function handleImages(e) { console.info("entra handleImage"); vm.file = e.target.files[0]; console.info("archivo "); console.info(vm.file); } } vm.uploadFile = uploadFile; function uploadFile() { return dataFactory.uploadFile( vm.file) .then(function successCallback(response) { console.info('uploadFile success'); console.info(response); }, function errorCallback(response) { console.info('updauploadFileteUser fail'); console.info(response); }); }

In DataFactory

function updateUser(token,file,username,email,lenguaje,colapsarMenu){ var formData=new FormData(); formData.append('file',file); //append more params if you want return $http .post('/uploadFile', formData,{ transformRequest:angular.identity, headers: { //Optional token bearer 'Authorization': 'Bearer '+token, 'Content-type':undefined } }); }

Collectives™ on Stack Overflow

Multipart Form Upload Image and Json

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related