diff --git a/app/assets/javascripts/direct_upload.js.coffee b/app/assets/javascripts/direct_upload.js.coffee deleted file mode 100644 index 10ec9d9df8..0000000000 --- a/app/assets/javascripts/direct_upload.js.coffee +++ /dev/null @@ -1,67 +0,0 @@ -# Copyright 2011-2023, The Trustees of Indiana University and Northwestern -# University. Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# -# You may obtain a copy of the License at -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software distributed -# under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR -# CONDITIONS OF ANY KIND, either express or implied. See the License for the -# specific language governing permissions and limitations under the License. -# --- END LICENSE_HEADER BLOCK --- - -$ -> - $('.directupload').find("input:file").each (i, elem)-> - file_input = $(elem) - form = $(file_input.parents('form:first')) - submit_button = form.find('input[type="submit"], *[data-trigger="submit"]') - submit_button.on 'click', -> - form.addClass('form-disabled') - $('.directupload input:file').fileupload 'send', - files: $('.directupload input:file').prop('files') - return false - progress_bar = $("
"); - bar_container = $("").append(progress_bar); - $('div.fileinput').after(bar_container) - file_input.fileupload - fileInput: file_input - url: form.data('url') - type: 'POST' - autoUpload: false - formData: form.data('form-data') - paramName: 'file' - dataType: 'XML' - replaceFileInput: false - progressall: (e, data)-> - progress = parseInt(data.loaded / data.total * 100, 10) - progress_bar.css('width', "#{progress}%") - start: (e)-> - progress_bar. - css('background', 'green'). - css('display', 'block'). - css('width', '0%'). - css('padding', '7px'). - text("Loading...") - done: (e, data)-> - form.removeClass('form-disabled') - progress_bar.text("Uploading done") - - # extract key and generate URL from response - key = $(data.jqXHR.responseXML).find("Key").text(); - bucket = $(data.jqXHR.responseXML).find("Bucket").text(); - url = "s3://#{bucket}/#{key}" - - # create hidden field - input = $ "", - type: 'hidden' - name: 'selected_files[0][url]' - value: url - file_input.replaceWith(input) - form.submit() - fail: (e, data)-> - form.removeClass('form-disabled') - progress_bar. - css("background", "red"). - text("Failed") diff --git a/app/assets/stylesheets/avalon.scss b/app/assets/stylesheets/avalon.scss index 2e34a79336..1008793928 100644 --- a/app/assets/stylesheets/avalon.scss +++ b/app/assets/stylesheets/avalon.scss @@ -367,16 +367,6 @@ span.constraints-label { white-space: nowrap; } -.fileinput { - max-width: 500px; - - .form-control { - max-width: 500px; - white-space: nowrap; - overflow-x: hidden; - } -} - a[data-trigger='submit'] { text-decoration: none; color: $dark; @@ -990,12 +980,6 @@ h5.card-title { word-break: break-all; } -// Fixes the input displaying over the dropdown datepicker calendar -.fileinput { - position: relative; - z-index: 1; -} - .is-invalid { border-color: $danger; } @@ -1111,37 +1095,6 @@ h5.card-title { } } -/* File upload step */ -.file-upload-buttons { - display: block; - padding-top: 5px; - min-width: 75px; - margin-right: 5px; - height: 30px; -} - -.fileinput-filename { - width: auto; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 5px; -} - -.form-disabled { - pointer-events: none; - opacity: 0.4; -} - -.fileinput-close { - padding-top: 5px; - float: none; -} - -#file-upload { - display: flex; -} - /* DataTables in Playlists, Timelines, Persona Users, and Encode Dashboard */ .dataTableToolsTop { text-align: right; diff --git a/app/assets/stylesheets/avalon/_form.scss b/app/assets/stylesheets/avalon/_form.scss index bceb1e904a..c79de24fcb 100644 --- a/app/assets/stylesheets/avalon/_form.scss +++ b/app/assets/stylesheets/avalon/_form.scss @@ -98,17 +98,6 @@ label { color: $dark; } -.fileinput-submit { - background-color: $blue !important; - border-color: $blue !important; - - &:hover { - background-color: darken($blue, 15%) !important; - } - - color: $white !important; -} - .upload-file-wrapper { padding: 5px 5px 0 5px !important; } @@ -118,9 +107,3 @@ label { font-weight: bold; } } - -#resource-description { - .input-group { - flex-wrap: nowrap; - } -} diff --git a/app/helpers/upload_form_helper.rb b/app/helpers/upload_form_helper.rb index 7a34d4b97f..3a577b550e 100644 --- a/app/helpers/upload_form_helper.rb +++ b/app/helpers/upload_form_helper.rb @@ -40,4 +40,12 @@ def upload_form_data {} end end + + # def multipart_upload_data + # if direct_upload? + # bucket = Aws::S3::Bucket.new(name: Settings.encoding.masterfile_bucket) + # multipart_upload = Aws::S3::Client.new.create_multipart_upload(bucket: bucket.name, key: 'lo') + # { 'upload_id' => multipart_upload[:upload_id] } + # end + # end end diff --git a/app/javascript/components/FileUploadUppy.jsx b/app/javascript/components/FileUploadUppy.jsx new file mode 100755 index 0000000000..759c640f78 --- /dev/null +++ b/app/javascript/components/FileUploadUppy.jsx @@ -0,0 +1,117 @@ +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'; +import AwsS3Multipart from '@uppy/aws-s3-multipart'; + +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() { + const t = this; + this.uppy = new Uppy({ + id: "uppy-file-upload", + autoProceed: true, + restrictions: { + allowedFileTypes: [".mp4", ".mp3"] + }, + }); + + this.uppy + // .use(ActiveStorageUpload, { + // directUploadUrl: this.state.dirUploadURL + // }) + .use(GoogleDrive, { + companionUrl: 'http://localhost:3020' + }) + // .use(AwsS3Multipart, { + // limit: 5, + // timeout: 60*1000, // set to 1min + // companionUrl: '/', + // }) + .use(AwsS3, { + limit: 5, + timeout: 60*1000, // set to 1min + companionUrl: 'http://localhost:3020', + getUploadParameters() { + return Promise.resolve({ + method: 'POST', + url: t.props.uploadData['url'], + fields: t.props.uploadData['form-data'] + }); + } + }) + .on("file-removed", (file, c, d) => { + console.log("File Removed --- ", file, c, d); + }) + .on("file-added", () => { + console.log("File Added, ", t.props.uploadData); + }) + .on("complete", function({ failed, successful }) { + if(failed.length > 0) { + console.log("File Upload S3 --- Error"); + } + if(successful.length > 0) { + console.log("File Upload S3 --- Success"); + const { containerID, step } = t.props; + let formData = new FormData(); + successful.map((res, index) => { + const s3Url = res.uploadURL.replace('http://localhost:9000/', 's3://'); + formData.append('selected_files[' + index + '][url]', s3Url); + }) + formData.append('container_id', containerID); + formData.append('step', step); + + fetch('http://localhost:3000/master_files', { + method: 'POST', + headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, + body: formData + }) + .then(res => { + location.reload(); + }) + .catch(error => { + console.error('MasterFile creation failed, ', error); + }); + } + }); + } + + componentWillUnmount() { + this.uppy.close(); + } + + render() { + return ( +Upload through the web (files must not exceed <%= number_to_human_size MasterFile::MAXIMUM_UPLOAD_SIZE %>)
- - -<%= t("file_upload_tip.skip_transcoding").html_safe %>
-- Use the dropbox to import large files. - - - -
- - - <%= content_tag :span, '', class: 'close fa fa-times' %> -- Attach selected files after uploading. Files will begin - processing when you click "Save and continue". -
- <%= render partial: "dropbox_details" %> - -Upload through the web (files must not exceed <%= number_to_human_size MasterFile::MAXIMUM_UPLOAD_SIZE %>)
+ <%= react_component("FileUploadUppy", { uploadData: upload_form_data, containerID: @media_object.id, step: 'file_upload' }) %>