Skip to content

Commit

Permalink
[WIP] Initial setup of Uppy
Browse files Browse the repository at this point in the history
Co-authored-by: Chris Colvard <[email protected]>
  • Loading branch information
Dananji and cjcolvar committed Nov 2, 2022
1 parent 577ec50 commit bf0a4c5
Show file tree
Hide file tree
Showing 6 changed files with 1,477 additions and 130 deletions.
81 changes: 81 additions & 0 deletions app/javascript/components/FileUploadUppy.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import React from "react";
import Uppy from '@uppy/core';
import { Dashboard } from '@uppy/react';
import ActiveStorageUpload from '@excid3/uppy-activestorage-upload';
import GoogleDrive from '@uppy/google-drive';
import AwsS3 from '@uppy/aws-s3';

require('@uppy/core/dist/style.css')
require('@uppy/dashboard/dist/style.css')

class FileUploadUppy extends React.Component {
constructor(props) {
super(props);
// this.state = {
// dirUploadURL: document.querySelector("meta[name='direct-upload-url']").getAttribute("content"),
// };
}

componentWillMount() {
this.uppy = new Uppy({
id: "uppy-file-upload",
// autoProceed: false,
restrictions: {
allowedFileTypes: [".mp4", ".mp3"]
},
});

this.uppy
// .use(ActiveStorageUpload, {
// directUploadUrl: this.state.dirUploadURL
// })
.use(GoogleDrive, {
companionUrl: 'http://localhost:3020'
})
.use(AwsS3, {
// limit: 2,
// timeout: ms('1 minute'),
companionUrl: 'http://localhost:3020',
})
.on("file-removed", (file, c, d) => {
console.log("---", file, c, d);
})
.on("file-added", () => {
console.log("file added");
})
.on("upload-success", () => {
console.log("ddd");
})
.on("complete", function() {
console.log('complete');
});
}

componentWillUnmount() {
this.uppy.close();
}

render() {
return (
<React.Fragment>
<form >
<Dashboard
uppy={this.uppy}
plugins={["GoogleDrive"]}
proudlyDisplayPoweredByUppy={false}
showProgressDetails={true}
hideUploadButton={false}
target="body"
/>
<style>
{`.uppy-Dashboard-inner {
z-index: 0 !important
}`}
</style>
</form>
</React.Fragment>
);
}
}

export default FileUploadUppy;
89 changes: 7 additions & 82 deletions app/views/media_objects/_file_upload.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -171,98 +171,23 @@ Unless required by applicable law or agreed to in writing, software distributed
<% end %>

<div class="row">
<div class="col-sm-7">
<!-- web-upload -->
<p class="muted">Upload through the web (files must not exceed <%= number_to_human_size MasterFile::MAXIMUM_UPLOAD_SIZE %>)</p>
<fieldset id='uploader'>
<%= form_tag(master_files_path, :enctype=>"multipart/form-data", class: upload_form_classes, data: upload_form_data) do -%>
<!-- web-upload -->
<p class="muted">Upload through the web (files must not exceed <%= number_to_human_size MasterFile::MAXIMUM_UPLOAD_SIZE %>)</p>
<fieldset id='uploader'>
<%= form_tag(master_files_path, :enctype=>"multipart/form-data", class: upload_form_classes, data: upload_form_data) do -%>
<input type="hidden" name="container_id" value="<%= @media_object.id %>" />
<input type="hidden" name="step" value="file_upload" />

<%= hidden_field_tag("container_content_type", container_content_type, :id => "file_upload_content_type") if defined?(container_content_type) %>
<%- field_tag_options = defined?(uploader_options) ? uploader_options : {multiple: true} %>
<span class="fileinput fileinput-exists"
style="background-color: white; padding-top: 8px; padding-bottom: 2px; border: none;">
<%= check_box_tag(:workflow, 'skip_transcoding', false, id: 'skip_transcoding')%>
<%= label_tag(:skip_transcoding) do %>
<div style="font-size: inherit;" class="tooltip-help" data-title="Skip Transcoding"
data-tooltip="#skip-transcoding-tooltip">
Skip transcoding
</div>
<% end %>
</span>

<div class="fileinput fileinput-new" id="file-upload" data-provides="fileinput" style="height: 33px">
<a href="#" class="fileinput-submit fileinput-exists btn btn-outline btn-file file-upload-buttons"
data-trigger="submit" data-toggle="modal" data-target="#uploading">Upload</a>
<span class="btn btn-outline btn-file file-upload-buttons">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="Filedata[]">
</span>
<span class="fileinput-filename"></span>
<a href="#" class="close fileinput-exists fileinput-close" data-dismiss="fileinput">&times;</a>
</div>

<%= hidden_field_tag(:new_asset, true, :id => "files_new_asset") if params[:new_asset] %>
<%= hidden_field_tag("id",params[:id], :id => "file_upload_id") if params[:id] %>
<%= hidden_field_tag(:original, params[:original], :id => "files_original") %>
<% end %>
</fieldset>

<div class="collapse form-tooltip equal-height" id="skip-transcoding-tooltip">
<button class="close">&times;</button>
<p><%= t("file_upload_tip.skip_transcoding").html_safe %></p>
</div>

<div id="uploading" class="modal fade" role="dialog" data-backdrop="true" data-keyboard="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<p><i class='fa fa-spinner fa-spin'></i> Uploading. Please wait...</p>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
</div>

<!-- dropbox form -->
<div class="dropbox-upload col-sm-5">
<div class="row">
<div class="col-sm-12">
<p class="muted">
Use the dropbox to import large files.
<span class="tooltip-label">
<span class='fa fa-question-circle' type="button" data-toggle="collapse" data-target="#dropbox_tooltip" aria-expanded="false" aria-controls="dropbox_tooltip"></span>
</span>
</p>

<span class="form-text tooltip-block collapse" id="dropbox_tooltip">
<%= content_tag :span, '', class: 'close fa fa-times' %>
<p class="text-muted">
Attach selected files after uploading. Files will begin
processing when you click <strong>"Save and continue"</strong>.
</p>
<%= render partial: "dropbox_details" %>
</span>
</div>
</div>

<%= form_tag(master_files_path, id: 'dropbox_form', method: 'post') do %>
<%= hidden_field_tag("workflow") %>
<input type="hidden" name="container_id" value="<%= @media_object.id %>" />
<div class="form-group">
<%= button_tag("Open Dropbox", type: 'button', class: 'btn btn-outline', id: "browse-btn",
'data-toggle' => 'browse-everything', 'data-route' => browse_everything_engine.root_path,
'data-target' => '#dropbox_form', 'data-context' => @media_object.collection.id ) %>
</div>
<% end %>
</div>
</fieldset>
<%= react_component("FileUploadUppy", {}) %>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -322,4 +247,4 @@ Unless required by applicable law or agreed to in writing, software distributed
$(event.currentTarget).find('.flash-message').html("Failed to update.")
});
</script>
<% end %>
<% end %>
34 changes: 19 additions & 15 deletions db/schema.rb
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,15 @@

ActiveRecord::Schema.define(version: 2022_08_22_170237) do

create_table "active_encode_encode_records", force: :cascade do |t|
# These are extensions that must be enabled in order to support this database
enable_extension "plpgsql"

create_table "active_encode_encode_records", id: :serial, force: :cascade do |t|
t.string "global_id"
t.string "state"
t.string "adapter"
t.string "title"
t.text "raw_object", limit: 16777215
t.text "raw_object"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.text "create_options"
Expand All @@ -33,8 +36,8 @@
create_table "active_storage_attachments", force: :cascade do |t|
t.string "name", null: false
t.string "record_type", null: false
t.integer "record_id", null: false
t.integer "blob_id", null: false
t.bigint "record_id", null: false
t.bigint "blob_id", null: false
t.datetime "created_at", null: false
t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id"
t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness", unique: true
Expand All @@ -54,7 +57,7 @@
create_table "annotations", force: :cascade do |t|
t.string "uuid"
t.string "source_uri"
t.integer "playlist_item_id"
t.bigint "playlist_item_id"
t.text "annotation"
t.string "type"
t.index ["playlist_item_id"], name: "index_annotations_on_playlist_item_id"
Expand All @@ -72,12 +75,12 @@
end

create_table "batch_entries", force: :cascade do |t|
t.integer "batch_registries_id"
t.text "payload", limit: 1073741823
t.bigint "batch_registries_id"
t.text "payload"
t.boolean "complete", default: false, null: false
t.boolean "error", default: false, null: false
t.string "current_status"
t.text "error_message", limit: 65535
t.text "error_message"
t.string "media_object_pid"
t.integer "position"
t.datetime "created_at", null: false
Expand Down Expand Up @@ -116,7 +119,7 @@
end

create_table "checkouts", force: :cascade do |t|
t.integer "user_id"
t.bigint "user_id"
t.string "media_object_id"
t.datetime "checkout_time"
t.datetime "return_time"
Expand Down Expand Up @@ -167,16 +170,16 @@
t.string "namespace", default: "default", null: false
t.string "template", null: false
t.text "counters"
t.integer "seq", default: 0
t.bigint "seq", default: 0
t.binary "rand"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.index ["namespace"], name: "index_minter_states_on_namespace", unique: true
end

create_table "playlist_items", force: :cascade do |t|
t.integer "playlist_id", null: false
t.integer "clip_id", null: false
t.bigint "playlist_id", null: false
t.bigint "clip_id", null: false
t.integer "position"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
Expand All @@ -186,7 +189,7 @@

create_table "playlists", force: :cascade do |t|
t.string "title"
t.integer "user_id", null: false
t.bigint "user_id", null: false
t.string "comment"
t.string "visibility"
t.datetime "created_at", null: false
Expand Down Expand Up @@ -234,13 +237,13 @@

create_table "timelines", force: :cascade do |t|
t.string "title"
t.integer "user_id"
t.bigint "user_id"
t.string "visibility"
t.text "description"
t.string "access_token"
t.string "tags"
t.string "source"
t.text "manifest", limit: 16777215
t.text "manifest"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.index ["user_id"], name: "index_timelines_on_user_id"
Expand Down Expand Up @@ -280,4 +283,5 @@

add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
add_foreign_key "checkouts", "users"
add_foreign_key "timelines", "users"
end
44 changes: 44 additions & 0 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,49 @@ services:
redis-test:
<<: *redis

uppy:
image: transloadit/companion
# build:
# context: .
# dockerfile: Dockerfile
# volumes:
# - /app/node_modules
# - /mnt/uppy-server-data:/mnt/uppy-server-data
ports:
- "3020:3020"
networks:
internal:
external:
environment:
- COMPANION_S3_KEY=minio
- COMPANION_S3_SECRET=minio123
- COMPANION_S3_BUCKET=masterfiles
# - COMPANION_S3_REGION=us-east-1
# AWS config
- COMPANION_AWS_KEY=minio
- COMPANION_AWS_SECRET=minio123
- COMPANION_AWS_BUCKET=masterfiles
# - COMPANION_AWS_REGION=us-east-1
- COMPANION_AWS_ENDPOINT="http://localhost:9000"
# to enable S3 Transfer Acceleration (default: false)
- COMPANION_AWS_USE_ACCELERATE_ENDPOINT="false"
# to set a canned ACL for uploaded objects: https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl
- COMPANION_AWS_ACL="private"
- COMPANION_S3_ENDPOINT=http://localhost:9000
# any long set of random characters for the server session
- COMPANION_SECRET="shh!Issa Secret!"
# specifying a secret file will override a directly set secret
# - COMPANION_SECRET_FILE="PATH/TO/COMPANION/SECRET/FILE"
# corresponds to the server.host option
- COMPANION_DOMAIN="localhost"
- COMPANION_PROTOCOL="http"
# corresponds to the filePath option
- COMPANION_DATADIR=/tmp
# to enable Google Drive
- COMPANION_GOOGLE_KEY='826510525745-v1p7b4nlv4h5o1k3qde7r526o5l3un4s.apps.googleusercontent.com'
- COMPANION_GOOGLE_SECRET='xoK-_Di1Ijt6wsY1yvilpa2B'


avalon: &avalon
image: avalonmediasystem/avalon:7.4.0-dev
build:
Expand All @@ -88,6 +131,7 @@ services:
- redis
- hls
- minio
- uppy
environment:
- APP_NAME=avalon
- BUNDLE_FLAGS=--with development postgres --without production test
Expand Down
11 changes: 11 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,19 @@
"dependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@excid3/uppy-activestorage-upload": "https://github.com/excid3/uppy-activestorage-upload.git",
"@rails/activestorage": "^7.0.4",
"@rails/webpacker": "^5.2.2",
"@samvera/iiif-react-media-player": "1.2.1",
"@uppy/aws-s3": "^3.0.4",
"@uppy/companion": "^4.0.5",
"@uppy/core": "^3.0.4",
"@uppy/dashboard": "^3.1.0",
"@uppy/drag-drop": "^3.0.1",
"@uppy/file-input": "^3.0.1",
"@uppy/google-drive": "^3.0.1",
"@uppy/progress-bar": "^3.0.1",
"@uppy/react": "^3.0.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"cropperjs": "^1.5.5",
"hls.js": "https://github.com/avalonmediasystem/hls.js#stricter_ts_probing",
Expand Down
Loading

0 comments on commit bf0a4c5

Please sign in to comment.