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. 简述java接口和C++虚类的相同和不同之处

    C++虚类相当于java中的抽象类,与接口的不同处是: 1.一个子类只能继承一个抽象类(虚类),但能实现多个接口 2.一个抽象类可以有构造方法,接口没有构造方法 3.一个抽象类中的方法不一定是抽象方法 ...

  2. MongoDB学习（操作集合中的文档）

    文档概念 文档的数据结构和JSON基本一样. 所有存储在集合中的数据都是BSON格式. BSON是一种类json的一种二进制形式的存储格式,简称Binary JSON. 插入文档 insert()方法 ...

  3. 弹性布局--flex方向

    flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式.flex-direction共有4种模式:从左向右.从右向左.从上往下.从下往上. 主轴 主轴的起点与终点定义了 ...

  4. Django常见问题

    1.什么是中间件? 中间件是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出. 中间件一般做认证或批量请求处理,django中的中间 ...

  5. Mac电脑 怎么导出安卓手机的相册

    1.mac上下载一个HandShaker 2.把电脑和手机设置在同一个wifi下 3.安卓手机上下载一个HandShaker 参考:https://zhidao.baidu.com/question/ ...

  6. No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android"

    安装完NDK的时候出现了这个错误,网上的办法是下载旧版的NDK,将其中的toolchain复制到新版的NDK中. 但其实不用这么麻烦. 经过对新版NDK的研究,发现NDK的更新记录里有一段话 This ...

  7. 数据结构：关键路径，利用DFS遍历每一条关键路径JAVA语言实现

    这是我们学校做的数据结构课设,要求分别输出关键路径,我查遍资料java版的只能找到关键路径,但是无法分别输出关键路径 c++有可以分别输出的,所以在明白思想后自己写了一个java版的 函数带有输入函数 ...

  8. UE4游戏开发基础命令

    在个人的Unrealengine账户中关联自己的GitHub账户成功之后,就可以访问UE4引擎的源码了. git clone -b release https://github.com/EpicGam ...

  9. Hive分桶

    1.简介 分桶表是对列值取哈希值的方式将不同数据放到不同文件中进行存储.对于hive中每一个表,分区都可以进一步进行分桶.由列的哈希值除以桶的个数来决定数据划分到哪个桶里. 2.适用场景 1.数据抽样 ...

  10. spark als scala实现(二)

    Vi  t1.txt1,101,5.01,102,3.01,103,2.52,101,2.02,102,2.52,103,5.02,104,2.03,101,2.53,104,4.03,105,4.5 ...