[ECO Bounty] DePINscan Image Upload Failure for Project Logo

Description

The "Logo" upload field in the project configuration settings fails to process and save uploaded images. When a user selects an image from their device, the interface shows a brief loading animation but immediately reverts to the initial upload icon without displaying the selected image or confirming the upload.

Severity

High — This is a functional blocker for developers trying to set up or update their project profiles. Projects without logos may appear unverified or unprofessional to users on the DePINscan platform.

Impact

• Project Incompleteness: Developers cannot complete their project profile according to mandatory requirements (indicated by the red asterisk next to "Logo*").

• User Experience: Frequent failed attempts to upload an icon without an error message lead to developer frustration.

• Platform Quality: Reduces the overall data quality of the DePINscan ecosystem if projects are forced to remain without branding.

Reproduce

1. Navigate to https://depinscan.io/developer/settings/team-projects.

2. Click on the "Logo"* upload box (indicated by the cloud icon).

3. Select a valid image file from the local file browser.

4. Observe the loading state in the upload box.

5. Observe the box reverting to the original cloud icon once the loading animation finishes.

Expectation

The selected image should be uploaded, and a preview of the logo should appear in the "Logo" box. A success message or confirmation should be displayed once the file is saved to the server.

Actual

The upload appears to start but fails to complete or display the preview, leaving the field empty. No specific error message (e.g., "File too large" or "Invalid format") is provided to the user.

Suggest Fix

• File Type Validation: Ensure the front-end clearly specifies and validates supported file types (e.g., .png, .jpg, .svg).

• Error Feedback: Implement clear error messaging if the upload fails due to server-side issues, file size limits, or network timeouts.

• Persistent Preview: Ensure the image preview is rendered in the UI immediately upon selection or successful upload.

• Server-Side Check: Verify that the backend endpoint for image uploads is correctly receiving and storing the files in the project's directory.,

Wallet Address: io1tkw393kejmxwnd454twc6020sxcyvh5dxqmren

Device & Environment:

-Operating system: Android 13

-Device model: Redmi Note 10 Pro