Code Monkey home page Code Monkey logo

shrine-rails-example's Introduction

Shrine Rails demo

This is a Rails demo for Shrine. It allows the user to create albums and attach images. The demo shows an advanced workflow:

Uploading:

  1. User selects one or more files
  2. The files get asynchronously uploaded directly to S3 and a progress bar is displayed
  3. The cached file data gets written to the hidden fields
  4. Once the form is submitted, background jobs are kicked off to process the images
  5. The records are saved with cached files, which are shown as fallback
  6. Once background jobs are finished, records are updated with processed attachment data

Deleting:

  1. User marks photos for deletion and submits
  2. Deletion starts in background, and form submits instantly
  3. Background job finishes deleting

This asynchronicity generally provides an ideal user experience, because the user doesn't have to wait for processing or deleting, and due to fallbacks they can be unaware of background jobs.

Direct uploads and backgrounding also have performance advantages, since your app doesn't have to receive file uploads (as files are uploaded directly to S3), and the web workers aren't blocked by processing, storing or deleting.

Implementation

In production environment files are uploaded directly to S3, while in development and test environment they are uploaded to the app and stored on disk. The demo features both single and multiple uploads.

On the client side Uppy is used for handling file uploads. The complete JavaScript implementation for the demo can be found in application.js.

Requirements

To run the app you need to setup the following things:

  • Install ImageMagick:

    $ brew install imagemagick
  • Install the gems:

    $ bundle install
  • Have SQLite installed and run the migrations:

    $ rake db:migrate
  • Put your Amazon S3 credentials in .env and setup CORS.

    # .env
    S3_BUCKET="..."
    S3_REGION="..."
    S3_ACCESS_KEY_ID="..."
    S3_SECRET_ACCESS_KEY="..."

Once you have all of these things set up, you can run the app:

$ rails server

shrine-rails-example's People

Contributors

janko avatar erikdahlstrand avatar hmistry avatar ritaritual avatar mvasin avatar

Watchers

Jonathan Rochkind avatar James Cloos avatar  avatar

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.