Vue.js - displaying images rendered in API - c#

I have a Get method in an API that renders an image:
[HttpGet("GetImage/{userId}/{imageURL}")]
public IActionResult GetImage(string userId, string imageURL)
{
byte[] b = System.IO.File.ReadAllBytes("../WebServices/ImgLibrary/" + userId + "/" + imageURL);
return File(b, "image/png");
}
Now I need to call that method and display images in my Vue.js project, but I've been unable to get anything to render. This is my method for calling the API:
var imgURL = this.baseUrl + "/GetImage/" + user.Id.toString() + "/";
var i;
for (i = 0; i < this.imageList.length; i++) {
imgURL += this.imageList[i].Name;
const imgResponse = await fetch(imgURL,{
method: "GET",
});
const thisImg = await imgResponse.blob();
this.imgRawDataList[i] = thisImg
imgURL = this.baseUrl + "/GetImage/" + user.Id.toString() + "/"; //reset
}
This adds Blobs to the imgRawDataList array, which is a parallel array to the imageList array that stores the image paths. ImageK is a counter.
<div v-for="(ImageD, ImageK) in imageList">
<div v-bind:data-src="ImageD.ImageUrl">
<img v-bind:src="getRawURL(ImageD.ImageUrl, ImageK)" />
</div>
</div>
And this is the getRawURL method to get the image src:
getRawURL(path, i) {
if (this.imgRawDataList.length > 0) {
if (this.imgRawDataList[i] !== undefined) {
return 'data:image/png;base64,' + btoa(
new Uint8Array(this.imgRawDataList[i])
.reduce((data, byte) => data + String.fromCharCode(byte), '')
);
}
else { return ''; }
} else { return ''; }
},
What comes back from the btoa method is nothing, so the images look like this:
<img src="data:image/png;base64," data-v-30ae62="">
Are Blobs the best way to do this? In Swagger when testing my API the GetImage method will actually render the image, so I feel like I'm doing too much here.

Related

Posting array of objects to ASP.NET MVC Controller get 403 error

I am trying to post an array of objects to MVC controller, and when the size of the array is less than 30ish records the posting works fine. However, when the array size is over that number, it would return 403 error. The code works when it was tested in VS 2019 in debug mode no matter how big the array is, but it gives 403 error when it runs on IIS.
I've tried to make the following changes in the environment base on my search here with no avail:
<add key="aspnet:MaxJsonDeserializerMembers" value="50000" /> // changed to even higher number like 150000
<httpRuntime maxRequestLength="40960" targetFramework="4.5" requestValidationMode="2.0" />
<requestLimits maxAllowedContentLength="10485760" /> // changed to even higher number like 50000000
Here is the jquery post method:
var progress = $.connection.progressHub;
progress.client.addProgress = function (message, percentage) {
UpdateProgress(message, percentage);
};
var params = '';
var grid = $("#Grid").data("kendoGrid");
var cnt = grid.dataSource.data().length;
for (var i = 0; i < cnt; i++) {
var model = grid.dataItem("tbody tr:eq(" + i + ")");
params += "&models[" + i + "].ItemId=" + model.ItemId;
params += "&models[" + i + "].ItemNo=" + model.ItemNo;
params += "&models[" + i + "].Price=" + model.Price;
params += "&models[" + i + "].SalesPrice=" + model.SalesPrice;
params += "&models[" + i + "].Qty=" + model.Qty;
params += "&models[" + i + "].CreatedDate=" + model.CreatedDate;
params += "&models[" + i + "].Amount=" + model.Amount;
params += "&models[" + i + "].OrderId=" + model.OrderId;
}
if (params != '') {
$.connection.hub.start().done(function () {
$.post('#(Url.Action("SomeFunction", "Controller", new { area = "Sales" }))', params, function (result) {
Messager.Success('Success');
window.location.reload();
});
});
}
Here is the controller:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SomeFunction([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<OrderitemViewModel> viewModel)
{
var cnt = 0;
var totalCount = viewModel.Count();
if (viewModel != null)
{
foreach (var master in viewModel)
{
_svc.DetailFunction(request, master);
ProgressHub.SendProgress("Sync in progress...", ++cnt, totalCount);
}
}
return Json("success", JsonRequestBehavior.AllowGet);
}
Any help would be much appreciated.
It seems my issue is related to AWS WAF blocking the request.
The specific rule group to change is in
AWSManagedRulesCommonRuleSet
and the rule I have to override is
SizeRestrictions_BODY

how can I add a prefix string in the filename when upload a file using qq.FileUploader

my code is like this, how can i add the prefix like "123_" to the front of the filename when the user uploads like 1.jpg, and then change it to 123_1.jpg to the server?
<script type="text/javascript">
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader'),
allowedExtensions: ["jpg", "pdf"],
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>drag the files to here to upload</span></div>' +
'<div class="qq-upload-button">upload files</div>' +
'<ul class="qq-upload-list"></ul>' +
'</div>',
action: '#Url.Action("upload", new { staffId = Model.StaffId })'
});
</script>
Pretty simple,
public ActionResult SaveFile(HttpPostedFileBase FileUpload)
{
string fileName = "";
if (FileUpload != null && FileUpload.ContentLength > 0)
{
fileName = "123_"+ Path.GetFileName(FileUpload.FileName);
//rest code

Refresh in browser when uploading mvc file c #

I have an AJAX file upload by call to MVC C# driver, but the browser refreshes and reloads the page.
But if I comment the line that saves the file in the driver does not happen that is only when the file is saved on the server. File.SaveAs (fname);
MVC controller:
[HttpPost]
public ActionResult UploadDocument()
{
if (Request.Files.Count > 0)
{
try
{
FileUpdateDto fileModal = new FileUpdateDto();
HttpFileCollectionBase files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFileBase file = files[i];
string fname;
DirectoryInfo directory = new DirectoryInfo(Server.MapPath("~/Content/Document/" + UserId).ToString());
if (!directory.Exists)
{
Directory.CreateDirectory(Server.MapPath("~/Content/Document/" + UserId).ToString());
}
if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
{
string[] testfiles = file.FileName.Split(new char[] { '\\' });
fname = testfiles[testfiles.Length - 1];
}
else
{
fname = file.FileName;
}
var guidnew = Guid.NewGuid();
fname = Path.Combine(Server.MapPath("~/Content/Document/" + UserId), guidnew + "." + fname.Split('.')[1].ToString());
fileModal.FileName = fname;
fileModal.Path = directory.ToString();
fileModal.DateFileUpload = DateTime.Now;
file.SaveAs(fname); // If I comment this line without refreshing the browser but does not save the file
}
return Json(fileModal);
}
catch (Exception ex)
{
return Json("Error occurred. Error details: " + ex.Message);
}
}
else
{
return Json("No files selected.");
}
}
Call Ajax in JavaScript:
UploadDocument: function () {
if (window.FormData !== undefined) {
var fileUpload = $("#AdviserFileUpload").get(0);
var files = fileUpload.files;
var fileData = new FormData();
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
//fileData.append('username', 'Manas');
$.ajax({
url: site.baseUrl + '/Api/Upload/Document',
type: "POST",
contentType: false,
processData: false,
data: fileData,
success: function (result) {
__this._AdviserDocumentFile = result;
},
error: function (err) {
alert(err.statusText);
}
});
} else {
alert("FormData is not supported.");
}
}
I believe I found the solution. The cause is that Visual Studio's "Enable Reload on Save" property is True.
Go to Tools - Options - Web - Browser Reload on Save - Enable Reload on Save and make it false.
Im working with VS2015 and this worked for me, hope it works for you too.
Source

Upload image path-name is "System.Web.HttpPostedFileWrapper"

"ilan" is a table in my database, ilan has a column named "kapak_foto".
Here is my code:
[HttpPost]
[ValidateInput(false)]
public ActionResult ilanver(ilan ilan,HttpPostedFileBase kapak_foto)
{
if (kapak_foto != null)
{
string kapakname = Path.GetFileNameWithoutExtension(kapak_foto.FileName)
+ "-" + Guid.NewGuid() + Path.GetExtension(kapak_foto.FileName);
Image orjres = Image.FromStream(kapak_foto.InputStream);
orjres.Save(Server.MapPath("~/Content/images/pics" + kapakname));
ilan dbres = new ilan();
dbres.kapak_foto = "/Content/images/pics" + kapakname;
}
The html part:
#using (Html.BeginForm("ilanver", "ilanver", FormMethod.Post, new { enctype="multipart/form-data" }))
{ <input type="file" name="kapak_foto"/>}
Firstly; the code is
orjres.Save(Server.MapPath("~/Content/images/pics/" + kapakname));
Second; if you will use the path of saved file, you must take the file location into antoher variable before to save;
var filePath = "/Content/images/pics/" + kapakname;
orjres.Save(Server.MapPath(filePath));
ilan dbres = new ilan();
dbres.kapak_foto = filePath;
// ... the other codes...
db.ilan.add(dbres); // if your databse name defined before as db!
db.SaveChanges();
If the filePath is correct for to save file, it can be usable for url.

Valums Ajax Upload w/ C# ashx returns 'Index was out of range. Must be non-negative and less than the size of the collection.' error

I've been playing with Valum's AJAX upload script: http://valums.com/ajax-upload/
It ticks all the boxes for me, not using the horrid swfupload flash object for one. I have the JS point at my .ashx script (which for love-nor-money I cannot debug). This is what I have in the .ashx:
public class avatar : IHttpHandler, System.Web.SessionState.IRequiresSessionState {
public void ProcessRequest (HttpContext context) {
//Debugger.Break();
string result = "{\"success\":true}";
string path = HttpContext.Current.Server.MapPath("/client/vault/" + Helpers.CurrentClientHash(context.Session["SessionHash"].ToString()) + "/users/" + context.Session["SessionHash"].ToString() + "/");
string saveLocation = string.Empty;
string fileName = string.Empty;
try
{
int length = 4096;
int bytesRead = 0;
Byte[] buffer = new Byte[length];
//This works with Chrome/FF/Safari
// get the name from qqfile url parameter here
Debugger.Break();
fileName = context.Request["params"];
Debug.Write(fileName);
saveLocation = context.Server.MapPath(path) + fileName;
try
{
using (FileStream fileStream = new FileStream(saveLocation, FileMode.Create))
{
do
{
bytesRead = context.Request.InputStream.Read(buffer, 0, length);
fileStream.Write(buffer, 0, bytesRead);
}
while (bytesRead > 0);
}
}
catch (UnauthorizedAccessException ex)
{
// log error hinting to set the write permission of ASPNET or the identity accessing the code
result = result.Replace("true","false, \"error\":" + ex.Message + " " + ex.InnerException + " " + ex.StackTrace.ToString());
}
}
catch
{
try
{
//This works with IE
fileName = Path.GetFileName(context.Request.Files[0].FileName);
saveLocation = context.Server.MapPath(path) + fileName;
context.Request.Files[0].SaveAs(saveLocation);
}
catch (Exception ex)
{
result = result.Replace("true", "false, \"error\":" + ex.Message + " " + ex.InnerException);
}
}
context.Response.Write(result);
}
public bool IsReusable {
get {
return false;
}
}
}
This code was kindly offered up by another user of the Valum's script, because it ships with PHP server-side stuff. When I run the uploader, I get this in the console:
[uploader] responseText = {"success":false, "error":Index was out of
range. Must be non-negative and less than the size of the collection.
Parameter name: index }
...and the upload of course fails. I'm sure it has something to do with the FileStream, but without meaningful debugging I can't find the problem. I think it might be because the file isn't being picked-up by the .ashx, but it's in the params:
So, I have two questions if I may:
Can anyone see, right-off-the-bat where or why I'm getting the index exception?
If not, how can I debug this thing? I can't just run the debugger from VS2010, because non of the JS seems to load. I can't obviously go directly to the ashx either... Any ideas?
Help appreciated :)
Unfortunately, I never solved this. I uninstalled the Valams script and went for Plupload.
Plupload was easier, it supports HTML5, Flash, Gears and BrowserPlus. It was a no brainer in the end. Here is the working code for those looking for a C# AJAX Uploader widget:
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
<script type="text/javascript" src="/js/plupload.js"></script>
<script type="text/javascript" src="/js/plupload.html5.js"></script>
<script type="text/javascript" src="/js/plupload.gears.js"></script>
<script type="text/javascript" src="/js/plupload.browserplus.js"></script>
<script type="text/javascript" src="/js/plupload.silverlight.js"></script>
<script type="text/javascript">
// Custom example logic
function $(id) {
return document.getElementById(id);
}
var uploader = new plupload.Uploader({
runtimes: 'gears,html5,silverlight,browserplus',
browse_button: 'pickfiles',
max_file_size: '2mb',
multi_selection: false,
url: '/components/uploadify/avatar.ashx',
silverlight_xap_url: '/js/plupload.silverlight.xap',
filters: [
{ title: "Image files", extensions: "jpg,gif,png" }
]
});
uploader.bind('Init', function (up, params) {
$('filelist').innerHTML = "<div>Current runtime: " + params.runtime + "</div>";
});
uploader.bind('FilesAdded', function (up, files) {
for (var i in files) {
$('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
}
});
uploader.bind('UploadFile', function (up, file) {
$('uploader').innerHTML += '<input type="hidden" name="file-' + file.id + '" value="' + file.name + '" />';
});
uploader.bind('UploadProgress', function (up, file) {
$(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});
uploader.bind('FileUploaded', function (up, file, obj) {
alert("I've done uploading stuff...");
});
$('uploadfiles').onclick = function () {
uploader.start();
return false;
};
uploader.init();
</script>
And the C# .ashx...
public class avatar : IHttpHandler, System.Web.SessionState.IRequiresSessionState {
public void ProcessRequest (HttpContext context) {
string path = "/a/path/to/someplace/";
if (context.Request.Files.Count > 0)
{
int chunk = context.Request["chunk"] != null ? int.Parse(context.Request["chunk"]) : 0;
string fileName = context.Request["name"] != null ? context.Request["name"] : string.Empty;
HttpPostedFile fileUpload = context.Request.Files[0];
var uploadPath = path;
using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
{
var buffer = new byte[fileUpload.InputStream.Length];
fileUpload.InputStream.Read(buffer, 0, buffer.Length);
fs.Write(buffer, 0, buffer.Length);
}
}
}
public bool IsReusable {
get {
return false;
}
}
}
It maybe worthwhile noting, that if you want to access a session whilst in the .ashx, you'll just need to add SessionState.IRequiresSessionState as shown.
I hope peeps find this helpful :)
I used the ASHX handler which Syed Basher provided in his blog. It works perfectly.
public void ProcessRequest(HttpContext context)
{
const string path = "Capture/Images";
String filename = HttpContext.Current.Request.Headers["X-File-Name"];
if (string.IsNullOrEmpty(filename) && HttpContext.Current.Request.Files.Count <= 0)
{
context.Response.Write("{success:false}");
}
else
{
string mapPath = HttpContext.Current.Server.MapPath(path);
if (Directory.Exists(mapPath) == false)
{
Directory.CreateDirectory(mapPath);
}
if (filename == null)
{
//This work for IE
try
{
HttpPostedFile uploadedfile = context.Request.Files[0];
filename = uploadedfile.FileName;
uploadedfile.SaveAs(mapPath + "\\" + filename);
context.Response.Write("{success:true, name:\"" + filename + "\", path:\"" + path + "/" + filename + "\"}");
}
catch (Exception)
{
context.Response.Write("{success:false}");
}
}
else
{
//This work for Firefox and Chrome.
FileStream fileStream = new FileStream(mapPath + "\\" + filename, FileMode.OpenOrCreate);
try
{
Stream inputStream = HttpContext.Current.Request.InputStream;
inputStream.CopyTo(fileStream);
context.Response.Write("{success:true, name:\"" + filename + "\", path:\"" + path + "/" + filename + "\"}");
}
catch (Exception)
{
context.Response.Write("{success:false}");
}
finally
{
fileStream.Close();
}
}
}
}
The only exception handler I see that would produce these results is at the "This works with IE" block. The only index referenced within this block is Files[0].
I suggest adding a catch(Exception ex) to the first try/catch to determine why the code that works with Safari isn't working with IE. The other thing to note is that you're reading the stream for all browsers then attempt to re-read the stream just for IE. This would require resetting the stream to position 0.
See if this server-side script works with all browsers:
using System;
using System.Web;
using System.IO;
public class Upload : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string path = HttpContext.Current.Server.MapPath("/client/vault/"
+ Helpers.CurrentClientHash(context.Session["SessionHash"].ToString())
+ "/users/" + context.Session["SessionHash"].ToString()
+ "/");
HttpPostedFile oFile =
context.Request.Files[context.Request.Headers["X-File-Name"]];
if (!Directory.Exists(path)) Directory.CreateDirectory(path);
oFile.SaveAs(path + oFile.FileName);
context.Response.Write("1");
}
public bool IsReusable
{
get { return true; }
}
}

Categories