Unable to use Uploadbox using API
7 Replies
Hi Shalini,
Query : Sorry I forgot to mention but I did try it using "IHttpActionResult" but was unable to do even call the api(it never calls any api other than POST).
Response: Since UploadBox is used for uploading files to server this work only with POST method.
Query: How does the uploadbox button"UPLOAD" works. Can we customize the link to which that button makes a call ?
Response: While clicking Upload button the controller method provided in SaveUrl will be executed and the file will be saved in the mentioned destination path. The Path provided in SaveUrl is up to the user and you can provide the path based on your scenario.
Query : If suppose I have to save a file and then get contents back where will I store the return object? There is some king of missing handler or something which I was unable to find.
Response: You can receive the uploaded file details in success event of UploadBox. Please refer to the below given screenshot
Query : Can I call any api which is GET and not POST via uploadbox button "UPLOAD". How does the button knows that POST only has to be called ?
Response: No, we cannot call GET using UploadBox and this is handled in our UploadBox source.
Query: My scenario is I'm using MVC with Web API and I've to call an API on click on uploadbox's UPLOAD button which will save the file and return me back file details("like path,name,size etc). That data I want to use in angularjs controller which will save in database. Can you please guide me with this ?
Response: We have prepared a sample based on your query by calling a Web Api method and save the file in the mentioned location. You can get the file details like name , size etc through arguments of success event. Please refer to the below code
View:
|
<div class="frame">
<div class="control">
Select a file to upload
<div class="posupload">
@Html.EJ().Uploadbox("UploadDefault").SaveUrl("/api/Upload/UploadFile").RemoveUrl(Url.Content("~/FileUpload/RemoveDefault")).ClientSideEvents(e => e.Success("onSuccess"))
</div>
</div>
</div>
<script type="text/javascript">
function onSuccess(args) {
console.log("File Name:" + args.files.name, "File Size:" + args.files.size);
alert("success");
}
</script> |
WebApi Controller:
|
public class UploadController : ApiController
{
[HttpPost]
public IHttpActionResult UploadFile()
{
if (HttpContext.Current.Request.Files.AllKeys.Any())
{
var httpPostedFile = HttpContext.Current.Request.Files["UploadDefault"];
if (httpPostedFile != null)
{
var fileName = Path.GetFileName(httpPostedFile.FileName);
var destinationPath = Path.Combine(HttpContext.Current.Server.MapPath("~/App_Data"), fileName);
httpPostedFile.SaveAs(destinationPath);
}
}
return Ok("Uploaded Successfully");
}
} |
We have attached sample for your reference in the following link
Regards,
Keerthana.
Hi Shalini,
Query 1: I get it that on click of "Upload" button in UploadBox only saveUrl is called no matter what. Is it correct ?
Response: saveUrl performs save action based on the server address mentioned by users and this will execute any type of POST methods.
Query 2: If so then how can I call a function so that it doesn't gets called on page load. I tried calling a function but everytime it gets executed on page load itself. I want it to get called on click of "Upload" button.
Response: In the provided sample the api method is executed only on upload button click, not during page load. Please recheck our sample and if issue persists, share us the code snippet of your webApi method so that we can proceed further.
Query 3: I am currently calling an API which is working fine when running in localhost (due to the fact that it gets auth token from AngularJS controller). But when I try to do the same via a hosted network folder, then it throws an exception of error 401 Unauthorised. I checked and found that it doesn't gets Auth Token. How can i send auth token in saveURL . I cannot attach it in API url as it will be visible ( i do not know how to send auth token in header via saveURL).
Response: You can send the auth token through header during beforeSend event of Upload box as shown below
|
$("#UploadDefault").ejUploadbox({
saveUrl: "/api/Upload/UploadFile",
removeUrl: "~/FileUpload/RemoveDefault",
uploadName: 'uploaadBox',
multipleFilesSelection: false,
dialogAction: { closeOnComplete: false },
success: "onSuccess",
beforeSend:"onbeforeSend"
});
function onbeforeSend(args)
{
args.xhr.setRequestHeader("securityToken", "23456");
} |
You can receive this in Web Api method as shown below
We have attached modified sample in the following link
Regards
Keerthana.
SIGN IN To post a reply.
