Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Pattern: File Upload

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot fixing redirect link.(Moving links from forum.nokia.com TO developer.nokia.com))
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(2 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.2 -->
[[Category:Mobile_Design_Patterns]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090615
 +
|author= [[User:Jappit]]
 +
}}
 +
 
 +
[[Category:Mobile Design Patterns]]
  
 
==Description==
 
==Description==
Line 10: Line 32:
 
An example of single file upload is visible in the [http://www.jappit.com/blog/2008/06/25/flikun-kunerilite-based-flashlite-photo-uploader-for-flickr/ Flikun] client, a photo uploader for Flickr:
 
An example of single file upload is visible in the [http://www.jappit.com/blog/2008/06/25/flikun-kunerilite-based-flashlite-photo-uploader-for-flickr/ Flikun] client, a photo uploader for Flickr:
  
[[Image:File_upload_flikun.png]]
+
[[File:File upload flikun.png]]
  
 
==Multiple files upload==
 
==Multiple files upload==
Line 17: Line 39:
 
An example of multiple file uploads is visible in the '''[http://www.shozu.com/portal/ Shozu] mobile client''':
 
An example of multiple file uploads is visible in the '''[http://www.shozu.com/portal/ Shozu] mobile client''':
  
[[Image:Multiple uploads shozu.png]]
+
[[File:Multiple uploads shozu.png]]
  
 
==Upload progress status==
 
==Upload progress status==
 
Both in single and multiple file uploads, it is '''good practice''' to give to the user a '''clear indication of the upload progress status'''.
 
Both in single and multiple file uploads, it is '''good practice''' to give to the user a '''clear indication of the upload progress status'''.
  
[[Image:File_upload_progress.png]]
+
[[File:File upload progress.png]]
  
 
This can be done in different ways, depending on the available information about the upload status:
 
This can be done in different ways, depending on the available information about the upload status:
Line 31: Line 53:
 
For '''multiple file uploads''', a '''dedicated view''' is typically used to give detailed information about the status of each upload. This view should give to the user clear information about '''which files have already been uploaded''', which are '''currently uploading''', and which are '''waiting to be uploaded'''.
 
For '''multiple file uploads''', a '''dedicated view''' is typically used to give detailed information about the status of each upload. This view should give to the user clear information about '''which files have already been uploaded''', which are '''currently uploading''', and which are '''waiting to be uploaded'''.
  
Detailed explanation of '''progress and wait indicators''' is available on this Forum Nokia Wiki article: [[Mobile Design Pattern: Progress and Wait Indicator]]
+
Detailed explanation of '''progress and wait indicators''' is available on this Nokia Developer Wiki article: [[Mobile Design Pattern: Progress and Wait Indicator]]
  
  
Line 50: Line 72:
 
* using '''[http://library.developer.nokia.com/index.jsp?topic=/Java_Developers_Library/GUID-0D0A1092-5037-4421-B466-B958CB777414/javax/microedition/io/HttpConnection.html HttpConnection]''' or '''[http://library.developer.nokia.com/index.jsp?topic=/Java_Developers_Library/GUID-0D0A1092-5037-4421-B466-B958CB777414/javax/microedition/io/SocketConnection.html SocketConnection]''' instances to transfer the file bytes to the remote server
 
* using '''[http://library.developer.nokia.com/index.jsp?topic=/Java_Developers_Library/GUID-0D0A1092-5037-4421-B466-B958CB777414/javax/microedition/io/HttpConnection.html HttpConnection]''' or '''[http://library.developer.nokia.com/index.jsp?topic=/Java_Developers_Library/GUID-0D0A1092-5037-4421-B466-B958CB777414/javax/microedition/io/SocketConnection.html SocketConnection]''' instances to transfer the file bytes to the remote server
  
An example of file uploads in Java ME that uses the HttpConnection object is available in this Forum Nokia Wiki article: [[HTTP Post multipart file upload with J2ME]]
+
An example of file uploads in Java ME that uses the HttpConnection object is available in this Nokia Developer Wiki article: [[HTTP Post multipart file upload in Java ME]]
  
 
===Flash Lite===
 
===Flash Lite===
Line 66: Line 88:
 
===Python===
 
===Python===
 
The following articles show how to '''browse files''' on device's file system, and how to '''upload them to a remote server''' in Python:
 
The following articles show how to '''browse files''' on device's file system, and how to '''upload them to a remote server''' in Python:
* [[File Selection in Python]]
+
* [[File Selection in PySymbian]]
 
* [[How to upload a file to server with application/x-www-form-urlencoded]]
 
* [[How to upload a file to server with application/x-www-form-urlencoded]]
 
* [[How to upload a file to server with multipart/form-data]]
 
* [[How to upload a file to server with multipart/form-data]]

Latest revision as of 03:26, 9 May 2012

Article Metadata
Article
Created: jappit (15 Jun 2009)
Last edited: hamishwillee (09 May 2012)

Contents

[edit] Description

File uploads allow users to upload files from their devices to a remote server, directly from a mobile application.

[edit] Single file upload

The simplest scenario is the upload of a single file. The user is typically required to select a file, by browsing files available on his device, and then confirm the upload by pressing a button or softkey. Sometimes, the user is allowed to compile some other meta-data fields, with data that will be sent to the remote server together with the uploaded file.

An example of single file upload is visible in the Flikun client, a photo uploader for Flickr:

File upload flikun.png

[edit] Multiple files upload

A more complex approach to file uploads is represented by the upload of more files. The user is requested to choose one or more files from his device, and then starts the upload. Typically, multiple files upload is supported by detailed progress information about the upload of each file.

An example of multiple file uploads is visible in the Shozu mobile client:

Multiple uploads shozu.png

[edit] Upload progress status

Both in single and multiple file uploads, it is good practice to give to the user a clear indication of the upload progress status.

File upload progress.png

This can be done in different ways, depending on the available information about the upload status:

  • If the percentage of the file already uploaded is known, a visual representation of this percentage is shown (e.g.: by using a progress bar or a similar indicator).
  • If there's no information about the uploaded percentage, then a generic animated indicator is used, to notify the user about the ongoing upload

For multiple file uploads, a dedicated view is typically used to give detailed information about the status of each upload. This view should give to the user clear information about which files have already been uploaded, which are currently uploading, and which are waiting to be uploaded.

Detailed explanation of progress and wait indicators is available on this Nokia Developer Wiki article: Mobile Design Pattern: Progress and Wait Indicator


[edit] Use when

File uploads are useful in all those situations where a file must be transferred to a remote server. Sample scenarios include:

  • a mobile client for a community, that offers to mobile users to upload photos and videos directly from their devices
  • a client allowing users to backup files on a remote server
  • FTP clients

[edit] Use how

File uploads can be differently handled and implemented depending on the technology used in a mobile application. Since file uploads require the capability for the users to choose one or more files from their devices, the used technology must provide some sort of access to the underlying file system.

An usual approach to implement file uploads is represented by HTTP MultiPart POST requests, the same method used by website forms to upload files. Other possible approaches include FTP transfers, or direct Socket connections.

[edit] Java ME

Java ME applications can allow users to upload files by:

An example of file uploads in Java ME that uses the HttpConnection object is available in this Nokia Developer Wiki article: HTTP Post multipart file upload in Java ME

[edit] Flash Lite

Flash Lite does not natively support functionalities that allow file uploads. But this is possible, on specific subsets of devices, through third-party plugins.

An example is represented by KuneriLite, that allows file uploads by using the following plugins:

An example of file upload implemented with Flash Lite and the KuneriLite plugins is the Flikun client.

[edit] Symbian C++

A detailed example showing how to upload files in Symbian C++, by using the multipart approach, is available here: Symbian C++ : Multipart/form-data

[edit] Python

The following articles show how to browse files on device's file system, and how to upload them to a remote server in Python:

[edit] Web Runtime

The following article explains how to upload files from a Web Runtime widget: How to upload files from a Web Runtime widget

[edit] Design tips

  • While performing a file upload, leave the user interface responsive, to allow the user to continue using the application
  • Give the user the possibility to cancel an ongoing upload with a clearly visible cancel option
  • Notify the user about the upload progress status
This page was last modified on 9 May 2012, at 03:26.
90 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×