Hello!
I’m looking information if Transloadit solutions will be suitable for my company needs.
We’re developing application - (.Net WebApi + Angular frontend), but every client gets instalator and has own instance locally hosted - there is no web hosted app.
File upload from local drive to app is already implemented using TUS (tusdotnet on webapi side as server and tus-js-client on frontend side).
Now, we would like to extend functionality to have intergation with Google Drive/Dropbox/Box and allow users to select files from their webdrives and upload to our application for future processing. For now - no need to do anything with those files, just need to authorize, browse them and upload to our app.
I did a quick POC:
export class UploadManagerComponent
extends ManageGenericListComponent
implements OnInit
{
private fileUploadUrl: string = getEndpoint('fileUploadUrl');
public dashboardModalProps = {
inline: true,
width: 'auto',
};
public uppy: Uppy = new Uppy({
debug: true,
autoProceed: true,
});
constructor(
protected readonly store: Store<fromRoot.State>,
public readonly commonTab: CommonTabService,
public readonly entityUpdateService: EntityUpdateService,
public readonly tEngine: TranslationEngineService,
public readonly iconService: CustomIconService,
public readonly _confirmationService: ConfirmationService
) {
super(
store,
entityUpdateService,
_confirmationService,
tEngine,
iconService
);
}
ngOnInit() {
super.ngOnInit();
const companionAllowedHosts = [
'https://localhost:2402',
'http://localhost:3020',
];
const token = getAuthenticationToken();
this.uppy.on('file-added', file => {
console.warn('file added to uppy:', file);
let importOptions: ImportOptionsMeta = {
fileName: file.name,
};
this.uppy.setMeta({ importOptions: JSON.stringify(importOptions) });
});
this.uppy
.use(Dashboard)
.use(Transloadit, {
assemblyOptions: {
params: {
auth: { key: 'auth key from Credentials sections in Transloadit portal' },
},
},
})
.use(GoogleDrive, {
companionUrl: 'https://companion.uppy.io/',
companionAllowedHosts: companionAllowedHosts,
})
// .use(Dropbox, {
// companionUrl: 'https://companion.uppy.io',
// companionAllowedHosts: companionAllowedHosts,
// })
.use(Tus, {
endpoint: this.fileUploadUrl,
retryDelays: [0, 1000, 3000, 5000],
headers: {
Authorization: `Bearer ${token}`,
},
});
}
}
I setup locally hosted standalone companion app.
Created a google app so I get key and secret from google for authorization.
And it worked fine! (above code example is adjusted to use hosted companion)
Now, the question - we would like to avoid maintaining own Companion (and google, dropbox, box apps and all credentials related to it) and use Transloadit hosted companion. Tried to use https://companion.uppy.io mentioned in docs but cors are failing:
Access to fetch at 'https://companion.uppy.io/drive/list/root' from origin 'https://localhost:2402' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Is using Transloadit hosted Companion in such scenario even possible?
All requests will be always coming from https://localhost:2402, is it possible to configure cors somehow?
Would love to hear what are the options and implementation tips. Or if standalone app is the only way to handle that.
Regards,
Jakub