×
Namespaces

Variants
Actions

Upload multiple files to a webserver

From Nokia Developer Wiki
Jump to: navigation, search

There are situations when you would like to send multiple files to your web server, within one batch transfer. This Wiki article presents one way to do it.

Article Metadata
Tested with
SDK: Aptana Studio (build: 1.5.1.026124), Nokia Web Runtime plug-in for Aptana Studio (Version 2.2.0.v20090929171735)
Devices(s): Nokia N97
Article
Created: Maveric (01 Jun 2010)
Last edited: hamishwillee (05 Jul 2012)


Contents

Prerequisites

- Web server with sufficient user rights and PHP support configured (localhost or remote) - Mobile device with WRT support or development environment with emulator


Example widget

This widget consists of three files:

* HTML        index.html  
* JavaScript  basic.js
* PHP         upload.php  (server side script)


The html file contains a web form, and will call a function in the JavaScript file upon initialization. In the Javascript file is handled both adding new files by browsing them as well as file deletion. All files collected will be added to an array, which is then sent sent to the web server using the POST method to be processed by the server side PHP script. The PHP script will create temporary files of the data received first, add information like creation date and then use the newly formed filename to copy it to the specific web server folder. On a remote web server the folder needs to be enabled with Web Read/Write permission. Further, the script will perform a couple of checks; if the file is empty or too big. The size value can be set to any value that is seen an absolute maximum allowed.

Notes:

  • Remember to replace the <URI_of_your_web_server> with the address of your web server, local or remote.
  • For the PHP script note the path encoded in the example and edit it according to your needs.
  • The default onload="javascript:init() call is replaced.
  • Package the index.html and basic.js to a WRT widget as you normally would.
  • When the widget is started, the user would browse for a filename. To add new files, each click of "Add new" button will create another "Select file" box with a "Delete" button added. A file can be deleted down to the initial first file select box (which cannot be deleted). Finally, clicking the "Upload" button will transfer the list of files to the web server to be post processed by the PHP script. The iFrame component will collect the response from the server for informational purposes. When the script on the serverside has been finished, a text "Processing finished." should appear to the frame area. Also, the PHP script has a setting enabled, called error_reporting (E_ALL). This means that if any errors are encountered during post processing, that would be echoed back to the widget.
  • In all, only minimal checking for errors is included.


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Uploader form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<link rel="stylesheet" href="basic.css" type="text/css">
</head>
<body>
<form name="upload" target="upresult" action="<URI_of_your_web_server>upload.php"
method="POST" enctype="multipart/form-data"><input name="up_these_files[]" type="file" /><br /><input name="addFiles" value="Add new" onClick="window.addFiles(this)" type="button" /><input value="Upload" name="upload" type="submit" />
</form>
</body>
<p><iframe name="upresult" style="display: block" height="160" width="220"></iframe></p>
<div id="upresult"></div>
</html>


basic.js

function addFiles(addFileButton)
{
var form = document['upload'];
var files = document.createElement("input");
files.type="file";
files.name="up_these_files[]";
var file_delete = document.createElement("input");
file_delete.type="button";
file_delete.value="Delete";
 
file_delete.onclick = function() {
form.removeChild(this.previousSibling);
form.removeChild(this.nextSibling);
form.removeChild(this);
}
 
form.insertBefore(files, addFileButton);
form.insertBefore(file_delete, addFileButton);
form.insertBefore(document.createElement("br"), addFileButton);
}


upload.php

<?php
error_reporting (E_ALL);
 
if (isset($_POST['upload']))
{
for ($i = count($_FILES['up_these_files']['tmp_name']) - 1; $i>=0; $i--)
{
 
if ($_FILES['up_these_files']['error'][$i] == 0 && $_FILES['up_these_files']['size'][$i] <= 5000000)
{
if ($img = getimagesize($_FILES['up_these_files']['tmp_name'][$i]))
{
$newdir = "./web/uploads/".time().$_FILES['up_these_files']['name'][$i];
 
move_uploaded_file($_FILES['up_these_files']['tmp_name'][$i], $newdir);
}
}
}
}
echo 'Processing finished.';
 
?>
This page was last modified on 5 July 2012, at 05:37.
91 page views in the last 30 days.
×