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. vue 回到页面顶部

    模仿Element-UI 回到页面顶部 BackToTop.vue <template> <transition :name="transitionName"&g ...

  2. 认识JWT

    1. JSON Web Token是什么 JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该 ...

  3. django-restframework之缓存系统

    django-restframework之缓存系统 一 前言 一 为什么需要缓存 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增.删.查.改,渲染模块,执行业务逻辑,最后生成用户看到的 ...

  4. AOP面向切面编程C#实例

    原创: eleven 原文:https://mp.weixin.qq.com/s/8klfhCkagOxlF1R0qfZsgg [前言] AOP(Aspect-Oriented Programming ...

  5. oracle非正常退出后重启实例

    sqlplus /nolog 回车 conn / as sysdba 回车 startup 回车(如果被告知已启动,应先执行 shutdown immediate 回车)

  6. 单机Qps上限是多少？

    现在这个年代,你要是不懂高并发,你都不好意思说自己是搞互联网的! 一.什么是并发,什么是高并发 并发,两个及以上的行为一起发生,比如你一边吃饭一边看电视 高并发,多个行为(至于是多少,这个没有定数,你 ...

  7. 如何利用GitHub设计一个炫酷的个人网站（含代码）

    1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...

  8. Openlayers系列（一）关于地图投影相关错误的解决方案

    背景 近期开发以MongoDB为基础的分布式地理数据管理平台系统,被要求做一个简单的demo给客户进行演示.于是笔者便打算向数据库中存储一部分瓦片数据,写一个简单的存取服务器,使用Openlayers ...

  9. Android为TV端助力 listview与recyclerview上下联动

    首先是主布局fragment里面的xml文件 <?xml version="1.0" encoding="utf-8"?><RelativeL ...

  10. Testlink插件工具

    目的: 使用Testlink时间长了,会发现有些功能体验不是很好,比如用例编写就无法快速复制,且展示能力很弱 使用对象: 测试人员.测试leader,技术经理 xmind2testlink:xmind ...