Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Impossible to monitor file upload progress using sdk.cma.upload #1882

Open
brootle opened this issue Feb 26, 2024 · 1 comment
Open

Impossible to monitor file upload progress using sdk.cma.upload #1882

brootle opened this issue Feb 26, 2024 · 1 comment

Comments

@brootle
Copy link

brootle commented Feb 26, 2024

I currently have a problem that I have no way to monitor file upload when using sdk.cma.upload The only available methods are these

upload: {
    get(params: OptionalDefaults<GetSpaceParams & {
        uploadId: string;
    }>): Promise<any>;
    create(params: OptionalDefaults<GetSpaceParams>, data: {
        file: string | ArrayBuffer | Stream;
    }): Promise<any>;
    delete(params: OptionalDefaults<GetSpaceParams & {
        uploadId: string;
    }>): Promise<any>;
};
@brootle
Copy link
Author

brootle commented Feb 28, 2024

I had to use API directly, the downside is that I need to get CMA token from the user for this to work. You can get CMA token from a user during your app installation for example. Contentful SDK doesn't have a method to get access token which it is using to sign all the requests.

  async function customUploadMethod(file, accessToken, spaceId, environmentId, onProgress) {
    // Define the URL for Contentful's upload API
    const uploadUrl = `https://upload.contentful.com/spaces/${spaceId}/uploads`;
  
    // Use XMLHttpRequest for upload to listen to progress events
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest();
      xhr.open('POST', uploadUrl, true);
  
      // Set the Authorization header with the access token
      xhr.setRequestHeader('Authorization', `Bearer ${accessToken}`);

      // Set the Content-Type header to application/octet-stream
      xhr.setRequestHeader('Content-Type', 'application/octet-stream');
  
      // Listen for progress events
      xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
          let percentComplete = (event.loaded / event.total) * 100;
          let roundedPercentComplete = Math.round(percentComplete);
          console.log(`Upload progress: ${roundedPercentComplete}%`);
          onProgress(roundedPercentComplete); // Call the onProgress callback with the progress percentage
        }
      };
  
      // Handle the response
      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
          // Parse the JSON response
          const response = JSON.parse(xhr.responseText);
          resolve(response);
        } else {
          reject(new Error('Upload failed with status: ' + xhr.status));
        }
      };
  
      // Handle network errors
      xhr.onerror = function() {
        reject(new Error('Network error occurred during upload'));
      };
  
      // Send the request with the file data directly
      xhr.send(file);
    });
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant