Back to blue

Upload Component

This upload component is intended to be reusable across projects.

Implementation

Make sure to include the CSS and JS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_uploader.css') }}" /> <script src="{{ static("js/ca_styleguide_uploader.js") }}"></script>

The URL to which the files should be POSTed must be set as a "data-url" attribute in the file uploader element (" .ca-upld").

The file binary is sent as the value of the input name. If the name is undefined is sent as "image_local" as default.

To test it locally, you'll need to download and activate the "Allow-Control-Allow-Origin: *" Chrome Extension, run the Main Site locally and change the "data-url" of the uploader to "localhost". Also, you'll probably need to set the "MEDIA_ROOT" (Main Site's local_settings.py) to a real path on your machine.


Variations

Single image uploader

    <div class="ca-upld js-basic-upld" data-url="https://urlToPostTheFiles.com"> <div class="ca-thumbs"> <div class="ca-thumb ca-thumb--preview js-ca-thumb"> <img> <div class="ca-radial-progress js-ca-radial-progress" data-progress="0"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> <div class="fill fix"></div> </div> </div> <div class="inset"></div> </div> </div> </div> <div> <button class="ca-btn js-ca-upld__box">Upload image</button> <button class="ca-btn js-ca-upld__delete-btn">Delete image</button> <input type="file" class="ca-upld__input js-ca-upld__input" /> </div> <ul class="js-upld-errorlist"></ul> </div>

    Multiple Photo uploader

    Before uploading, all files are validated, and only the ones that are accepted will be sent. There is a validation to avoid duplicated files (same name) and files that are too large. As optional parameters, the file type and a maximum amount of images can be also validated.

    If an upload fails, an error message is displayed and the upload thumbnail is removed from the DOM.

    Photo guidelines

    Close guidelines

    Guidelines:

    • Guideline 1
    • Guideline 2
    • Guideline 3
      <div class="ca-upld js-ca-upld" data-url="https://urlToPostTheFiles.com"> <div class="ca-thumbs js-ca-thumbs js-is-hidden"> <div class="ca-thumb"> <img> <div class="ca-radial-progress js-ca-radial-progress" data-progress="0"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> <div class="fill fix"></div> </div> </div> <div class="inset"></div> </div> <div class="ca-thumb__close js-ca-thumb__close"> {% include "frontend/icons/close.html" %} </div> </div> </div> <div class="ca-upld__box js-ca-upld__box"> <label class="ca-upld__lbl"> <span class="ca-upld__lbl--emph ca-hide-only-desktop">Upload image</span> <span class="ca-show-only-desktop">Drag here or <span class="ca-upld__lbl--emph">browse</span> to upload photo</span> <input type="file" name="image_local" class="ca-upld__input js-ca-upld__input" multiple> </label> </div> <div class="ca-upld__guide"> <div class="ca-upld__guide-cta js-ca-upld__guide-cta"> <p>Photo guidelines</p> <p class="js-is-hidden">Close guidelines</p> </div> <div class="ca-upld__rules js-ca-upld__rules ca-upld__rules--hidden"> <div class="ca-upld__rules-content"> <p class="ca-upld__rules-title">Guidelines:</p> <ul class="ca-upld__rules-list"> <li>Guideline 1</li> <li>Guideline 2</li> <li>Guideline 3</li> </ul> </div> </div> </div> <ul class="js-upld-errorlist"></ul> </div>

      Thumbnail name

      If you need to include the thumbnail name, you can add an element with a js-ca-thumb__name class. In the following example, the filename is hidden inside the thumbnail, feel free to test it using the web inspector.

        <div class="ca-upld js-ca-upld" data-url="https://urlToPostTheFiles.com"> <div class="ca-thumbs js-ca-thumbs js-is-hidden"> <div class="ca-thumb"> <img> <span class="js-ca-thumb__name"></span> <div class="ca-radial-progress js-ca-radial-progress" data-progress="0"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> <div class="fill fix"></div> </div> </div> <div class="inset"></div> </div> <div class="ca-thumb__close js-ca-thumb__close"> {% include "frontend/icons/close.html" %} </div> </div> </div> <div class="ca-upld__box js-ca-upld__box"> <label class="ca-upld__lbl"> <span class="ca-upld__lbl--emph ca-hide-only-desktop">Upload image</span> <span class="ca-show-only-desktop">Drag here or <span class="ca-upld__lbl--emph">browse</span> to upload photo</span> <input type="file" class="ca-upld__input js-ca-upld__input" multiple> </label> </div> <ul class="js-upld-errorlist"></ul> </div>

        Events

        Some events are triggered to the file uploader element (".ca-upld"):

        com.consumeraffairs.styleguide.imageuploader.uploadComplete
        When the upload is done, this event is emitted with the file ID (received from the BE) data in the "details" object key.
        com.consumeraffairs.styleguide.imageuploader.fileRemoved
        If the user removes the file (click on thumbnail's "X" button), this event is emitted with the file data in the "details" object key.
        com.consumeraffairs.styleguide.imageuploader.fileList
        Alongside "uploadComplete" and "fileRemoved" events, this event is emitted with the list of files stored at that moment.
        com.consumeraffairs.styleguide.imageuploader.error
        This event is emitted every time an error has occurred on any file, it could be a validation error prior to the upload or an error response given by the server. { errors: [ { rel: {String} error type code. (duplicate/size/delete/type/limitExceeded/default), detail: {String} user friendly error message, } ], ... }

        Configuration options

        Accepted files

        Accepted file types

        By default, this component accepts all file types. If you want to allow only certain types of files, you must include and accept attribute in the input element with the desired MIME types.

        <input type="file" class="ca-upld__input js-ca-upld__input" accept="image/jpg, image/jpeg, image/gif, image/png" />

        Maximum file size

        By default, this component accepts files size up to 5MB. You can change the size limit by adding a data-max-file-size attribute to the input element. The number should be expresed on MB. (data-max-file-size="2" = 2MB)

        <input type="file" class="ca-upld__input js-ca-upld__input" data-max-file-size="2" />

        Maximum allowed files

        By default, the multiple file uploader let the user upload an unlimited amount of files. You can define a maximum number of files by adding a data-max-files="" attribute to the input element.

        This configuration option doesn't work on the single file uploader.... since it's a single file uploader (the maximum number is 1 by default)

        <input type="file" class="ca-upld__input js-ca-upld__input" data-max-files="6" />

        Examples

        The following examples combines all the above configurations

        • Only JPG, GIF or PNG files
        • Files up to 1MB
        • A maximum of 6 files (multiple uploader only)

            Preloaded images

            You can add preloaded images to the component by adding a data-preloaded-images attribute to the .ca-upld element. The attribute content should be an Array of the elements you want to add, with the following structure:

            [{ "name": "dog.jpg", // Filename "url": "/img/dog.jpg", // Thumbnail URL "id": 1234 // Image ID },{ ... }]

            The following example has configured a maximum of 3 images:

              <div class="ca-upld js-ca-upld" data-url="https://urlToPostTheFiles.com" data-preloaded-images='[{"name": "file1.jpg","url": "/static/img/file1.jpg","id": 1890},{"name": "file2.jpg","url": "/static/img/file2.jpg","id": 1984}]'> <div class="ca-thumbs js-ca-thumbs js-is-hidden"> <div class="ca-thumb"> <img> <span class="js-ca-thumb__name"></span> <div class="ca-radial-progress js-ca-radial-progress" data-progress="0"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> <div class="fill fix"></div> </div> </div> <div class="inset"></div> </div> <div class="ca-thumb__close js-ca-thumb__close"> {% include "frontend/icons/close.html" %} </div> </div> </div> <div class="ca-upld__box js-ca-upld__box"> <label class="ca-upld__lbl"> <span class="ca-upld__lbl--emph ca-hide-only-desktop">Upload image</span> <span class="ca-show-only-desktop">Drag here or <span class="ca-upld__lbl--emph">browse</span> to upload photo</span> <input type="file" class="ca-upld__input js-ca-upld__input" multiple> </label> </div> <ul class="js-upld-errorlist"></ul> </div>

              DELETE request before removing a thumbnail image

              If you want to trigger a DELETE request after removing a thumbnail, you have to add a data-delete-url attribute with the endpoint URL to the .ca-upld element.

              As optional, You can use the [ID] keyword which is going to be replaced by the ID of the element to be deleted.

              For example: when the image with ID 523 is going to be deleted the https://urlToPostTheFiles.com/[ID]/ URL is going to be replaced by https://urlToPostTheFiles.com/523/

              The following example doesn't work because we don't have a public endpoint with the DELETE functionality to point at.

                <div class="ca-upld js-ca-upld" data-url="https://urlToPostTheFiles.com" data-delete-url="https://urlToPostTheFiles.com/[ID]/"> <div class="ca-thumbs js-ca-thumbs js-is-hidden"> <div class="ca-thumb"> <img> <span class="js-ca-thumb__name"></span> <div class="ca-radial-progress js-ca-radial-progress" data-progress="0"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> <div class="fill fix"></div> </div> </div> <div class="inset"></div> </div> <div class="ca-thumb__close js-ca-thumb__close"> {% include "frontend/icons/close.html" %} </div> </div> </div> <div class="ca-upld__box js-ca-upld__box"> <label class="ca-upld__lbl"> <span class="ca-upld__lbl--emph ca-hide-only-desktop">Upload image</span> <span class="ca-show-only-desktop">Drag here or <span class="ca-upld__lbl--emph">browse</span> to upload photo</span> <input type="file" class="ca-upld__input js-ca-upld__input" multiple> </label> </div> <ul class="js-upld-errorlist"></ul> </div>

                Radial Progress Bar

                This radial progress bar component is intended to be reusable across projects.

                To include its @mixin you'll need to pass the $inner-circle-diameter, $inner-circle-color (should be the same of the parent element background color), $bar-width (progress bar width), and $bar-color (progress bar color) as arguments. The last two arguments are optionals. The outer circle diameter is the sum of $inner-circle-diameter and $bar-width.

                The "data-progress" attribute of the element will define the percentage of the progress. So, you just need to update its value with JS (not included) to make it work. Both element and parent classes can be named freely.

                <div class="ca-radial-progress-parent"> <div class="ca-radial-progress-example js-ca-radial-progress-example" data-progress="0"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> <div class="fill fix"></div> </div> </div> <div class="inset"></div> </div> </div>