Giter Club home page Giter Club logo

django-flowjs's Introduction

django-flowjs

This is an app for your Django project to enable large uploads using flow.js to chunk the files client side and send chunks that are re-assembled on server side.

NOTE: I have done this just to help me on a project and I haven't been updating the code. Feel free to take control of the project. This was working with ng-flow-standalone 2.5.1. Celery isn't required but it is recommended.

Installation

Add 'flowjs' to INSTALLED_APPS

INSTALLED_APPS = (
      ...
      'flowjs',
      ...
)

Add 'flowjs' to urls.py

urlpatterns = (
      ...
      url(r'^flowjs/', include('flowjs.urls')),
      ...
)

Settings

FLOWJS_PATH: Media path where the files are saved. Default: 'flowjs/'

FLOWJS_REMOVE_FILES_ON_DELETE: Remove the upload files when the model is deleted. Default: True

FLOWJS_AUTO_DELETE_CHUNKS: Remove temporary chunks after file have been upload and created. Default: True

FLOWJS_EXPIRATION_DAYS: Time in days to remove non completed uploads. Default: 1

FLOWJS_JOIN_CHUNKS_IN_BACKGROUND: When flowjs should join files in background. Options: 'none', 'media' (audio and video), 'all' (all files). Default: 'none'

HTML

<span flow-init="initFlow()" flow-btn
      flow-file-progress="uploadProgress($flow, $file)"
      flow-files-submitted="openUploadProgressModal($flow)"
      flow-file-success="fileUploadedSuccessfully($flow, $message)">
</span>

Javascript

The script is only working for 1 file and 1 simultaneousUpload.

function initFlow() {
    return {
        target: '/flowjs/upload/',
        singleFile: true,
        query: {'csrfmiddlewaretoken': $cookies.csrftoken},
        simultaneousUploads: 1
    }
}

This is an example of how to update a variable while the file is uploading

function uploadProgress($flow, $file) {
    $flow.item.progress = parseInt($file._prevUploadedSize / $file.size * 100);
    $flow.item.speed = $file.currentSpeed;
}

Open a modal or something to show the progress bar

function openUploadProgressModal($flow) {
    // Write something here
}

Function to handle the download

function fileUploadedSuccessfully($flow, $message) {
    $http.post("/some-url-to-handle-file/", {identifier: $message})
        .success(function () {});
}

Views

def view_to_handle_download(request):
    # get and validate flow file to use as media file
    identifier = request.POST.get('identifier', '')
    try:
        flow_file = FlowFile.objects.get(identifier=identifier)
        if not flow_file.is_valid_session(request.session.session_key):
            return http.HttpResponseForbidden()
    except FlowFile.DoesNotExist:
        raise http.Http404()

    # Do something now with the flow_file.
    # If the file is being joined in background, there's no guarantee
    # the flow_file.file is ready at this moment. A signal is fired when is ready.

Signals

There are 3 signals being fired: file_is_ready, file_upload_failed and file_joining_failed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.