fix(ui/file-upload): Disable body parser to allow .gz files to be uploaded

stegano/next-http-proxy-middleware#33

Author: OliverDudgeon

components/FileUpload/FileUpload.tsx

@@ -20,12 +20,14 @@ export const FileUpload = () => {
 
   const [mimeTypeFormDatas, setMimeTypeFormDatas] = useState<FileTypeOptionsState>({});
 
-  const { isLoading: isTypesLoading } = useGetFileTypes(); // Ensure types are prefetched to mime lookup works
+  // Ensure types are prefetched to mime lookup works
+  const { isLoading: isTypesLoading } = useGetFileTypes();
 
   const uploadFiles = () => {
     files
       .filter((file) => !file.done)
       .forEach(async ({ file, rename, mimeType }, index) => {
+        // Prepare the payload for the post request
         const data: DatasetPostBodyBody = {
           dataset_file: file,
           dataset_type: mimeType,
@@ -37,6 +39,7 @@ export const FileUpload = () => {
         };
 
         try {
+          // Can't use the mutate dataset hook here as it doesn't allow a onUploadProgress callback
           const response = await uploadDataset(data, {
             onUploadProgress: (progressEvent: ProgressEvent) => {
               const progress = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
@@ -46,6 +49,8 @@ export const FileUpload = () => {
               setFiles(updatedFiles);
             },
           });
+
+          // A successful request will have a taskId
           if (response.task_id) {
             const updatedFiles = [...files];
             updatedFiles[index].taskId = response.task_id;
@@ -56,13 +61,15 @@ export const FileUpload = () => {
           if (error.isAxiosError) {
             const data = error.response?.data;
 
+            // Add the error to the array of files
             const updatedFiles = [...files];
             updatedFiles[index].errors.push({
               message: data?.error ?? 'Unknown error',
               code: (error.response?.status ?? '').toString(),
             });
             setFiles(updatedFiles);
           }
+          throw err;
         }
       });
   };

components/Uploads/Dropzone.tsx

@@ -50,8 +50,14 @@ export const Dropzone: React.FC<DropzoneProps> = ({
   );
 
   const patchedFileExtensions = allowedFileTypes ?? [];
-  // TODO: allow gzipped files to be uploaded
-  // patchedFileExtensions.push('.gz');
+
+  // Allow .gz files
+  // 1. Browsers limit file selection in native OS file selector to single extensions
+  // So .sdf.gz doesn't work but .gz specifies anything ending in .gz
+  //
+  // 2. This currently requires the body parser in the proxy to be disabled
+  // https://github.com/stegano/next-http-proxy-middleware/issues/33
+  patchedFileExtensions.push('.gz');
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     ...dropzoneOptions,
     onDrop,

pages/api/dm-api/[...dm-proxy].ts

@@ -28,9 +28,7 @@ export default withApiAuthRequired(async (req, res) => {
 
 export const config = {
   api: {
-    bodyParser: {
-      sizeLimit: `${process.env.NEXT_PUBLIC_MAX_UPLOAD_SIZE ?? 25}mb`,
-    },
+    bodyParser: false,
     externalResolver: true, // Prevents noise created by proxy
   },
 };