Browser Tutorial Download Module (en)¶

typo3-organiser.de¶

Organiser (org) is based on the TYPO3 Browser. It is using the download module among others. You can install the Organiser with one click – ready to go. Configuration is finished. It contains the records like in the illustration above.

See: http://typo3-organiser.de/downloads/

leg-thueringen.de¶

The example above is based on Organiser (org)

See: http://www.leg-thueringen.de/downloads

typo3-organiser.de¶

This is the backend. The backend is designed by the extension Organiser. It is independent of the TYPO3 Browser download module.

This tutorial in PDF format¶

You find this manual as PDF file at

• doc/manual.pdf
• HTML http://typo3.org/documentation/document-library/extension- manuals/browser_tut_downloads_en/current/
• Download: http://typo3-browser.de/typo3conf/ext/browser_tut_downloa ds_en/doc/manual.pdf

User function: render_uploads¶

The Browser download module is using the user function render_uploads.

This function is documented in the manual

• Browser Tutorial User Defined Functions (en)See section "render_uploads"
• HTML http://typo3.org/documentation/document-library/extension- manuals/browser_tut_userfunc_en/current/
• PDF http://typo3-browser.de/typo3conf/ext/browser_tut_userfunc_en/ doc/manual.pdf

All Browser Manuals and Tutorials¶

You find all Browser manuals and tutorials at the home page of the Browser:

• English: http://typo3-browser.de/en/browser-tutorials/
• German: http://typo3-browser.de/browser-tutorials/

All manuals and tutorials are in English but the "Fall-Studie: Grüne Autos".

The usual way without any application¶

The usual way to provide a file is a direct link like http://typo3-organiser.de/fileadmin/tx_org/my_file.pdf.

This has the advantage:

• You don't need a Content Management System (CMS) for the download.
• You won't have any SQL query.
• You will have a good performance.

But the dark side of the moon is:

• You can't count downloads with your CMS (here: TYPO3). You can't create top 10 lists for example.
• You can't manage user access rights with your CMS.

The usual way with a common application¶

There are some TYPO3 extensions, which support the management of files and downloads.

Some extensions are very powerful:

• some are localised
• some have support for statistics needs
• some support search engine optimisation
• some are meta management systems like DAM

But all extensions have the same concept:

• You have to manage your files with the database of the extension or of the meta management system.
• You have to publish your files with the plugin (PHP code) of the extension.

If you like to change the database or to extend it, you will have a lot of work – the truth is: it isn't possible in principle.

The way with the TYPO3 Browser Download Module¶

The base is your database (your extension) or any other extension, which manage the file upload in the TYPO3 backend. Or the base is an extensions, which are using the Browser Download Module – but this extensions are ready for use – like the Organiser (org)

The TYPO3 Browser is the frontend engine for your database: It takes care of the output like list views and single views, search forms, filters and category menus.

The Browser Download Module is part of the Browser.

The Module generates a link to a file, which points to the TYPO3 Browser plugin.

The Browser plugin handles this link.

It checks some conditions like user access rights among others.

It manages the statistics needs.

It provides the file and sends meta data like the mime-type.

Follow the work flow¶

You can follow the work flow of the Download Module. You have to enable the DRS – the Development Reporting System – in the extension manager of the TYPO3 Browser. You will get a lot of logs in the TYPO3 backend.

Checks¶

You can use the Browser plugin unlimited in your TYPO3 installation and unlimited on every page. The Browser plugin itself can manage views unlimited.

Therefore are the following needs for security:

• The Browser plugin has access to files only, if it is configured for file access. Not other plugin hasn't any access.
• The authorised Browser plugin has access for files for the view only, which is configured for file access.

Therefore you will get a link to a file like this one:

tx_browser_pi1[file]=single.301.tx_org_downloads.26.documents.0

Risks¶

Files can download by the direct link still! The user has to know the link only.

If files shouldn't downloaded directly, you have to manage the access to files on your server by your self.

Browser 4.x¶

You need the Browser from version 4.0.

DAM¶

You have to install Media DAM (dam)

Knowledge about TypoScript¶

Less.

Time¶

You will need from 10 minutes to 20 minutes. It depends on your knowledge about the Browser and TypoScript.

Template¶

• Add to your page a TypoScript extension template.
• Call it "+page_browserdam_217", if 217 is the id of your TypoScript template.
• Slect the tab [Includes]
• Add to the field "Include satic (from extensions):" the static templates
  • Browser (browser)
  • +Browser Sample for DAM (browser)

TypoScript Constant Editor¶

Set the page uid to the uid of the page "Browser for DAM"

Modul: Web > Template

Page tree: page "Browser for DAM"

Edit area: [Constant Editor]

[BROWSER – DOWNLOAD MODULE]

page uid: the uid of the page "Browser for DAM"

List view¶

Single view¶

Tutorial is based on DAM¶

But because the author can't know your extension, this tutorial is based on DAM.

Browser 4.x¶

You need the Browser from version 4.0.

DAM or your own database registered by the TCA¶

You can use the TYPO3 Browser Download Module with every database. There is one need only: the database has to be registered for the TCA – the Table Configuration Array. Every database of a TYPO3 extension is registered.

We take DAM for this tutorial.

This fields are needed

• record title
• file
• file description
• file caption

Optional are fields like

• an alternate thumbnail
• the size of the thumbnail
• statistics data

But the optional fields aren't part of this tutorial.

Knowledge about TypoScript¶

You should be familiar with TypoScript.

Time¶

You will need from 30 minutes to 2 hours. It depends on your knowledge about the Browser and TypoScript.

List view¶

Each item should contain:

• filter for the category
• filter for the date of publishing
• title
• file with link to the single view
• caption

Single view¶

Each item should contain:

• title
• file with link for downloading
• caption
• description
• download size
• link for downloading

Install DAM¶

Install Media DAM (dam), if it isn't installed.

• Update the database.
• Update the DAM configuration (take all properties by default).

Scan files¶

• Modul MEDIA > Tools
• Edit area: Check index -> Check uploads > Send data

If DAM doesn't find any file, please upload three files and repeat the file scan.

Add Categories¶

Add two categories like

• books
• photos

or any others.

• Modul WEB > List
• Page tree: Folder Media (on top level)
• Edit area: Add records "Media Categories"

Check the result¶

• Modul WEB > List
• Page tree: Folder Media (on top level)

You should see some files and the categories at least.

Intermediate Result¶

The illustration above displays the result in the backend.

The illustration above displays the result in the frontend.

You will get an error message. This would be OK! Don't care about it.

We will configure the Browser plugin later.

Copy the Browser default template¶

We copy the Browser default HTML template for unordered lists to a directory in our extension (or into the fileadmin).

cp typo3conf/ext/browser/res/html/default_ul.tmpl fileadmin/browser_dam_sample/default.html

Please adapt the destination path to your needs.

Edit the copy¶

TypoScript snippet¶

plugin.tx_browser_pi1 {

template {

extensions {

dam {

sample {

// [String] Name of the template. It will displayed in the plugin/flexform

name = +DAM: Sample

file = fileadmin/browser_dam_sample/default.html

// [csv] Comma seperated list with the number of the correspondening views

csvViews = 37165

}

}

}

}

views {

list {

37165 = +DAM: Sample

37165 {

// [String] Name of the view. It will displayed in the plugin/flexform

name = +DAM: Sample

// [String] Select clause (don't confuse it with the SQL select)

select (

tx_dam.title

)

}

}

single {

37165 = +DAM: Sample

37165 {

// [String] Select clause (don't confuse it with the SQL select)

select (

tx_dam.title

)

}

}

}

}

Line 4-12: We register our templates in the flexform of the Browser.It will appear in a selectbox with the name "+DAM: Sample"It will take the HTML template from the given path.It is connected with the view 37165 :sup:`0 <#sdfootnote1sym>`_

Line 16-26: Our list viewIt is called "+DAM: SampleIt will query the database for the field tx_dam.title at runtime only.

Line 27-35: Same as list view

We copy our TypoScript snippet into the TypoScript template of the page "Browser DAM Sample".

TypoScript Template¶

Intermediate Result¶

The result in the frontend depends on your available files.

You should get a list view with tx_dam records labelled with the title. The list view contains

• a search form,
• an index browser,
• a field for sorting and
• a page browser, if you have more than 20 DAM records stored.

The snippets as a file¶

You find the completely code snippet at

typo3conf/ext/browser/static/samples/dam/setup.txt

General¶

We don't like one default property (it is out of date): we remove general_stdWrap.

plugin.tx_browser_pi1.general_stdWrap >

See snippet below.

plugin.tx_browser_pi1 {

template {

...

}

// Don't use general_stdWrap!

general_stdWrap >

...

}

List view¶

The Browser uses "showUid" as label for the record uid in the URL. We like to change it to another name, which we will configure by the TYPO3 Constant Editor. We will explain it later. See:

plugin.tx_browser_pi1.views.list.37165.showUid

We add fields for the file name, the file path and the caption.

Please don't forget the comma after the first field tx_dam.title!

See

plugin.tx_browser_pi1.views.list.37165.select

We configure field per field.

See:

plugin.tx_browser_pi1.views.list.37165.tx_dam.title

Be aware of proper lines at tx_dam.title.20 and tx_dam.title.40.Property and value has to be one line!

tx_dam.title.20 < <- is wrong

plugin... <- is wrong

tx_dam.title.40 < <- is wrong

plugin... <- is wrong

tx_dam.title.20 < plugin... <- is proper

tx_dam.title.40 < plugin... <- is proper

• tx_dam.title.20 and tx_dam.title.40 get so called master templates. This save a lot of work for TYPO3 integrators and developers.
• The master templates contains some values, which depends on your configuration.
• You will maintain the values by the TYPO3 Constant Editor (see below).

If you are interested in the code of the templates, please inspect tx_dam.title.20 and tx_dam.title.40 with the TYPO3 Object Browser.

Code Snippet

plugin.tx_browser_pi1 {

...

views {

list {

37165 = +DAM: Sample

37165 {

...

showUid = {$plugin.tx_browser_pi1.downloadmodule.urlParam}

select (

tx_dam.title ,

tx_dam.file_name,

tx_dam.file_path,

tx_dam.caption

)

tx_dam {

title = COA

title {

10 = TEXT

10 {

value = <h2>###TX_DAM.TITLE###</h2>

}

20 < plugin.tx_browser_pi1.displayList.master_templates.modules.dow nload.thumbnails.withLinkToListView

30 = TEXT

30 {

value = <p>###TX_DAM.CAPTION###</p>

}

40 < plugin.tx_browser_pi1.displayList.master_templates.modules.dow nload.textlinks.withLinkToListView

90 = TEXT

90 {

value = <div style="clear:both;font-size:0;line- height:0;">&nbsp;</div>

}

}

}

}

}

single {

...

}

}

}

Single view¶

The single view is the same like the list view in principle. It is more detailed. And links are links for downloading,

The Browser uses "showUid" as label for the record uid in the URL. We like to change it to another name, which we will configure by the TYPO3 Constant Editor. We will explain it later. See:

plugin.tx_browser_pi1.single.list.37165.showUid

We add fields for the file name, the file path and the caption.

Please don't forget the comma after the first field tx_dam.title!

See

plugin.tx_browser_pi1.single.list.37165.select

We configure field per field.

See:

plugin.tx_browser_pi1.single.list.37165.tx_dam.title

Be aware of proper lines at tx_dam.title.20 and tx_dam.title.40.Property and value has to be one line!

tx_dam.title.20 < <- is wrong

plugin... <- is wrong

tx_dam.title.40 < <- is wrong

plugin... <- is wrong

tx_dam.title.20 < plugin... <- is proper

tx_dam.title.40 < plugin... <- is proper

• tx_dam.title.20 and tx_dam.title.40 get so called master templates. This save a lot of work for TYPO3 integrators and developers.
• The master templates contains some values, which depends on your configuration.
• You will maintain the values by the TYPO3 Constant Editor (see below).

If you are interested in the code of the templates, please inspect tx_dam.title.20 and tx_dam.title.40 with the TYPO3 Object Browser.

Code Snippet

plugin.tx_browser_pi1 {

...

views {

...

single {

37165 = +DAM: Sample

37165 {

// [String] Parameter for the uid of the document in the URL

showUid = {$plugin.tx_browser_pi1.downloadmodule.urlParam}

select (

tx_dam.title ,

tx_dam.file_name,

tx_dam.file_path,

tx_dam.caption,

tx_dam.description,

tx_dam.date_mod,

tx_dam.file_size,

tx_dam_cat.title

)

tx_dam {

title = COA

title {

10 = TEXT

10 {

value = <h2>###TX_DAM.TITLE###</h2>

}

11 = TEXT

11 {

value = <p>Beschreibung: ###TX_DAM.DESCRIPTION###</p>

}

12 = TEXT

12 {

value = ###TX_DAM.DATE_MOD###

strftime = %d. %b %Y

noTrimWrap = |<p>&Auml;nderungsdatum: |</p>|

}

13 = TEXT

13 {

value = ###TX_DAM.FILE_SIZE###

bytes = 1

bytes {

labels = {$styles.content.uploads.filesizeBytesLabels}

}

noTrimWrap = |<p>Gr&ouml;sse: |</p>|

}

14 = TEXT

14 {

value = <p>Kategorie: ###TX_DAM_CAT.TITLE###</p>

}

20 < plugin.tx_browser_pi1.displayList.master_templates.modules.dow nload.thumbnails.withDownloadLink

30 = TEXT

30 {

value = <p>###TX_DAM.CAPTION###</p>

}

40 < plugin.tx_browser_pi1.displayList.master_templates.modules.dow nload.textlinks.withDownloadLink

90 = TEXT

90 {

value = <div style="clear:both;font-size:0;line- height:0;">&nbsp;</div>

}

}

}

}

}

}

}

Page¶

We need a small CSS template for a proper record layout. You can take the CSS file of the Browser extension. And you can take your own one – please adapt the path to your needs.

...

page {

includeCSS {

37165 = EXT:browser/res/sample/dam/default.css

}

}

Constant Editor¶

Modul: Web > Template

Page tree: page "Browser DAM Sample"

Edit area: [Constant Editor]

[BROWSER – DOWNLOAD MODULE]

page uid: the uid of the page "Browser DAM Sample"

field files: tx_dam.file_name

Marker field uid TX_DAM.UID

Marker field files TX_DAM.FILE_NAME

Marker field path TX_DAM.PATH

Marker field titles TX_DAM.TITLE

TypoScript snippet¶

The editor stores your configration in the constants field of your TypoScript on the page "Browser DAM Sample":

plugin.tx_browser_pi1.downloadmodule.pageUid = 7530 <- your uid!

plugin.tx_browser_pi1.downloadmodule.tableField = tx_dam.file_name

plugin.tx_browser_pi1.downloadmodule.uid = TX_DAM.UID

plugin.tx_browser_pi1.downloadmodule.files = TX_DAM.FILE_NAME

plugin.tx_browser_pi1.downloadmodule.path = TX_DAM.FILE_PATH

plugin.tx_browser_pi1.downloadmodule.titles = TX_DAM.TITLE

List view¶

The result depends on your file data.

A click on the thumbnail will forward to the single view.

Single view¶

A click on the thumbnail will load the download dialog.

The result depends on your file data.

Filter¶

The TypoScript template for this sample contains two filters.

If you like to use filters, please

• add the marker for each filter to the HTML template and
• configure the filter in the TypoScript.

See

• HTML: typo3conf/ext/browser/res/sample/dam/default.html
• TypoScript: typo3conf/ext/browser/static/samples/dam/setup.txt