media list(events): Event media list

Render a list of media for an event. The component can be re-used for posts, comments, or what-have-you

Gemfile

@@ -53,3 +53,6 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+# S3
+gem 'aws-sdk-s3', '~> 1'

Gemfile.lock

@@ -58,6 +58,22 @@ GEM
       zeitwerk (~> 2.2)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
+    aws-eventstream (1.0.3)
+    aws-partitions (1.281.0)
+    aws-sdk-core (3.91.0)
+      aws-eventstream (~> 1.0, >= 1.0.2)
+      aws-partitions (~> 1, >= 1.239.0)
+      aws-sigv4 (~> 1.1)
+      jmespath (~> 1.0)
+    aws-sdk-kms (1.30.0)
+      aws-sdk-core (~> 3, >= 3.71.0)
+      aws-sigv4 (~> 1.1)
+    aws-sdk-s3 (1.61.0)
+      aws-sdk-core (~> 3, >= 3.83.0)
+      aws-sdk-kms (~> 1)
+      aws-sigv4 (~> 1.1)
+    aws-sigv4 (1.1.1)
+      aws-eventstream (~> 1.0, >= 1.0.2)
     bindex (0.8.1)
     bootsnap (1.4.6)
       msgpack (~> 1.0)
@@ -83,6 +99,7 @@ GEM
       concurrent-ruby (~> 1.0)
     jbuilder (2.10.0)
       activesupport (>= 5.0.0)
+    jmespath (1.4.0)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -201,6 +218,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  aws-sdk-s3 (~> 1)
   bootsnap (>= 1.4.2)
   byebug
   capybara (>= 2.15)

TODO.md

@@ -14,7 +14,7 @@ rails g model PostMember post:references employee:references role:integer --forc
 # Polymorphic types
 rails g model Location name:text address:text city:text country:string province:string state:string postal:string locatable_id:bigint locatable_type:string --force
 rails g model Tag name:string value:string url:text taggable_id:bigint taggable_type:string --force
-rails g model Medium name:text url:text mediumable_id:bigint mediumable_type:string --force
+rails g model Medium name:text url:text mediumable_id:bigint mediumable_type:string content_type:string --force
 
 # Defaults and settings
 sed -i  -e 's/t\.integer :role$/t.integer :role, default: 0/' db/migrate/*_create_employees.rb

app/controllers/api/v1/event_media_controller.rb

@@ -0,0 +1,16 @@
+class Api::V1::EventMediaController < ApplicationController
+    def create
+        uploaded_file = params[:file]
+
+        s3_object = Medium.s3_create uploaded_file
+        @event = Event.find_by_id params[:event_id]
+        @media = @event.media.create! name: s3_object[:name], url: s3_object[:url]
+
+        render json: {event: @event, media: @media}
+    end
+
+    def index
+        @event = Event.find_by_id params[:event_id]
+        render json: @event.media
+    end
+end

app/javascript/components/EditableMedia.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="editable-media">
+      <md-card>
+          <MediaList :media='media' />
+          <md-field v-if='isEditable'>
+            <label>Add media</label>
+            <md-file v-model='mediaFile' v-on:md-change='addMedia' />
+          </md-field>
+      </md-card>
+  </div>
+</template>
+<script>
+import MediaList from './MediaList.vue'
+export default {
+    name: 'EditableMedia',
+    components: {MediaList},
+    props: {
+        model_id: Number,
+        model_type: String,
+        media: {type: Array, required: false},
+        isEditable: {type: Boolean, default: false},
+    },
+    data: function() {
+        return {
+            mediaFile: null
+        }
+    },
+    methods: {
+        addMedia: function(fileList) {
+            this.$emit('addMedia', fileList)
+        }
+    }
+}
+</script>

app/javascript/components/MediaList.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="media-list">
+    <ul class="media">
+      <li v-for='m in media' :key='m.id'>
+        <img :src='m.url' class="media-file" />
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+    name: 'Media',
+    props: {
+        media: Array,
+    },
+}
+</script>
+<style language='scss' scoped>
+.media-file {
+    width: 125px;
+    height: 125px;
+}
+ul {
+    list-style-type: none;
+    width: 100%;
+    overflow-x: scroll;
+    white-space: nowrap;
+}
+ul > li {
+    
+    display: inline-block;
+
+}
+</style>

app/javascript/services/events.js

@@ -45,4 +45,35 @@ export const updateEvent = (id, event) => axios.put(
     data: data,
     error: null,
   }))
+  .catch(railsErrorHandler)
+
+const eventMediaUrl = id => `${oneEventUrl(id)}/media`
+export const addMedia = (id, mediaFile) => {
+  const data = new FormData()
+  data.append('file', mediaFile)
+  return axios.post(
+    eventMediaUrl(id),
+    data,
+    Object.assign({}, authorizedJSONHeaders, {
+      "Content-Type": `multipart/form-data`,
+      "Content-Length": `${mediaFile.size}`,
+    })
+  )
+  .then(r => r.data)
+  .then(data => ({
+    data: data,
+    error: null,
+  }))
+  .catch(railsErrorHandler)
+}
+
+export const allMedia = id => axios.get(
+    eventMediaUrl(id),
+    authorizedJSONHeaders
+  )
+  .then(r => r.data)
+  .then(data => ({
+    data: data, 
+    error: null,
+  }))
   .catch(railsErrorHandler)

app/models/medium.rb

@@ -1,3 +1,22 @@
 class Medium < ApplicationRecord
-    belongs_to :mediable, polymorphic: true
+    belongs_to :mediumable, polymorphic: true
+    def self.s3_create(uploaded_file)
+        s3 = Rails.configuration.s3
+        bucket = Rails.configuration.media_bucket
+        key = "#{uploaded_file.original_filename}__#{DateTime.now.to_i}"
+
+        s3.put_object(
+            key: key,
+            bucket: bucket,
+            content_type: uploaded_file.content_type,
+            body: uploaded_file.tempfile,
+        )
+        s3_object = Aws::S3::Object.new bucket_name: bucket, key: key
+
+        puts "Created public URL: #{s3_object.public_url}"
+        {
+            url: s3_object.public_url,
+            name: key,
+        }
+    end
 end

config/application.rb

@@ -10,6 +10,19 @@ module Sidewoo
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 6.0
+    Aws.config.update(
+      endpoint: 'http://localhost:9000',
+      access_key_id: 'minioadmin',
+      secret_access_key: 'minioadmin',
+      force_path_style: true,
+      region: 'us-east-1',
+    )
+    config.media_bucket = 'media'
+    config.s3 = Aws::S3::Client.new
+    begin
+      config.s3.create_bucket bucket: config.media_bucket
+    rescue Aws::S3::Errors::BucketAlreadyExists, Aws::S3::Errors::BucketAlreadyOwnedByYou
+    end
 
     # Settings in config/environments/* take precedence over those specified here.
     # Application configuration can go into files in config/initializers

config/routes.rb

@@ -20,6 +20,7 @@
       resources :media, controller: 'v1/media'
     end
     resources :events, controller: 'v1/events' do 
+      resources :media, controller: 'v1/event_media'
       resources :tags, controller: 'v1/tags'
       resources :locations, controller: 'v1/locations'
       resources :media, controller: 'v1/media'

public-bucket-policy.json

@@ -0,0 +1,12 @@
+{
+  "Version":"2012-10-17",
+  "Statement":[
+    {
+      "Sid":"PublicRead",
+      "Effect":"Allow",
+      "Principal": "*",
+      "Action":["s3:GetObject"],
+      "Resource":["arn:aws:s3:::media/*"]
+    }
+  ]
+}