1
59

Uploading files to the server

By default, a website is configured to allow an administrator to upload files of any type not more than 1 megabyte in the folder files.

Connect as an administrator and click on the wheel on the home page to go to the Management page.

Content

Click on Upload and choose a local file.

+

If the copy failed, an alert is displayed.

-

Make sure the Apache server is allowed to write in the directory files at the root of the website:

$ cd /var/www/sitename.net
$ sudo chgrp www-data files
$ chmod 775 files

NOTE: If the code in JavaScript is blocked, the form still works but without the ability to hide the Choose File button.

To change the maximum size of a downloaded file or control its type, edit the block upload:

upload.php
  1. define('FILES_DIR', ROOT_DIR . DIRECTORY_SEPARATOR . 'files');
  2.  
  3. function upload($lang, $slice=false) {
  4.     $maxfilesize=$slice ? false : 1000000;
  5.  
  6.     $action='init';
  7.     if (isset($_POST['upload_put'])) {
  8.         $action='upload';
  9.     }
  10.  
  11.     $filetypes=false;

FILES_DIR gives the name of the folder where the downloaded files are copied.

$maxfiles defines the maximum size of a downloaded file in bytes.

Set $filetypes to the value of an array of MIME types to control the type of a downloaded file, e.g. array('image/jpeg', 'image/jpg', 'image/png').

The parameter $slice of the function upload allows to upload large files by packets of one megabyte. Edit the action admin and add true to the call which builds the block $upload:

admin.php
  1.     $upload = build('upload', $lang, true);

Make sure the action fileupload is enabled in aliases.inc:

aliases.inc
  1. $aliases = array(
  2.     array(
  3.         'captcha'                   => 'captcha',
  4. //      'avatar'                    => 'avatar',
  5.         'rss'                       => 'rssfeed',
  6.         'file/upload'               => 'fileupload',

Upload a file of several megabytes. The progression of the upload is displayed after each confirmation of the transfert of a packet.

3%

The end of the copy is notified like for an upload in a single operation.

+

If the copy of a packet has failed, the transfer is interrupted and an alert is displayed.

-

To disable uploading files, set the block $upload to false in admin.php:

  1.     $upload = false;

Disable the action fileupload in aliases.inc:

  1. $aliases = array(
  2.     array(
  3.         'captcha'                   => 'captcha',
  4. //      'avatar'                    => 'avatar',
  5.         'rss'                       => 'rssfeed',
  6. //      'file/upload'               => 'fileupload',
Uploadging and playgin a video

Creating a block which can upload a video while playing it immediately takes a few minutes.

Click on the image to select a video.

Copy the file upload.php in the folder blocks calling it uploadvideo.php.

Restrict the type of uploadable files to MP4 videos:

  1.     $filetypes=array('video/mp4');

Rename the function uploadvideo. Remove all the code which tests if the file is uploaded in several parts:

  1. function uploadvideo($lang) {
  2.     $maxfilesize=false;
  1.     $videoupload_url = url('videoupload', $lang);
  1.     $output = view('uploadvideo', $lang, compact('token', 'maxfilesize', 'filetypes', 'videoupload_url', 'errors', 'infos'));

Note the new action called videoupload which will copy a video on the server. Copy the file fileupload.php in the folder actions calling it videoupload.php.

videoupload checks the type of the file and saves it in a subdirectory:

  1.     $filetypes=array('video/mp4');
  1.     $fname = FILES_DIR . DIRECTORY_SEPARATOR . 'videos' . DIRECTORY_SEPARATOR . $name;

Add a URL in aliases.inc for the action videoupload:

  1. $aliases = array(
  2.     array(
  3.         'captcha'                   => 'captcha',
  4. //      'avatar'                    => 'avatar',
  5.         'rss'                       => 'rssfeed',
  6.         'file/upload'               => 'fileupload',
  7.         'video/upload'              => 'videoupload',

The code for the view adds inserting a <video> tag when a video is selected:

  1. <p id="videouploader"><img src="/files/images/html5video.png" alt="" title="Upload a video" /></p>
  1.     $('#videouploader img').on('click', function(e) { e.preventDefault(); file.click(); });
  1.             $('#videouploader').html('<video controls src="' + URL.createObjectURL(fd) + '"></video>');

Adding a button to interrupt the loading and delete the file on the server and separating selecting and playing a video and uploading it are easy extensions.

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].