Hello friend,
So you want to upload images using Cordova ?. Here I have written a simplified tutorial for uploading images with PHP backend also we have used camera plugin as image picker and cordova-plugin-filetransfer plugin for connecting remote server
Requirements
- PHP based Web Server (you can use local web servers)
- Cordova Camera Plugin (cordova-plugin-camera)
- Cordova File Transfer Plugin (cordova-plugin-filetransfer)
Steps
- Writing Simple PHP code for receiving files from Mobile App
- Camera Plugin is used for accessing mobile Gallery
- Upload Images using File transfer plugin
Writing server-side code
Let's start with server-side, I have a very simple PHP code which receives file & stores it on uploads folder.so you must create uploads/ folder
<span class="php"><span class="hljs-meta"><?php</span>
header(<span class="hljs-string">'Access-Control-Allow-Origin: *'</span>);
$new_image_name = urldecode($_FILES[<span class="hljs-string">"file"</span>][<span class="hljs-string">"name"</span>]).<span class="hljs-string">".jpg"</span>;
move_uploaded_file($_FILES[<span class="hljs-string">"file"</span>][<span class="hljs-string">"tmp_name"</span>], <span class="hljs-string">"uploads/"</span>.$new_image_name);
<span class="hljs-meta">?></span></span>
Important: Create a New Upload folder
Working with Cordova (PhoneGap)
Let's start with mobile app side.so we can start with creating a new Cordova project and add required platforms and plugins. Here we need to also need add camera plugin (cordova-plugin-camera) for taking a picture from the camera (Refer: https://codesundar.com/cordova-plugin-camera/ for more information about camera plugin) & File transfer plugin (cordova-plugin-filetransfer) for uploading pictures to a web server.
cordova <span class="hljs-keyword">create</span> FileTransfer com.codesundar.filetransfer FileTransfer
cd FileTransfer
cordova platform <span class="hljs-keyword">add</span> android
cordova <span class="hljs-keyword">plugin</span> <span class="hljs-keyword">add</span> cordova-<span class="hljs-keyword">plugin</span>-camera
cordova <span class="hljs-keyword">plugin</span> <span class="hljs-keyword">add</span> cordova-<span class="hljs-keyword">plugin</span>-<span class="hljs-keyword">file</span>-transfer
2. Accessing Gallery using Camera Plugin
navigator.camera.getPicture(uploadPhoto, function(message) {
<span class="hljs-attribute">alert('get picture failed');
}, {
quality</span>: 100,
destinationType: navigator<span class="hljs-variable">.camera</span><span class="hljs-variable">.DestinationType</span><span class="hljs-variable">.FILE_URI</span>,
sourceType: navigator<span class="hljs-variable">.camera</span><span class="hljs-variable">.PictureSourceType</span><span class="hljs-variable">.PHOTOLIBRARY</span>
});
uploadPhoto is a success callback function & SourceType PHOTOLIBRARY used for accessing photo gallery
3. Uploading File to Remote Server
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>File Transfer Example<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
<span class="hljs-keyword">var</span> camearaOptions = {
<span class="hljs-attr">quality</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">destinationType</span>: navigator.camera.DestinationType.FILE_URI,
<span class="hljs-attr">sourceType</span>: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getImage</span>(<span class="hljs-params"></span>) </span>{
navigator.camera.getPicture(uploadPhoto, onError, camearaOptions);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onError</span>(<span class="hljs-params">err</span>) </span>{
alert(error);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">uploadPhoto</span>(<span class="hljs-params">imageURI</span>) </span>{
<span class="hljs-keyword">var</span> options = <span class="hljs-keyword">new</span> FileUploadOptions();
options.fileKey = <span class="hljs-string">"file"</span>;
options.fileName = imageURI.substr(imageURI.lastIndexOf(<span class="hljs-string">'/'</span>) + <span class="hljs-number">1</span>);
options.mimeType = <span class="hljs-string">"image/jpeg"</span>;
<span class="hljs-keyword">var</span> ft = <span class="hljs-keyword">new</span> FileTransfer();
ft.upload(imageURI, <span class="hljs-string">"http://192.168.1.4/phonegap/upload/upload.php"</span>,
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">JSON</span>.stringify(result));
},
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">JSON</span>.stringify(error));
}, options);
}
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"getImage()"</span>></span>Upload a Photo<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
Cheers! Hope this helps.
If you faced any issue feel free to comment below.