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. kubernetes系列11—PV和PVC详解

    本文收录在容器技术学习系列文章总目录 1.认识PV/PVC/StorageClass 1.1 介绍 管理存储是管理计算的一个明显问题.该PersistentVolume子系统为用户和管理员提供了一个A ...

  2. 限制TextBox只允许输入数字和字母

    设置TextBox控件属性 ImeMode=Disable ShortcutsEnabled=False VB.NET Private Sub TextBox1_KeyDown(sender As O ...

  3. WCF优雅使用 KnownType标记的方法

    [KnownType("DerivedTypes")] [DataContract] public abstract class TaskBase { // other class ...

  4. [转]Uipath、BluePrism、AA产品对比之设计器篇

    本文转自:https://www.jianshu.com/p/53d0d33a1a35 版本说明: Uipath V2018.3.2,BluePrism V6.3,Automation Anywher ...

  5. oracle学习笔记（二） 基本数据类型

    常用的数据类型 int number number(4,1) 999.1 四个数字,小数位一位 decimal date 日期 格式如下: 注意:日期类型的字段格式,可以通过以下三种方式: 1. da ...

  6. vue学习之ajax 简单快速使用axios

    vue2.x 推荐使用axios 1.首先使用安装 npm install axios -S 2.在哪用在哪引入 import axios from 'axios' 或则在main.js 中引入 在申 ...

  7. Python查找指定文件

    在当前目录以及当前目录的所有子目录下查找文件名包含指定字符串的文件,并打印出相对路径: import os testfiles = [] testfilepaths = [] L = len(os.p ...

  8. 华途软件受控XML转EXCEL

    公司加密系统用的是华途的产品.最近公司高层想要重新梳理公司信息安全管理情况,华途加密系统的梳理和优化是重中之重. 今天公司领导要求IT导出目前系统中所有软件.后缀的受控情况,然后IT吭哧吭哧地把华途软 ...

  9. 生鲜配送管理系统_升鲜宝V2.0 价格组功能 操作说明_15382353715

    价格组功能是B端供应链系统,必不可少的一个功能,其主要实现不同的客户不同的价格,B端系统有一个最大的不同就是,有些商品后台下单人员能看到的.有些商品在销售的那一瞬间,还不知道价格.所以这些商品只有后台 ...

  10. 解决OracleOraDb10g_home1TNSListener服务无法启动

    造成OracleOraDb10g_home1TNSListener服务无法启动可能有三种情况: listener.ora文件配置有错误导致无法启动 相关环境变量没设置好 删除客户端时导致服务端相关注册 ...