demarches-normaliennes/app/javascript/shared/activestorage/uploader.ts

128 lines
3.6 KiB
TypeScript
Raw Normal View History

import { DirectUpload } from '@rails/activestorage';
2022-05-06 19:41:16 +02:00
import { httpRequest, ResponseError } from '@utils';
2019-02-13 14:16:22 +01:00
import ProgressBar from './progress-bar';
2022-05-06 19:41:16 +02:00
import {
FileUploadError,
errorFromDirectUploadMessage,
ERROR_CODE_ATTACH
} from './file-upload-error';
2019-02-13 14:16:22 +01:00
const BYTES_TO_MB_RATIO = 1_048_576;
2019-02-13 14:16:22 +01:00
/**
Uploader class is a delegate for DirectUpload instance
used to track lifecycle and progress of an upload.
2019-02-13 14:16:22 +01:00
*/
export default class Uploader {
directUpload: DirectUpload;
progressBar: ProgressBar;
autoAttachUrl?: string;
maxFileSize: number;
file: File;
constructor(
input: HTMLInputElement,
file: File,
directUploadUrl: string,
autoAttachUrl?: string,
maxFileSize?: string
) {
this.file = file;
2019-02-13 14:16:22 +01:00
this.directUpload = new DirectUpload(file, directUploadUrl, this);
this.progressBar = new ProgressBar(input, this.directUpload.id + '', file);
this.autoAttachUrl = autoAttachUrl;
try {
this.maxFileSize = parseInt(maxFileSize || '0', 10);
} catch (e) {
this.maxFileSize = 0;
}
2019-02-13 14:16:22 +01:00
}
/**
Upload (and optionally attach) the file.
Returns the blob signed id on success.
Throws a FileUploadError on failure.
*/
async start() {
2019-02-13 14:16:22 +01:00
this.progressBar.start();
if (this.maxFileSize > 0 && this.file.size > this.maxFileSize) {
throw `La taille du fichier ne peut dépasser
${this.maxFileSize / BYTES_TO_MB_RATIO} Mo
(in english: File size can't be bigger than
${this.maxFileSize / BYTES_TO_MB_RATIO} Mo).`;
}
try {
2022-05-06 19:41:16 +02:00
const blobSignedId = await this.upload();
if (this.autoAttachUrl) {
2022-05-06 19:41:16 +02:00
await this.attach(blobSignedId, this.autoAttachUrl);
// On response, the attachment HTML fragment will replace the progress bar.
} else {
this.progressBar.end();
this.progressBar.destroy();
}
return blobSignedId;
} catch (error) {
this.progressBar.error((error as Error).message);
throw error;
}
}
/**
Upload the file using the DirectUpload instance, and return the blob signed_id.
Throws a FileUploadError on failure.
*/
2022-05-06 19:41:16 +02:00
private async upload(): Promise<string> {
2019-02-13 14:16:22 +01:00
return new Promise((resolve, reject) => {
this.directUpload.create((errorMsg, attributes) => {
if (errorMsg) {
const error = errorFromDirectUploadMessage(errorMsg);
reject(error);
2019-02-13 14:16:22 +01:00
} else {
resolve(attributes.signed_id);
}
});
});
}
/**
Attach the file by sending a POST request to the autoAttachUrl.
Throws a FileUploadError on failure (containing the first validation
error message, if any).
*/
2022-05-06 19:41:16 +02:00
private async attach(blobSignedId: string, autoAttachUrl: string) {
const formData = new FormData();
formData.append('blob_signed_id', blobSignedId);
try {
2022-05-06 19:41:16 +02:00
await httpRequest(autoAttachUrl, {
method: 'put',
body: formData
}).turbo();
} catch (e) {
2022-05-06 19:41:16 +02:00
const error = e as ResponseError;
const errors = (error.jsonBody as { errors: string[] })?.errors;
const message = errors && errors[0];
throw new FileUploadError(
message ||
`Impossible d'associer le fichier (in english: error attaching file).'`,
2022-05-06 19:41:16 +02:00
error.response?.status,
ERROR_CODE_ATTACH
);
}
}
uploadRequestDidProgress(event: ProgressEvent) {
2019-02-13 14:16:22 +01:00
const progress = (event.loaded / event.total) * 100;
if (progress) {
this.progressBar.progress(progress);
}
}
directUploadWillStoreFileWithXHR(xhr: XMLHttpRequest) {
2020-04-30 15:42:29 +02:00
xhr.upload.addEventListener('progress', (event) =>
2019-02-13 14:16:22 +01:00
this.uploadRequestDidProgress(event)
);
}
}