Showing error when I m uploading file from client computer to server using web api in ASP.NET

Question

0.00/5 (No votes)

See more:

this is the error -----
ServerUrl/api/fileupload/uploadfile. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUplodaTest.aspx.cs" Inherits="UploadFileWebApi.FileUplodaTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $('#btnUploadFile').on('click', function () {

                var data = new FormData();

                var files = $("#fileUpload").get(0).files;

                // Add the uploaded image content to the form data collection
                if (files.length > 0) {
                    data.append("UploadedImage", files[0]);
                }

                // Make Ajax request with the contentType = false, and procesDate = false
                var ajaxRequest = $.ajax({
                    type: "POST",
                    url: "ServerUrl/api/fileupload/uploadfile",
                    contentType: false,
                    processData: false,
                    data: data
                });

                ajaxRequest.done(function (xhr, textStatus) {
                    // Do other operation
                    alert("File Uploaded Sucessfull !!");
                });
            });
        });
    </script>


</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                <label for="fileUpload">
                    Select File to Upload:</label>
                <input id="fileUpload" type="file" />

                <input id="btnUploadFile" type="button" value="Upload File" />

            </div>

        </div>
    </form>
</body>
</html>

and Web Api Controller Code is Here :----

C#

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;

namespace UploadFileWebApi.Controllers
{
    public class FileUploadController : ApiController
    {
        [HttpPost]
        public void UploadFile()
        {
            if (HttpContext.Current.Request.Files.AllKeys.Any())
            {
                // Get the uploaded image from the Files collection
                var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];
                string pathA = "D://Download";
                if (httpPostedFile != null)
                {
                    // Validate the uploaded image(optional)

                    // Get the complete file path
                    //var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName);
                    var fileSavePath = Path.Combine(pathA, httpPostedFile.FileName);

                    // Save the uploaded file to "UploadedFiles" folder
                    httpPostedFile.SaveAs(fileSavePath);
                }
            }
        }
    }
}

When i am Testing this web service on my local server this is work fine but when i host this web api on server and call it using jquery Ajax call(POST) FROM My consumer application this this error is showing in console .so please help me how to upload file from client to server and how to resolve this problem.

What I have tried:

When i am Testing this web service on my local server this is work fine but when i host this web api on server and call it using jquery Ajax call(POST) FROM My consumer application this this error is showing in console .so please help me how to upload file from client to server and how to resolve this problem.

Posted 18-May-16 23:10pm

nitinkumar06

Add a Solution

Comments

Kornfeld Eliyahu Peter 19-May-16 5:27am

What error?

nitinkumar06 19-May-16 6:17am

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

nitinkumar06 19-May-16 6:18am

when try to upload file using Jquery , WebApi From client to Server .
if i run this code on local system then this will work fine but when hosting on server then this will show error ..

Kornfeld Eliyahu Peter 19-May-16 7:05am

Put some sniffer (like Fiddler) and check the actual protocol of the call...

F-ES Sitecore 19-May-16 6:03am

Have you tried googling the error? Have you tried any of the suggested solutions?

nitinkumar06 19-May-16 6:16am

yes from morning to till now i try many things but now one is working fine with my code ...

F-ES Sitecore 19-May-16 6:59am

If you've tried "many things" then put those things in the "What I've tried" section so that people don't waste their time suggesting things you've already done. That is what the section is there for, not to simply re-state the problem.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)