Client side uploads

From Wikanual

Jump to: navigation, search

You can easily allow your clients to also upload content via the client interface.

Contents

Enabling Client Side Uploads

To enable uploads on the client pages of a login go to

 Logins 

and then click on the

 enable upload 

button for that login.

A new upload link will appear on your client facing INTERDUBS pages.


Should you want to disable the upload feature again click on the

 disable upload


When a client upload is finished INTERDUBS will send notification via email to the people listed in the 'sender email address.

You can change the format of these mails as described in client upload notification email

Example applications

Client side uploads can be used in a multitude of scenarios. Here some examples to give you an idea how you maybe could adopt this look for your purposes.

Resume / reel submission

You can feature on your public website a link that lets people upload their resumes. Since you use an Upload only look they can not see what others have posted. It is helpful that you can add categories in the form text of the upload. For example can you ask for "contact", "experience" etc.

Having potential employees upload their reels to INTERDUBS is beneficial since you can watch them in the fast context of the systems.

When you can point a second login with normal settings to the same folder then you can use this to communicate internally about the candidates and their work.

Project collaboration

In a project you can create a folder dedicated to material that people deliver to you for a project. Adding a login to this folder that has uploads enabled will allow you easily gather work content.


Client upload methods

There are three different client side upload methods available. From oldest to newest these are:

Form based upload
Classic Drag and Drop
Drag and Drop2

Usually the latest method method (referred to as drag and drop2) has the most benefits:

No file size limit
Accelerated uploads via multiple streams
Recursive Folder uploads (Chrome Version 22 or higher required)

Classic Drag and Drop is helpful when a browser does not support the modern Drag and Drop2 upload.

The Form based uploader can be helpful in special cases: t allows a client to leave a file with a note and also allows her to assign a name to the uploaded file. The new file can be put into a new folder. The form can be configured to have certain elements. An example would be a submission form that requires the uploading person to leave a valid email address together with the file. Get in touch or see below for details.


HTML for client uploads

The look and feel of the client upload pages is being controlled via the following configuration settings.

HTML client drag and drop2

The default configuration looks like this:

IDXHTML_DNDU2MAIN


<script>
$j(document).ready(function() {
$j('#dragtext').css('color' ,'IDXHTML_TXTCOL');
$j('#dragtext').css('background' ,'IDXHTML_BGCOL');
})
</script>

Only the keyword

IDXHTML_DNDU2MAIN

is needed. The jquery part below will color the txt and background color of the Upload title. Please note that INTERDUBS client pages use jquery in non-conflict mode by calling it via

$j


HTML Classic Drag and Drop

In order to configure the look and feel of the classic Drag and drop uploads a client page needs certain HTML elements.

The elements on the default page are:

 <STYLE type="text/css">
 #drop-area{border:2px solid #333333;padding:10px;background-size:contain;min-height:70px;overflow:auto; width:616px;}
 #drop-area.hover{border:2px dashed red} 
 #drop-area div{width:136px;height:136px;border:1px solid #CCC;padding:5px;background-position:center;background-repeat:no-repeat;background-size:contain;float:left;margin:2px;word-wrap:break-word}
 #progbar{width:640px; background-color: #ffffff; height:8px; padding-top: 5px; padding-bottom: 12px;}
 #statusdd {background-color:#ccccff;color:#000000;padding:5px 20px; width: 600px;}
 </STYLE>
 
 <div style="">
 <div id=statusdd><img src="/fic/arrow_up.png"> Drag and Drop files below to upload them</div>
 <div id=progbar><img style="padding-left: 4px;" src="/fic/pbl.png"><img id="pbm" style="height: 8px;" src="/fic/pbm.png"><img src="/fic/pbr.png"><img id="pgm" style="height: 8px;"  src="/fic/pgm.png"><img src="/fic/pgr.png"></div>
 <div id="drop-area"><div id="drag-bg" style="border:0px; width: 100%; padding: 0px; margin: 0px; color: #ffeeee; font-size: 40px; text-align: center;"> <br><br>Drag files here</div></div>
 <br>
 <br>
 
<input type="checkbox" id="ifemailnotif" name="ifemailnotif" value="1" CHECKED> 
notify 
<input type="text" id="emailnotif" name="emailnotif" style="width: 300px;" value="IDXHTML_CL2EMAILS" "> when uploads are done<br> 
<br>

 </div>
 IDXHTML_DNDUPLOADJS

Altering these elements might lead to functionality loss of the uploader.

The keyword IDXHTML_CL2EMAILS will be replaced by the sender email address of the login. The client can control email notifications after the drag and drop upload is completed via the html form. Alternatively you can set those parameters via from input of the type hidden.

The text configured here will be placed where the keyword

IDXHTML_CONTENT

appears in the HTML content configuration.

HTML Form upload body

Similar to HTML content body this controls the html part of the page. HTML header will automatically be prepended. The keyword IDXHTML_CONTENT which will be replaced with the contents of:


HTML Form upload content

The form that contains the upload. The following additional keywords are possible here:

IDXHTML_UPLOADF_UPID

A random number needed for the upload progress window

IDXHTML_UPLOADF_IDXCLIENT_ID

The numerical ID of the segment to upload into

IDXHTML_UPLOADF_AL

the 6 digit ak code that designates the login (CGI variable: al)

IDXHTML_UPLOADF_AN

the 6 digit ak code that designates the file (CGI variable: an)

The following CGI variables are being used for uploads:

al type:hidden (see above)
an type:hidden (see above)
title type:text the title of the file in INTERDUBS, if empty then the file names gets used
newfoldername type:text if set a new folder with this name will be created and the file will be put in there.  
note type:textarea the note that the client can add
userfile type:file the input for the actual file

enabling via configuration

Client side uploads are actually enabled via a configuration. You can decide to make all of your segment upload enabled or just specific logins / links.

The following section describes the login/configuration way to enable uploads. See Enabling Client Side Uploads above for a quicker way to accomplish the same.

For a login go to the edit login screen and scroll down the configurations. One of them reads:

Disable upload option and it is probably enabled. Click on the to bring this configuration under the control of this login and then change the value to NOT being checked any longer.

Clients can not manage the content they have uploaded.


Upload only

Client uploads can also be used to set up a dropbox where your clients can NOT see what they or others have uploaded. There is a global look called Upload Only that can be used to turn a login into an Upload only login. See Look#upload_only for details.


Alternatively use Droplets

You can also consider to send your clients a droplet that you created in INTERDUBS. This is specially interesting since browser based uploads have a size limit of 2GB.

Personal tools