Skip to content
This repository has been archived by the owner on Oct 25, 2022. It is now read-only.

Home

Jump to bottom
Aparajita Fishman edited this page Jun 13, 2014 · 18 revisions

Getting Started

Thanks for checking out Cup, the ultimate file upload framework for Cappuccino. Cup is a Cappuccino UI and controller for the jQuery File Upload library, a robust, feature-rich jQuery-based file uploader.

Special thanks to Todd Freese and Filmworkers Club for funding development.

After installing, you will want to take a look at:

Installation

To install Cup, first you will need to get the source from github. Do one of the following:

  • Click the ZIP button to download the source.
  • Clone the source locally with git clone https://github.com/aparajita/Cup.git.

Once you have the source, you have a choice as to how you want to use Cup, in source form or in compiled form.

Source

Symlink or copy the Cup directory into the Frameworks and Frameworks/Debug directories of your app.

Compiled

First you need to compile Cup. In a terminal:

cd Cup
jake all

This will build the debug and release frameworks into your $CAPP_BUILD directory. To use the compiled frameworks:

cd /path/to/project
capp gen -lf -F Cup .

Now you have to load some Javascript. Add these lines before the Objective-J.js <script> tag in index-debug.html:

<script src="Frameworks/Debug/Cup/Resources/js/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="Frameworks/Debug/Cup/Resources/js/vendor/jquery.ui.widget.js" type="text/javascript" charset="UTF-8"></script>
<script src="Frameworks/Debug/Cup/Resources/js/jquery.iframe-transport.js" type="text/javascript" charset="UTF-8"></script>
<script src="Frameworks/Debug/Cup/Resources/js/jquery.fileupload.js" type="text/javascript" charset="UTF-8"></script>

Now add these lines before the Objective-J.js <script> tag in index.html:

<script src="Frameworks/Cup/Resources/js/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="Frameworks/Cup/Resources/js/vendor/jquery.ui.widget.js" type="text/javascript" charset="UTF-8"></script>
<script src="Frameworks/Cup/Resources/js/jquery.iframe-transport.js" type="text/javascript" charset="UTF-8"></script>
<script src="Frameworks/Cup/Resources/js/jquery.fileupload.js" type="text/javascript" charset="UTF-8"></script>

Server Setup

Cup handles the client side, but you need some code on the server side to handle the uploads in the way that the jQuery File Upload library expects. I recommend the PHP-based server, it is easy to set up and supports chunked uploads.

  1. To get the code, first download jQuery File Upload: https://github.com/blueimp/jQuery-File-Upload/archive/master.zip
  2. Cup does not yet support thumbnails, so we have to disable that feature. Open server/php/UploadHandler.php and comment out all of these lines (starting around line 103): 
    'thumbnail' => array(
    // Uncomment the following to force the max
    // dimensions and e.g. create square thumbnails:
    //'crop' => true,
    'max_width' => 80,
    'max_height' => 80
)
  3. Copy the files from the server/php folder to the web server that will handle uploads.
  4. Set up your web server to point to the directory where those files are residing.

Using Cup with Xcode

Cup was designed from the ground up to be configured completely in Xcode. Typically you can do 90% or more of the configuration for Cup without any code!

If you are using a compiled version of Cup in your Frameworks, to use it with Xcode you will want to symlink to the source as well, as XcodeCapp 3 will generate class information that allows you to use the outlets, actions, bindings and resources from the framework. In a terminal, type this:

cd /path/to/project/Frameworks
mkdir Source
cd Source
ln -s /path/to/Cup

Then open your project in XcodeCapp and select “Synchronize Project” from the XcodeCapp menu. To see how to build an upload application using Cup and Xcode, take a look at the screencast.

If you are using the Frameworks/Source directory, you may have to update your app’s Jakefile to exclude that directory from building. Open the Jakefile and look for the line:

task.setSources((new FileList("**/*.j")).exclude(FILE.join("Build", "**")));

Change that line to:

task.setSources(new FileList("**/*.j").exclude(FILE.join("Build", "**")).exclude(FILE.join("Frameworks", "Source", "**")));

Future Enhancements

There are more features in jQuery File Upload which are not yet supported, such as resumable uploads and image previews. If you need that for your project and would like to fund development, please contact me privately.

Clone this wiki locally