feat: add a common upload endpoint (#7806)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/helper/specs/uploadHelper.spec.js

@@ -0,0 +1,53 @@
+import { uploadFile } from '../uploadHelper';
+import axios from 'axios';
+
+// Mocking axios using jest-mock-axios
+global.axios = axios;
+jest.mock('axios');
+
+describe('#Upload Helpers', () => {
+  afterEach(() => {
+    // Cleaning up the mock after each test
+    axios.post.mockReset();
+  });
+
+  it('should send a POST request with correct data', async () => {
+    const mockFile = new File(['dummy content'], 'example.png', {
+      type: 'image/png',
+    });
+    const mockResponse = {
+      data: {
+        file_url: 'https://example.com/fileUrl',
+        blob_key: 'blobKey123',
+        blob_id: 'blobId456',
+      },
+    };
+
+    axios.post.mockResolvedValueOnce(mockResponse);
+
+    const result = await uploadFile(mockFile);
+
+    expect(axios.post).toHaveBeenCalledWith(
+      '/api/v1/upload',
+      expect.any(FormData),
+      { headers: { 'Content-Type': 'multipart/form-data' } }
+    );
+
+    expect(result).toEqual({
+      fileUrl: 'https://example.com/fileUrl',
+      blobKey: 'blobKey123',
+      blobId: 'blobId456',
+    });
+  });
+
+  it('should handle errors', async () => {
+    const mockFile = new File(['dummy content'], 'example.png', {
+      type: 'image/png',
+    });
+    const mockError = new Error('Failed to upload');
+
+    axios.post.mockRejectedValueOnce(mockError);
+
+    await expect(uploadFile(mockFile)).rejects.toThrow('Failed to upload');
+  });
+});

app/javascript/dashboard/helper/uploadHelper.js

@@ -0,0 +1,41 @@
+/* global axios */
+
+/**
+ * Constants and Configuration
+ */
+
+// Version for the API endpoint.
+const API_VERSION = 'v1';
+
+// Default headers to be used in the axios request.
+const HEADERS = {
+  'Content-Type': 'multipart/form-data',
+};
+
+/**
+ * Uploads a file to the server.
+ *
+ * This function sends a POST request to a given API endpoint and uploads the specified file.
+ * The function uses FormData to wrap the file and axios to send the request.
+ *
+ * @param {File} file - The file to be uploaded. It should be a File object (typically coming from a file input element).
+ * @returns {Promise} A promise that resolves with the server's response when the upload is successful, or rejects if there's an error.
+ */
+export async function uploadFile(file) {
+  // Create a new FormData instance.
+  let formData = new FormData();
+
+  // Append the file to the FormData instance under the key 'attachment'.
+  formData.append('attachment', file);
+
+  // Use axios to send a POST request to the upload endpoint.
+  const { data } = await axios.post(`/api/${API_VERSION}/upload`, formData, {
+    headers: HEADERS,
+  });
+
+  return {
+    fileUrl: data.file_url,
+    blobKey: data.blob_key,
+    blobId: data.blob_id,
+  };
+}