8158 bug UI not using presign for uploading objects

webui/src/lib/api/index.js

@@ -668,12 +668,8 @@ export const uploadWithProgress = (url, file, method = 'POST', onProgress = null
         });
         xhr.addEventListener('load', () => {
             resolve({
-                status: xhr.status,
-                body: xhr.responseText,
-                contentType: xhr.getResponseHeader('Content-Type'),
-                etag: xhr.getResponseHeader('ETag'),
-                contentMD5: xhr.getResponseHeader('Content-MD5'),
-            })
+                rawHeaders: xhr.getAllResponseHeaders(), // add raw headers 
+            });
         });
         xhr.addEventListener('error', () => reject(new Error('Upload Failed')));
         xhr.addEventListener('abort', () => reject(new Error('Upload Aborted')));
@@ -1125,7 +1121,7 @@ class Statistics {
 
 class Staging {
     async get(repoId, branchId, path, presign = false) {
-        const query = qs({path, presign});
+		const query = qs({path, presign});
         const response = await apiRequest(`/repositories/${encodeURIComponent(repoId)}/branches/${encodeURIComponent(branchId)}/staging/backing?` + query, {
             method: 'GET'
         });

webui/src/pages/repositories/repository/objects.jsx

@@ -226,42 +226,47 @@ const ImportModal = ({config, repoId, referenceId, referenceType, path = '', onD
   );
 };
 
-function extractChecksumFromResponse(response) {
-  if (response.contentMD5) {
-    // convert base64 to hex
-    const raw = atob(response.contentMD5)
-    let result = '';
-    for (let i = 0; i < raw.length; i++) {
-      const hex = raw.charCodeAt(i).toString(16);
-      result += (hex.length === 2 ? hex : '0' + hex);
-    }
-    return result;
+function extractChecksumFromResponse(rawHeaders) {
+    const headersString = typeof rawHeaders === 'string' ? rawHeaders : rawHeaders.toString();
+    const cleanedHeadersString = headersString.trim();
+    const headerLines = cleanedHeadersString.split('\n');
+    const parsedHeaders = headerLines.reduce((acc, line) => {
+        let [key, ...value] = line.split(':'); // split into key and the rest of the value
+        key = key.trim(); 
+        value = value.join(':').trim(); 
+        if (key && value) {
+            acc[key.toLowerCase()] = value;
+        }
+        return acc;
+    }, {});
+  if (parsedHeaders['content-md5']) {
+    return parsedHeaders['content-md5'];
   }
-
-  if (response.etag) {
-    // drop any quote and space
-    return response.etag.replace(/[" ]+/g, "");
+  // fallback to ETag
+  if (parsedHeaders['etag']) {
+	// drop any quote and space
+    return parsedHeaders['etag'].replace(/"/g, ''); 
   }
-  return ""
+  return null;
 }
 
-const uploadFile = async (config, repo, reference, path, file, onProgress) => {
-  const fpath = destinationPath(path, file);
-  if (config.pre_sign_support_ui) {
-      let additionalHeaders;
-      if (config.blockstore_type === "azure") {
-          additionalHeaders = { "x-ms-blob-type": "BlockBlob" }
-      }
-    const getResp = await staging.get(repo.id, reference.id, fpath, config.pre_sign_support_ui);
-    const uploadResponse = await uploadWithProgress(getResp.presigned_url, file, 'PUT', onProgress, additionalHeaders)
-    if (uploadResponse.status >= 400) {
-      throw new Error(`Error uploading file: HTTP ${status}`)
+const uploadFile = async (config, repo, reference, path, file, onProgress) => {  
+    const fpath = destinationPath(path, file);  
+    if (config.pre_sign_support_ui) {
+        let additionalHeaders;
+        if (config.blockstore_type === "azure") {
+            additionalHeaders = { "x-ms-blob-type": "BlockBlob" }
+        }
+        const getResp = await staging.get(repo.id, reference.id, fpath, config.pre_sign_support_ui);
+        const uploadResponse = await uploadWithProgress(getResp.presigned_url, file, 'PUT', onProgress, additionalHeaders);
+        if (uploadResponse.status >= 400) {
+            throw new Error(`Error uploading file: HTTP ${uploadResponse.status}`);
+        }
+		const checksum = extractChecksumFromResponse(uploadResponse.rawHeaders);
+        await staging.link(repo.id, reference.id, fpath, getResp, checksum, file.size, file.type);
+    } else {
+        await objects.upload(repo.id, reference.id, fpath, file, onProgress);
     }
-    const checksum = extractChecksumFromResponse(uploadResponse)
-    await staging.link(repo.id, reference.id, fpath, getResp, checksum, file.size, file.type);
-  } else {
-    await objects.upload(repo.id, reference.id, fpath, file, onProgress);
-  }
 };
 
 const destinationPath = (path, file) => {