Skip to content

Commit

Permalink
1st Draft Tus
Browse files Browse the repository at this point in the history
  • Loading branch information
@ravjot07
ravjot07 committed Apr 1, 2024
1 parent 482bced commit a593d95
Show file tree
Hide file tree
Showing 5 changed files with 190 additions and 48 deletions.
14 changes: 7 additions & 7 deletions api/buildout.cfg
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@ zcml-additional =
<configure xmlns="http://namespaces.zope.org/zope"
xmlns:plone="http://namespaces.plone.org/plone">
<plone:CORSPolicy
allow_origin="http://localhost:3000,http://127.0.0.1:3000"
allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
allow_credentials="true"
expose_headers="Content-Length,X-My-Header"
allow_headers="Accept,Authorization,Content-Type,X-Custom-Header,Origin,Lock-Token"
max_age="3600"
/>
allow_origin="*"
allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
allow_credentials="true"
allow_headers="Accept,Authorization,Origin,X-Requested-With,Content-Type,Upload-Length,Upload-Offset,Tus-Resumable,Upload-Metadata,Lock-Token"
expose_headers="Upload-Offset,Location,Upload-Length,Tus-Version,Tus-Resumable,Tus-Max-Size,Tus-Extension,Upload-Metadata"
max_age="3600"
/>
</configure>

[test]
Expand Down
16 changes: 8 additions & 8 deletions docs/source/development/environment-variables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,14 @@ Anything that would mean not using the internal proxy (eg. using RAZZLE_API_PATH
zcml-additional =
<configure xmlns="http://namespaces.zope.org/zope"
xmlns:plone="http://namespaces.plone.org/plone">
<plone:CORSPolicy
allow_origin="http://localhost:3000,http://127.0.0.1:3000"
allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
allow_credentials="true"
expose_headers="Content-Length,X-My-Header"
allow_headers="Accept,Authorization,Content-Type,X-Custom-Header,Origin,Lock-Token"
max_age="3600"
/>
<plone:CORSPolicy
allow_origin="*"
allow_methods="DELETE,GET,OPTIONS,PATCH,POST,PUT"
allow_credentials="true"
allow_headers="Accept,Authorization,Origin,X-Requested-With,Content-Type,Upload-Length,Upload-Offset,Tus-Resumable,Upload-Metadata,Lock-Token"
expose_headers="Upload-Offset,Location,Upload-Length,Tus-Version,Tus-Resumable,Tus-Max-Size,Tus-Extension,Upload-Metadata"
max_age="3600"
/>
</configure>
```
````
Expand Down
5 changes: 3 additions & 2 deletions packages/volto/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,7 @@
"slate-react": "0.98.4",
"superagent": "3.8.2",
"tlds": "1.203.1",
"tus-js-client": "^4.1.0",
"undoo": "0.5.0",
"universal-cookie": "4.0.4",
"universal-cookie-express": "4.0.3",
Expand All @@ -281,9 +282,9 @@
"@babel/plugin-syntax-export-namespace-from": "7.8.3",
"@babel/runtime": "7.20.6",
"@babel/types": "7.20.5",
"@jest/globals": "^29.7.0",
"@loadable/babel-plugin": "5.13.2",
"@loadable/webpack-plugin": "5.15.2",
"@jest/globals": "^29.7.0",
"@plone/types": "workspace:*",
"@plone/volto-coresandbox": "workspace:*",
"@sinonjs/fake-timers": "^6.0.1",
Expand Down Expand Up @@ -338,8 +339,8 @@
"identity-obj-proxy": "3.0.0",
"jest": "26.6.3",
"jest-environment-jsdom": "^26",
"jsdom": "^16.7.0",
"jest-file": "1.0.0",
"jsdom": "^16.7.0",
"jsonwebtoken": "9.0.0",
"less": "3.11.1",
"less-loader": "11.1.0",
Expand Down
94 changes: 74 additions & 20 deletions packages/volto/src/components/manage/Widgets/FileWidget.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Image, Dimmer } from 'semantic-ui-react';
import { readAsDataURL } from 'promise-file-reader';
// import { readAsDataURL } from 'promise-file-reader';
import { injectIntl } from 'react-intl';
import deleteSVG from '@plone/volto/icons/delete.svg';
import { Icon, FormFieldWrapper, UniversalLink } from '@plone/volto/components';
import loadable from '@loadable/component';
import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
import { defineMessages, useIntl } from 'react-intl';
import { Upload} from 'tus-js-client';

Check failure on line 16 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Insert `·`

const imageMimetypes = [
'image/png',
Expand Down Expand Up @@ -93,32 +94,85 @@ const FileWidget = (props) => {
* @param {array} files File objects
* @returns {undefined}
*/

// const onDrop = (files) => {
// const file = files[0];
// if (!validateFileUploadSize(file, intl.formatMessage)) return;
// readAsDataURL(file).then((data) => {
// const fields = data.match(/^data:(.*);(.*),(.*)$/);
// onChange(id, {
// data: fields[3],
// encoding: fields[2],
// 'content-type': fields[1],
// filename: file.name,
// });
// });

// let reader = new FileReader();
// reader.onload = function () {
// const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
// if (imageMimetypes.includes(fields[1])) {
// setFileType(true);
// let imagePreview = document.getElementById(`field-${id}-image`);
// if (imagePreview) imagePreview.src = reader.result;
// } else {
// setFileType(false);
// }
// };
// reader.readAsDataURL(files[0]);
// };


Check failure on line 125 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Delete `⏎⏎·`

const onDrop = (files) => {
const file = files[0];
if (!validateFileUploadSize(file, intl.formatMessage)) return;
readAsDataURL(file).then((data) => {
const fields = data.match(/^data:(.*);(.*),(.*)$/);
onChange(id, {
data: fields[3],
encoding: fields[2],
'content-type': fields[1],

Check failure on line 130 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Delete `··`
// Create a new tus upload
const upload = new Upload(file, {
endpoint: "https://tusd.tusdemo.net/files/",

Check failure on line 133 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Replace `"https://tusd.tusdemo.net/files/",·` with `'https://tusd.tusdemo.net/files/',`
retryDelays: [0, 1000, 3000, 5000],

Check failure on line 134 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Delete `·`
metadata: {
filename: file.name,
});
filetype: file.type,
},
onError: function (error) {
console.log("Failed because: " + error);

Check warning on line 140 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Unexpected console statement

Check failure on line 140 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Replace `"Failed·because:·"` with `'Failed·because:·'`
},
onProgress: function (bytesUploaded, bytesTotal) {
const percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);

Check failure on line 143 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Replace `(bytesUploaded·/·bytesTotal` with `((bytesUploaded·/·bytesTotal)`
console.log(bytesUploaded, bytesTotal, percentage + "%");

Check warning on line 144 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Unexpected console statement

Check failure on line 144 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Replace `"%"` with `'%'`
},
onSuccess: function () {
console.log("Upload successful. File URL:", upload.url);

Check warning on line 147 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Unexpected console statement

Check failure on line 147 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Replace `"Upload·successful.·File·URL:"` with `'Upload·successful.·File·URL:'`
// Set data for successful upload
onChange(id, {
'content-type': file.type,
filename: file.name,
download: upload.url,

Check failure on line 152 in packages/volto/src/components/manage/Widgets/FileWidget.jsx

View workflow job for this annotation

GitHub Actions / ESlint 

Delete `·`
});
}
});

// Start the upload
upload.start();


let reader = new FileReader();
reader.onload = function () {
const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
if (imageMimetypes.includes(fields[1])) {
setFileType(true);
let imagePreview = document.getElementById(`field-${id}-image`);
if (imagePreview) imagePreview.src = reader.result;
} else {
setFileType(false);
}
};
reader.readAsDataURL(files[0]);
// For image preview
let reader = new FileReader();
reader.onload = function () {
const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
if (imageMimetypes.includes(fields[1])) {
setFileType(true);
let imagePreview = document.getElementById(`field-${id}-image`);
if (imagePreview) imagePreview.src = reader.result;
} else {
setFileType(false);
}
};
reader.readAsDataURL(file);
};


return (
<FormFieldWrapper {...props}>
Expand Down
Loading

0 comments on commit a593d95

Please sign in to comment.