Building an AJAX file upload with progress bar using Symphony CMS

When uploading large files through web forms, rather than leaving the user to wait for the upload to complete, it helps to show them the progress of their upload.

The following solution describes the process using Symphony CMS.

  1. Create a event for the section and add it to a Symphony page.
  2. Add jQuery CDN to the template.
  3. Add jQuery Form Plugin file to the js folder and add link it to the template.(http://malsup.github.io/jquery.form.js )
  4. Create a form for upload files.
  5. Create div for progress and success message
  6. Add the css to the templates
  7. Add Custom Script to footer or custom js file.

Form

form

CSS

form

Custom js file

form

Demo Screenshot 1

form

Demo Screenshot 2

form

Demo Screenshot 3

form

For more information: http://malsup.com/jquery/form/

Topics: Developer resources, Symphony CMS


© Copyright 2017 Eyes-Down Limited