Skip to content
Snippets Groups Projects
Commit 64cf0e5d authored by Lucas Eduardo Schoenfelder's avatar Lucas Eduardo Schoenfelder
Browse files

finishing up upload

parent d24c619f
No related branches found
No related tags found
3 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!24Tela recurso
Hide whitespace changes
Inline Side-by-side
Showing
with 151 additions and 69 deletions
src/Components/PublicationPermissionsContent.js
+ 84
− 32
View file @ 64cf0e5d
import React from 'react';
import React, {useState, useEffect} from 'react';
import Typography from '@material-ui/core/Typography';
import CardContent from '@material-ui/core/CardContent';
import styled from 'styled-components'
......@@ -7,6 +7,9 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import axios from 'axios'
import {apiUrl} from '../env';
const StyledFormControl = styled(FormControl)`
display: "block ruby";
......@@ -18,7 +21,35 @@ const StyledDivEvaluateQuestion = styled.div`
justify-content : space-between;
`
const BlueRadio = withStyles({
root: {
color: '#666',
'&$checked': {
color: '#00bcd4',
},
},
checked: {},
})((props) => <Radio color="default" {...props} />);
export default function PublicationPermissionsContent (props) {
{/*To DO change to get https://api.portalmec.c3sl.ufpr.br/v1/questions*/}
const [questionsArr, setQuestionsArr] = useState([])
const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)}
useEffect(() => {
axios.get(`${apiUrl}/questions/`).then(
(response) => {
console.log(response)
handleSetQuestionsArr(response.data)
},
(error) => {
console.log('falhou em get questions')
}
)
}, [])
return (
<CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
<Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", fontSize:"26px"}}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
......@@ -41,41 +72,62 @@ export default function PublicationPermissionsContent (props) {
<StyledFormControl component="fieldset" style={{display:"BlockRuby"}} margin='dense' fullWidth={true}>
<Grid container>
<Grid item xs={10}>
<p>
O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?
</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name="radio1" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
</RadioGroup>
</Grid>
{
questionsArr.map((question, index) =>
<Grid item xs={10}>
<p>
O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name="radio2" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
</RadioGroup>
</Grid>
<Grid item xs={10}>
<p>
O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name="radio3" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
</RadioGroup>
</Grid>
</Grid>
question.id !== 4 &&
<React.Fragment key={question.id}>
<Grid item xs={10}>
<p>{question.description}</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name={"radio" + (index + 1)} onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
</RadioGroup>
</Grid>
</React.Fragment>
)
}
</Grid>
</StyledFormControl>
</div>
</CardContent>
)
}
{/*
<Grid item xs={10}>
<p>
O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?
</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name="radio1" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
</RadioGroup>
</Grid>
<Grid item xs={10}>
<p>
O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name="radio2" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
</RadioGroup>
</Grid>
<Grid item xs={10}>
<p>
O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
</p>
</Grid>
<Grid item xs={2}>
<RadioGroup row name="radio3" onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
</RadioGroup>
</Grid>
</Grid>
*/}
src/Components/UploadPageComponents/ButtonsDiv.js
+ 1
− 0
View file @ 64cf0e5d
......@@ -34,6 +34,7 @@ export default function ButtonsDiv (props) {
<Grid container justify="center">
{/*botao excluir na pagina de editar*/}
<Grid item md={2} xs={6}>
<GreyButton onClick={() => {toggleModalCancelar(true)}}>
<span className="button-text">
......
src/Components/UploadPageComponents/DragAndDrop.tsx
+ 38
− 26
View file @ 64cf0e5d
......@@ -21,52 +21,51 @@ import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import {DottedBox, BlueButton} from './StyledComponents.js';
import FileToUpload from './FileToUpload'
import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
type Props = {
draftID : string;
}
const UploadMediaComponent: React.FC<Props> = ({draftID, children}) => {
const [filesToUpload, setFilesToUpload] = useState([] as FileToUpload[]);
const [filesToUpload, setFilesToUpload] = useState<FileToUpload | undefined>(undefined);
const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const files: FileList | null = e.target.files;
if(!files) return;
let filesToUpload: FileToUpload[] = [];
for (let i = 0; i < files.length; i++) {
let config = getAxiosConfig()
filesToUpload.push(new FileToUpload(files[i], files[i].name, draftID));
}
let fileToUpload: FileToUpload = new FileToUpload(files[0], files[0].name, draftID);
setFilesToUpload(filesToUpload);
setFilesToUpload(fileToUpload);
if (fileToUpload != undefined){
fileToUpload.uploadFile();
}
};
const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
for (let i = 0; i < filesToUpload.length; i++) {
filesToUpload[i].uploadFile();
}
};
return (
<div className="upload-container">
<h2 className="upload-title">File Uploader</h2>
<div className="upload-form">
<form id="file_upload" onSubmit={onFormSubmit}>
<div className="upload-file-select">
<label htmlFor="file_1">Select files for upload</label>
<input id="file_1" type="file" multiple onChange={onFileChange}/>
</div>
<div className="upload-file-list">
{filesToUpload.map((f,i) => <div className="upload-file" key={i}>{f.name} - {f.file.size}bytes</div>)}
</div>
<div className="upload-submit">
<input type="submit" value="submit"/>
</div>
<form id="file_upload">
<DottedBox
>
<AddAPhotoIcon className="icon"/>
<input
type="file"
onChange = {onFileChange}
id="upload-file-thumbnail"
style={{display : "none"}}
/>
<BlueButton>
<label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
ESCOLHER IMAGEM
</label>
</BlueButton>
<span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
</DottedBox>
</form>
</div>
</div>
......@@ -75,6 +74,19 @@ const UploadMediaComponent: React.FC<Props> = ({draftID, children}) => {
UploadMediaComponent.displayName = 'UploadMedia';
export default UploadMediaComponent;
{/*<div className="upload-file-select">
<label htmlFor="file_1">Select files for upload</label>
<input id="file_1" type="file" multiple onChange={onFileChange}/>
</div>
<div className="upload-file-list">
{filesToUpload.map((f,i) => <div className="upload-file" key={i}>{f.name} - {f.file.size}bytes</div>)}
</div>
<div className="upload-submit">
<input type="submit" value="submit"/>
</div>*/}
{/*
const [dropDepth, setDropDepth] = useState(0)
const [inDropZone, toggleInDropZone] = useState(false)
......
src/Components/UploadPageComponents/FileToUpload.ts
+ 22
− 5
View file @ 64cf0e5d
export default class FileToUpload {
static chunkSize = 262144;
readonly request: XMLHttpRequest;
static uploadUrl = 'https://api.portalmec.c3sl.ufpr.br/v1/learning_objects/1231';
readonly uploadUrl: string;
readonly file: File;
readonly name: string;
readonly draftID: string;
......@@ -17,6 +17,7 @@ export default class FileToUpload {
this.file = file;
this.name = name;
this.draftID = draftID;
this.uploadUrl = 'https://api.portalmec.c3sl.ufpr.br/v1/learning_objects/' + draftID + '/chunk'
this._chunkIdentifier = draftID + '-' + this.name;
this._chunkNumber = 0;
......@@ -25,13 +26,21 @@ export default class FileToUpload {
}
uploadFile() {
this.request.open('POST', FileToUpload.uploadUrl, true);
this.request.open('POST', this.uploadUrl, true);
let chunk: Blob = this.file.slice(this.currentChunkStartByte, this.currentChunkFinalByte); // split the file according to the boundaries
this.request.setRequestHeader('Content-Range', `bytes ${this.currentChunkStartByte}-${this.currentChunkFinalByte}/${this.file.size}`);
//this.request.setRequestHeader('uid', sessionStorage.getItem('@portalmec/uid'))
//this.request.setRequestHeader('client', sessionStorage.getItem('@portalmec/clientToken'))
//set necessary headers
this.request.setRequestHeader('Content-Range', `bytes ${this.currentChunkStartByte}-${this.currentChunkFinalByte}/${this.file.size}`);
if (sessionStorage.getItem('@portalmec/uid') != undefined) {
this.request.setRequestHeader('uid', sessionStorage.getItem('@portalmec/uid')!)
}
if (sessionStorage.getItem('@portalmec/clientToken') != undefined) {
this.request.setRequestHeader('client', String(sessionStorage.getItem('@portalmec/clientToken')))
}
if (sessionStorage.getItem('@portalmec/accessToken') != undefined) {
this.request.setRequestHeader('access-token', String(sessionStorage.getItem('@portalmec/accessToken')))
}
this.request.onload = () => {
const remainingBytes = this.file.size - this.currentChunkFinalByte;
......@@ -54,6 +63,7 @@ export default class FileToUpload {
this._chunkNumber = this._chunkNumber + 1
}
//add attributes
const formData = new FormData();
formData.append('_chunkFilename', this.file.name);
formData.append('_chunkIdentifier', this._chunkIdentifier);
......@@ -64,6 +74,13 @@ export default class FileToUpload {
formData.append('_totalSize', String(this.file.size));
formData.append('file', chunk);
this.request.onreadystatechange = (request: XMLHttpRequest, event: Event): any => {
if(request.readyState === XMLHttpRequest.DONE){
console.log(request.getResponseHeader('access-token'))
sessionStorage.setItem('@portalmec/accessToken', request.getResponseHeader('access-token')!)
}
}
this.request.send(formData);// send it now!
}
}
src/Components/UploadPageComponents/UploadFileWrapper.js
+ 1
− 1
View file @ 64cf0e5d
......@@ -63,7 +63,7 @@ export default function UploadFileWrapper (props) {
<div className="upload-title"> Enviar Recurso</div>
<div className="flex-column">
{/*props.draftID*/}
<UploadMediaComponent draftID={'123123'}/>
<UploadMediaComponent draftID={props.draftID}/>
<div className="strike-box">
<div className="strike"/><h3>ou</h3><div className="strike"/>
</div>
......
src/Pages/PublicationPermissionsPage.js
+ 4
− 4
View file @ 64cf0e5d
......@@ -167,8 +167,8 @@ export default function PermissionsContainer(props) {
<Styledspan
style={
unavailableButton
? { color: "#666666" }
: { color: "#ffffff" }
? { color: "#666666", fontWeight : "600" }
: { color: "#ffffff", fontWeight : "600" }
}
>
Continuar{" "}
......@@ -177,10 +177,10 @@ export default function PermissionsContainer(props) {
<Button
style={{
marginLeft: "45px",
backgroundColor: "#e9e9e9"
backgroundColor: "#e9e9e9",
}}
>
<Styledspan style={{ color: "rgb(102, 102, 102)" }}>
<Styledspan style={{ color: "rgb(102, 102, 102)" , fontWeight : "600 !important"}}>
Cancelar
</Styledspan>
</Button>
......
src/Pages/UploadPage.js
+ 1
− 1
View file @ 64cf0e5d
......@@ -109,7 +109,7 @@ export default function UploadPage (props) {
return (
<React.Fragment>
{
state.currentUser.id === '' ?
state.currentUser.id !== '' ?
(
<React.Fragment>
<Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment