In this article, I am going to explain ,"How to Upload Images to the server using Cordova File Transfer Plugin and Asp.Net core Web API".

Requirements

  • Web API (you can use local IIS servers to host your API)
  • Cordova Camera Plugin (cordova-plugin-camera)
  • Cordova File Transfer Plugin (cordova-plugin-filetransfer)

Steps

1. Build Asp.net core Web API.

2. Camera Plugin to use mobile camera.

3. Upload Images using File transfer plugin.

SERVER SIDE:

Follow the link below to built Image Upload REST API Using ASP.NET Core.

Follow the link to Host ASP.NET Core Web API on IIS.

MOBILE APP:

Create New project on Visual Studio.

  • Select JavaScript
  • Select Mobile Apps
  • Select Blank APP (Cordova APP)
  • Provide Project Name
  • Select Location that you want to store your project.
  • Click on OK

  • Our Project looks like this.

Adding Plugin:

  • Open config.xml
  • Go to Plugin.
  • Click on Camera. (cordova-plugin-camera)
  • Click on Add.
  • Similarly Add File Transfer Plugin(cordova-plugin-file-transfer)

  • You can see that our installed plugin is on the  installed tab.

Now open your index.html and add following div.

<div class="row">

      <div class="profile-header-container">

         <div class="profile-header-img">

             <div id="image">

                 <img class='img-circle' width='120' height='120' src='images/USER.jpg' />

             </div>

             <div class="rank-label-container">

                 <input type="button" value="Update Profile Picture" id="GetImage">

             </div>

         </div>

      </div>

</div>
  • USER.jpg is a dummy image.

  • Remove all the content of index.css and add following style
body, html {

    height: 100%;

    background-repeat: no-repeat;

    background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));

}

/**

 * Profile image component

 */

.profile-header-container {

    margin: 0 auto;

    text-align: center;

}

.profile-header-img {

    padding: 54px;

}

    .profile-header-img > img.img-circle {

        width: 120px;

        height: 120px;

        border: 2px solid #51D2B7;

    }

.profile-header {

    margin-top: 43px;

}

/**

 * Ranking component

 */

.rank-label-container {

    margin-top: -19px;

    /* z-index: 1000; */

    text-align: center;

}

.label.label-default.rank-label {

    background-color: rgb(81, 210, 183);

    padding: 5px 10px 5px 10px;

    border-radius: 27px;

}
  • final Index.htm willl look like:
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta name="format-detection" content="telephone=no">

    <meta name="msapplication-tap-highlight" content="no">

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <link rel="stylesheet" type="text/css" href="css/index.css">

    <title>ImageUploadCordova</title>

</head>

<body>

    <div class="row">

        <div class="profile-header-container">

            <div class="profile-header-img">

                <div id="image">

                    <img class='img-circle' width='120' height='120' src='images/USER.jpg' />

                </div>

                <div class="rank-label-container">

                    <input type="button" value="Update Profile Picture" id="GetImage">

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript" src="cordova.js"></script>

    <script type="text/javascript" src="scripts/platformOverrides.js"></script>

    <script type="text/javascript" src="scripts/index.js"></script>

</body>

</html>
  • final Index.js look like:
(function () {

    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {

        document.getElementById("GetImage").addEventListener("click", GetImage);

    };

})();

function GetImage() {

    navigator.camera.getPicture(function (imageUri) {

        var CapturePhoto = document.getElementById("image");

        alert("Photo Captured");

        CapturePhoto.innerHTML = "<img class='img-circle' width='120' height='120' src='" + imageUri + "' />'";

        uploadPhoto(imageUri);

    }, null, null);

}

function uploadPhoto(imageURI) {

    var options = new FileUploadOptions();

    options.fileKey = "files";

    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);

    options.mimeType = "image/jpeg";

    console.log(options.fileName);

    var ft = new FileTransfer();

    ft.upload(imageURI, "http://192.168.1.66:8084/api/image", function (result) {

        console.log(JSON.stringify(result));

        alert(JSON.stringify(result));

    }, function (error) {

        console.log(JSON.stringify(error));

        alert(JSON.stringify(result));

    }, options);

}

In Index.js, you can see two methods firstly, GetImage for capturing image from Camera and secondly, UploadImage for uploading image to our web api. http://192.168.1.66:8084 is my local IIS server address.

Output:

  • Tap on Upload Profile Picture.
  • Choose camera
  • Take a picture.

Server Side Output:

  • Open your IIS.
  • Right click on your webAPI and click on Explore.

  • Finally, image is uploaded on Server Folder.

Summary:

In this article, we learned how to Upload Image using Cordova Camera plugin and File Transfer Plugin with ASP.Net core web API on Server Side.

Cordova Upload Images using File Transfer Plugin and .Net core WebAPI的更多相关文章

  1. cordova之File Transfer (Permission denied) 权限导致下载失败 - 简书

    原文:cordova之File Transfer (Permission denied) 权限导致下载失败 - 简书 在文件上传时,由于权限问题,会报错(Permission denied),安卓6. ...

  2. FTP（File Transfer Protocol）是什么？

    文件传输协议 FTP(File Transfer Protocol),是文件传输协议的简称.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application).用户可以通过 ...

  3. Android File Transfer Mac: 如何在 macOS 和 Android 系统之间移动数据

    三大 Mac OS X 系统 Android 文件传输软件 谷歌出品的 Android File Transfer 如何在 Mac 系统上使用 Android File Transfer Androi ...

  4. PAT 5-8 File Transfer (25分)

    We have a network of computers and a list of bi-directional connections. Each of these connections a ...

  5. 让 File Transfer Manager 在新版本WIndows上能用

    最近研究.NET NATIVE,听说发布了第二个预览版,增加了X86支持,所以下,发现连接到的页面是:https://connect.microsoft.com/VisualStudio/Downlo ...

  6. PAT 05-树7 File Transfer

    这次的题让我对选择不同数据结构所产生的结果惊呆了,一开始用的是结构来存储集合,课件上有现成的,而且我也是实在不太会,150ms的时间限制过不去,不得已,看到这题刚好可以用数组,结果7ms最多,有意思! ...

  7. 05-树8 File Transfer

    并查集 简单并查集:输入N,代表有编号为1.2.3……N电脑.下标从1开始.初始化为-1.合并后根为负数,负数代表根,其绝对值代表个数. We have a network of computers ...

  8. Can't find file: './mysql/plugin.frm' (errno: 13)[mysql数据目录迁移错位]错误解决

    大概需要4个步骤,其中第1步通过service mysql stop停止数据库,第4步通过service mysql start启动数据库. 第2步移动数据文件,不知道是否为Ubuntu智能的原因,移 ...

  9. File Transfer

    本博客的代码的思想和图片参考:好大学慕课浙江大学陈越老师.何钦铭老师的<数据结构> 代码的测试工具PTA File Transfer 1 Question 2 Explain First, ...

随机推荐

  1. netty的好处

    netty作为一个高性能的异步通信框架,它到底有哪些好处了,又用到哪些基础技术呢? 1.使用ServerBootstrap 作为netty服务端的启动辅助类,并且在创建ServerBootstrap时 ...

  2. web服务器负载均衡与集群基本概念二

    前面已经说过负载均衡的作用是在多个节点之间按照一定的策略(算法)分发网络或计算处理负载.负载均衡可以采用软件和硬件来实现.一般的框架结构可以参考下图.    后台的多个Web节点上面有相同的Web应用 ...

  3. 【土旦】在vue filters中 优雅的使用对象的key、value来替换 if switch多重判断简化流程

    前言 之前写过滤器的时候都是 用 if switch 来进行值的判断 返回对应的值, 在没去百度搜索之前都是都是这样写的 ) { return "支付成功"; } ) { retu ...

  4. 服务器端Session和客户端Session

    客户端Session和服务器端Session 当用户首次与web服务器建立连接的时候,服务器会给用户分发一个SessionID作为标识.SessionID是一个由24个字符组成的随机字符串.用户每次提 ...

  5. SAP HUM 拆包之后的HU号码依旧存在

    比如HU 194811210666,已经被执行了Unpack操作. HUMO看这个HU号码, 执行, 可以发现,这个HU是空的,里面什么都没有. 双击HU号码,进入HU显示界面, 系统状态竟然是PHE ...

  6. 开始食用grpc(之二)

    开始食用grpc(之二) 转载请注明出处:https://www.cnblogs.com/funnyzpc/p/9570992.html ``` 前段时间有童鞋找我开专栏.搬家.甚至还有人找我写书的. ...

  7. MySQL 关于性能的参数配置梳理

    以下List是我们常见的MySQL参数配置,这个参数对提高实例的性能大有裨益. 其中 建议设置值,仅供参考,需要根据自己的业务场景和硬件资源仔细推敲. 参数 设置说明 建议设置值 lower_case ...

  8. C#语言中的修饰符

    public:公有访问.不受任何限制. private:私有访问.只限于本类成员访问,子类和实例都不能访问. protected:保护访问.只限于本类和子类访问,实例不能访问. internal:内部 ...

  9. scrapy安装失败：error:Microsoft Visual C++ 14.0 is reuired.及同类型安装问题解决办法

    今天在安装scrapy的时候(pip install Scrapy),出现了如下错误: building 'twisted.test.raiser' extensionerror: Microsoft ...

  10. C# -- 使用FileInfo获取文件信息

    C# -- 使用FileInfo获取文件信息 1. 代码实现 static void Main(string[] args) { GetFileInfo(@"D:\Test.xlsx&quo ...