javascript - uploading form data with a binary image to sql server -
my goal user able upload image data fields. far can 1 or other work. code below enables me upload image sql database binary. need uploading data fields , image in same form. in advance
view
<form ng-submit="submititem()" enctype='multipart/form-data'> <input class="form-control" type="text" ng-model="itemname" placeholder="name" /> <input class="form-control" type="text" ng-model="itemcategory" placeholder="category" /><br /> <input class="form-control" type="text" ng-model="itemdescription" placeholder="description..." /> <input id="fileupload" class="form-control" type="file" ng-model="imageurl" placeholder="image" /> <input class="form-control" type="number" ng-model="itemprice" placeholder="price" /><br /> <input class="btn btn-danger" type="submit" value="add item" /> apicontroller
public class apiitemscontroller : apicontroller { iteminterface _adapter; public apiitemscontroller() { _adapter = new itemdataadapter(); } public apiitemscontroller(iteminterface adapter) { _adapter = adapter; } //// api/<controller> public ihttpactionresult get() { var items = _adapter.getitems(); return ok(items); } // api/<controller>/5 public ihttpactionresult get(int id) { item item = new item(); item = _adapter.getitem(id); if (item == null) { return notfound(); } return ok(item); } //post public async task<object> postfile() { if (!request.content.ismimemultipartcontent()) throw new exception(); var provider = new multipartmemorystreamprovider(); var result = new { files = new list<object>() }; var item = new item(); await request.content.readasmultipartasync(provider) .continuewith(async (a) => { foreach (var file in provider.contents) { var filename = file.headers.contentdisposition.filename.trim('\"'); var contenttype = file.headers.contenttype.tostring(); //var requestid = int.parse(file.headers.contentdisposition.name.trim('\"')); await file.readasbytearrayasync().continuewith(b => { item.image = b.result; }); } }).unwrap(); new itemdataadapter().postnewitem(item); return result; } main controller
app.controller('mainctrl', function ($scope, $location, $anchorscroll, $modal, $ekathuwa, $q, item, message, $http) { $scope.itemarray = null; $http.get("api/apiitems").success(function (data) { $scope.itemarray = data; }); var url = "api/apiitems/file", uploadbutton = $('<button/>') .addclass('btn btn-primary') .prop('disabled', true) .text('processing...') .on('click', function () { var $this = $(this), data = $this.data(); $this.off('click').text('abort').on('click', function () { $this.remove(); data.abort(); }); data.submit().always(function () { $this.remove(); }); }); $('#fileupload').fileupload({ url: url, datatype: 'json', autoupload: true, //acceptfiletypes: /(\.|\/)(gif|jpe?g|png)$/i, maxfilesize: 5000000, // 5 mb disableimageresize: /android(?!.*chrome)|opera/ .test(window.navigator.useragent), previewmaxwidth: 100, previewmaxheight: 100, previewcrop: true }).on('fileuploadadd', function (e, data) { data.context = $('<div/>').appendto('#files'); $.each(data.files, function (index, file) { var node = $('<p/>') .append($('<span/>').text(file.name)); if (!index) { node .append('<br>') .append(uploadbutton.clone(true).data(data)); } node.appendto(data.context); }); }).on('fileuploadprocessalways', function (e, data) { var index = data.index, file = data.files[index], node = $(data.context.children()[index]); if (file.preview) { node.prepend('<br>').prepend(file.preview); } if (file.error) { node.append('<br>').append($('<span class="text-danger"/>').text(file.error)); } if (index + 1 === data.files.length) { data.context.find('button').text('upload').prop('disabled', !!data.files.error); } }).on('fileuploadprogressall', function (e, data) { var progress = parseint(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css('width', progress + '%'); }).on('fileuploaddone', function (e, data) { $.each(data.result.files, function (index, file) { if (file.url) { var link = $('<a>').attr('target', '_blank').prop('href', file.url); $(data.context.children()[index]).wrap(link); } else if (file.error) { var error = $('<span class="text-danger"/>').text(file.error); $(data.context.children()[index]).append('<br>').append(error); } }); }).on('fileuploadfail', function (e, data) { $.each(data.files, function (index, file) { var error = $('<span class="text-danger"/>').text('file upload failed.'); $(data.context.children()[index]).append('<br>').append(error); }); }).bind('fileuploadalways', function (e, data) { console.log(data); if (data._response.textstatus === "success") { (var = 0; < data._response.jqxhr.responsejson.files.length; i++) { //var file = data._response.jqxhr.responsejson.files[i]; //model().request.requestattachments.push({ filename: ko.observable(file.name), id: ko.observable(file.id) }); } $('#progress .progress-bar').css('width', '0%'); } }).prop('disabled', !$.support.fileinput) .parent().addclass($.support.fileinput ? undefined : 'disabled'); dataadapter
public class itemdataadapter : iteminterface { public list<item> getitems() { applicationdbcontext db = new applicationdbcontext(); list<item> model = new list<item>(); model = db.items.tolist(); return model; } public item getitem(int id) { applicationdbcontext db = new applicationdbcontext(); item model = new item(); model = db.items.where(j => j.itemid == id) .firstordefault(); return model; } public list<item> postnewitem( item newitem) { applicationdbcontext db = new applicationdbcontext(); //item item = new item(); //item.itemdescription = newitem.itemdescription; //item.itemid = newitem.itemid; //item.itemname = newitem.itemname; //item.itemprice = newitem.itemprice; //item.itemcategory = newitem.itemcategory; //item.image = newitem.image; db.items.add(newitem); db.savechanges(); // ???? return db.items.tolist(); } class
public class item { public int itemid { get; set; } public string itemname { get; set; } public string itemdescription { get; set; } public int itemprice { get; set; } public byte[] image { get; set; } public string itemcategory { get; set; } public bool hidden { get; set; } }
in javascript file upload plugin options set additional form data. there seems several ways of going documented here. https://github.com/blueimp/jquery-file-upload/wiki/how-to-submit-additional-form-data
$('#fileupload').fileupload({ formdata: {example: 'test'}, url: url, datatype: 'json', autoupload: true, //acceptfiletypes: /(\.|\/)(gif|jpe?g|png)$/i, maxfilesize: 5000000, // 5 mb disableimageresize: /android(?!.*chrome)|opera/ .test(window.navigator.useragent), previewmaxwidth: 100, previewmaxheight: 100, previewcrop: true })
Comments
Post a Comment